CSS + tekst

CSS Tutorial wpis

CSS + tekst

W dzisiejszym wpisie, chce Wam pokazać jak możemy bawić się tekstem za pomocą CSSa. Dla niektórych pewnie to nie będzie żadna nowość, a inni może dowiedzą się z tego wpisu czegoś nowego, tak czy siak, potraktujcie ten wpis jako ściągawkę :)

Ustalenie koloru tekstu

selektor {
color: #990000;
}

Dekoracja tekstu 

selektor { text-decoration: underline; } - podkreślenie
selektor { text-decoration: overline; } - nad kreślenie
selektor { text-decoration: line-through; } - przekreślenie
selektor { text-decoration: none; } - brak efektu

Cień + jego kolor

selektor { text-shadow: 1px 1px 1px #a64d79; }

Odstęp między literami 

selektor {letter-spacing: 3px;}

Odstęp między wierszami

selektor { line-height: 1.6; }

Odstęp między wyrazami

selektor { word-spacing: 20px;}

Transformacja tekstu 

selektor { text-transform: lowercase; } - wszystkie litery w tekście będą małe
selektor { text-transform: uppercase; } - wszystkie litery w teście są wielkie
selektor { text-transform: capitalize; } - pierwsze litery, każdego wyrazu są wielkie
selektor { text-transform: none; } - bez efektu transformacji 

Czytaj dalej

Archiwum w menu/stronach - Blogger

HTML Tutorial wpis

Archiwum w menu/stronach - Blogger

Już jakiś czas temu, parę osób prosiło o to, aby zrobić instrukcję umieszczenia archiwum w rozwijanym menu. Tak naprawdę nie będzie to dla Was nowość, bo ta instrukcja powstanie na bazie już istniejących instrukcji na blogu.

1. Przechodzimy sobie do instrukcji dotyczącej, rozwijanego menu i wykonujemy wszystkie punkty po kolei

Przejdź do - Jak zrobić rozwijane menu
2. Edytujemy część kodu odpowiadającą za kategorie rozwijane (ja wybrałam drugie kategorie):

Przed

<li><a href='#'>KATEGORIE2</a>
<ul>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
</ul>
</li>

Po

<li><a href='#'>Archiwum</a>
<ul>
<li><a href='LINK DO ARCHIWUM'>ROK</a></li>
<li><a href='LINK DO ARCHIWUM'>ROK</a></li>
<li><a href='LINK DO ARCHIWUM'>ROK</a></li>
</ul>
</li>

3. Z instrukcji, jak wykonać archiwum z podziałem rocznym, wykonujemy punkt "LINK DO ARCHIWUM"

Przejdź do - Archiwum z podziałem rocznym
4. Po edycji, nasza część kodu z menu będzie wyglądać mniej więcej tak:

<li><a href='#'>Archiwum</a>
<ul>
<li><a href='http://blonparia.blogspot.com/search?updated-min=2017-01-01T00:00:00%2B01:00&updated-max=2018-01-01T00:00:00%2B01:00&max-results=4'>2015</a></li>
<li><a href='http://blonparia.blogspot.com/search?updated-min=2016-01-01T00:00:00%2B01:00&updated-max=2017-01-01T00:00:00%2B01:00&max-results=50'>2016</a></li>
<li><a href='http://blonparia.blogspot.com/search?updated-min=2017-01-01T00:00:00%2B01:00&updated-max=2018-01-01T00:00:00%2B01:00&max-results=4'>2017</a></li>
</ul>
</li>

Aby dodać kolejny rok, wystarczy po ostatnim </a> dodać <li><a href='LINK DO ARCHIWUM'>ROK</a></li>

To wszystko, nie ma żadnych nowości, ale mam nadzieję, że osobom, które na to czekały taki wpis, co jak i gdzie troszkę pomógł ;)

Czytaj dalej

Jak zrobić napis z obrazu na obrazie - GIMP

GIMP grafika wpis

Jak zrobić napis z obrazu na obrazie - GIMP

Dawno nie było instrukcji w GIMPie, więc postanowiłam Wam ją dzisiaj podrzucić, a pokażę Wam jak zrobić napis z obrazu na obrazie, tak to sobie nazwałam, a Wy zaraz dowiecie się o co chodzi ;)

1. Odpalamy GIMPa
2. Otwieramy wybrane zdjęcie za pomocą plik - otwórz 
3. Tworzymy nową warstwę, z białym wypełnieniem

4. Zmniejszamy krycie białej warstwy - nie ma tutaj konkretnej wartości jakiej musimy się trzymać

5. Dodajemy napis

6. Klikamy na warstwę z napisem prawym przyciskiem myszki i wybieramy "kanał alfa na zaznaczanie" 

7. Jak możemy zobaczyć na ostatnim zdjęciu w punkcie 6, pojawiło nam się zaznaczenie na napisie. Teraz musimy kliknąć na warstwę z białym wypełnieniem i wybrać na klawiaturze przycisk "delete".

8. Teraz przechodzimy na warstwę z napisem i usuwamy ją.

9. Efekt

Czytaj dalej