Wpisy oznaczone tagiem "lobster" (5)  

csslab
 
Font 'Lobster' można znaleźć na stronie 'Google Fonts' pod adresem 'www.google.com/fonts/', a jak uzyskać kod CSS dla tego i innych fontów, opisałem we wpisie tutaj: 'csslab.pinger.pl/m/14724890'.

Wykorzystajmy zatem font przy kilku elementach strony blogu. Ze względu na to, że poniższy kod CSS zawiera dwa adresy internetowe, wprowadziłem spację wewnątrz każdego z tych adresów ( 'googleusercontent .com' ). Osoby zainteresowane użyciem tego kodu, muszą po skopiowaniu go usunąć te spacje. Z kolei w komentarzach ( '/* ... */' ) określone są elementy, które wykorzystują font 'Lobster'. Jeśli np. ktoś nie chce, aby jakiś element został zmieniany, może skasować fragment kodu pod komentarzem. A oto kod CSS:

@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: url(http://themes.googleusercontent .com/static/fonts/lobster/v5/vCLp8V-w9blvRLUVAEogtA.eot?#iefix),
url(http://themes.googleusercontent .com/static/fonts/lobster/v5/79Dll_5Rjz0WK-TN_-xljw.ttf);
}

/* pseudonim na górze strony */
div.profil-info h2 {
font-family: "Lobster", cursive;
font-weight: normal;
}

/* tytuł wpisu */
a.msg-title{
font-family: "Lobster", cursive;
font-weight: normal;
font-size: 20px;
}

/* pseudonim w kolumnie po prawej stronie */
h2.login_icon{
font-family: "Lobster", cursive;
font-weight: normal;
font-size: 17px;
background-position: left center;
}

/* nagłówki w kolumnie po prawej stronie */
h2.user_info_header{
font-family: "Lobster", cursive;
font-weight: normal;
font-size: 16px;
}

/* ilość wpisów i licznik odwiedzin */
.profile-stats ul li .stats-count{
font-family: "Lobster", cursive;
font-weight: normal;
font-size: 16px;
}

Fragment strony po zastosowaniu kodu:

Przykład zastosowania fontu Lobster.PNG

Kod ten został zastosowany na stronie 'przytulmisia.pinger.pl/'.
 

spiryt.us
 
Znalezione na bit.ly/NtFjWH (kliknij w link, aby powiększyć ;) )
 

 

Kategorie blogów