• Wpisów:49
  • Średnio co: 46 dni
  • Ostatni wpis:4 lata temu, 22:47
  • Licznik odwiedzin:14 843 / 2323 dni
Jesteś niezalogowany. Niektóre wpisy dostępne są tylko dla znajomych.
 
... Naprawiam Pingera.


A tak na serio, jeśli ktoś korzysta z informacji dotyczących własnych emotikon zawartych na tym blogu, to niech sobie na razie da spokój - coś się zepsuło.
Dodaj komentarz ›/ Pokaż wszystkie (2) ›
 

 
Możecie jeszcze trochę poczekać...

 

 
Naprawa Pingera trwa w najlepsze.

  • awatar Lady in Twilight: :D mozna by powiedzieć ,ze to właśnie takie małe szczeniaczki przy tym pracują,ale nie chcę obrażać słodkich zwierzaczków ;) pewnie on by to zrobił sprawniej niż oni ;)
Dodaj komentarz ›/ Pokaż wszystkie (1) ›
 

 
Jeśli chcesz, aby Twoje wpisy jak i wpisy znajomych na Twoim blogu były tej samej szerokości, możesz zastosować poniższy kod CSS. W pierwszej części kod przemieszcza i zmniejsza wielkość obrazka właściciela blogu. Druga część kodu to zwiększenie szerokości wpisu znajomego w ten sposób, aby wpisy Twoje i znajomych miały ten sam wygląd. Ta część kodu powinna być zastosowana tylko wtedy, jeśli wpisy mają oryginalny wygląd i nie były przez Ciebie poprzednio zmodyfikowane. W drugiej części kodu w czterech fragmentach 'cs.pinger .pl' zostały wprowadzone spacje, które należy usunąć.

/* pierwsza część */

.authors-odd, .authors-even {
width: 70px;
height: 75px;
}

.authors-even > .pair-left, .authors-odd > .pair-left{
position: relative;
left: 35px;
top: -40px;
}

.authors-even > a.pair-left img, .authors-odd > a.pair-left img{
width: 46%;
padding: 0;
}

.authors-even > a.pair-left img:hover{
border-color: rgb(238, 232, 209);
}

.authors-odd > a.pair-left img:hover{
border-color: rgb(213, 240, 240);
}

.pair-arrow, .answer-to-enrty{
display: none;
}

/* druga część */

.message-wrap .foreign {
width: 429px;
margin-left: 6px;
}

.message-odd .foreign .radius-entry-top {
background: url( "http://cs.pinger .pl/pinger/radius-entry-top.gif" ) no-repeat scroll 0% 0% transparent;
}

.message-odd .foreign .radius-entry-bottom {
background: url( "http://cs.pinger .pl/pinger/radius-entry-bottom.gif" ) no-repeat scroll 0% 0% transparent;
}

.message-even .foreign .radius-entry-top {
background: url( "http://cs.pinger .pl/pinger/radius-entry-top-bright.gif" ) no-repeat scroll 0% 0% transparent;
}

.message-even .foreign .radius-entry-bottom {
background: url( "http://cs.pinger .pl/pinger/radius-entry-bottom-bright.gif" ) no-repeat scroll 0% 0% transparent;
}

.foreign .img-wrap img.full {
max-width: none;
}

A oto wygląd wpisu znajomego po zastosowaniu kodu
 

 
Zamieszczam kod CSS poszerzający wpisy, usuwający boczne obrazki autora wpisów oraz wyśrodkowujący obrazki we wpisach. Kod ten zamieszczam również w załączniku jako plik tekstowy.

.message-wrap{
margin: 3px 0 6px;
}

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
border-radius: 6px;
}

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
margin: 0;
float: none;
width: auto;
padding: 5px;
}

.message-wrap .clearer {
display: none;
}

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

.author-odd, .author-even, .authors-odd, .authors-even{
display: none;
}

.img-wrap, #main_news .image-thumbs{
text-align: center;
}

#main_news .image-thumbs a.imgs{
float: none;
}

#main_news .image-thumbs a.imgs img{
display: inline-block;
margin: 6px 2px;
}

.foreign .img-wrap img.full {
max-width: none;
}
  • awatar Gość: bardzo fajne :) Przydało się :D Dzięki :P
Dodaj komentarz ›/ Pokaż wszystkie (1) ›
 

 
Poniżej przestawiam kod CSS, którego zadaniem jest powiększenie rozmiaru pola tekstowego, w sekcji 'Własne style' w zakładce 'Wygląd minibloga' na stronie ustawień. Zmiana ta może pomóc podczas przeglądu i edycji własnego kodu CSS. Wysokość tego pola tekstowego można zmieniać przeciągając prawy dolny narożnik.

Kod CSS:

.user-style-set .vertical{
text-align: left;
padding-left: 1em;
}

.user-style-set .textarea-bg{
background: none;
width: auto;
height: auto;
border: 1px solid #579CC3;
border-radius: 3px;
}

.user-style-set #user-style-content{
width: 488px;
height: 360px;
min-height: 90px;
resize: vertical;
}
 

 
Jest to raczej drobnostka, lecz postanowiłem o tym wspomnieć. Jeśli ktoś nie modyfikował górnego logo z napisem 'pinger', może czasami zauważyć, że obszar, który może kliknąć jest nieco mniejszy niż rozmiar całego logo.


Można to naprawić za pomocą poniższego kodu CSS:

#logo a, #logo a span, #adult_logo a, #adult_logo a span {
width: 235px;
}
 

 
Osoby, które zmieniają kolor tła środkowej kolumny wpisów, mogą zauważyć dodatkową białą ramkę wokół obrazków autora wpisów.


Jeśli komuś to przeszkadza, można tę ramkę usunąć za pomocą kodu CSS:

.author-odd, .author-even, .authors-odd, .authors-even{
border-color: transparent;
}


Jest jeszcze nieco inny kod na usunięcie ramki, lecz zmienia on położenie niektórych elementów w kolumnie wpisów o kilka pikseli:

.author-odd, .author-even, .authors-odd, .authors-even{
border: none;
}
  • awatar Gość: Many thanks a whole lot for sharing!
  • awatar Gość: The site is fascinating! thanks for sharing this helpful info..
Dodaj komentarz ›/ Pokaż wszystkie (2) ›
 

 
Przycisk 'Dodaj komentarz' składa się z obrazka tła o wymiarach 130 na 21 pikseli oraz z białego napisu 'Dodaj komentarz'. Pierwszy sposób na manipulację wyglądu sprowadza się do podmiany jednego lub dwóch obrazków tła przycisku. Poniżej mamy kod CSS z podmianą jednego obrazka, gdzie tekst 'adres.obrazka' to absolutny adres internetowy pliku obrazka, którym ten tekst należy zastąpić.

input.add-comment, input.add-comment:hover{
background-image: url(adres.obrazka);
}


Następny kod CSS jest odpowiedni dla zmiany wyglądu przycisku, kiedy najedziemy na niego wskaźnikiem myszy. W miejscu tekstu w kodzie 'adres.drugiego.obrazka' wstawiamy adres internetowy drugiego pliku obrazka, który będzie wyświetlony po najechaniu.

input.add-comment{
background-image: url(adres.obrazka);
}

input.add-comment:hover{
background-image: url(adres.drugiego.obrazka);
}


Dla dodatkowego efektu możemy również zmienić kolor tekstu:

input.add-comment{
background-image: url(adres.obrazka);
color: red;
}

input.add-comment:hover{
background-image: url(adres.drugiego.obrazka);
color: black;
}


Manipulacja wyglądu przycisku jest też możliwa bez posiadania obrazków tła – wykorzystujemy wtedy tylko kod CSS. Pod spodem mamy przykład takiego kodu. W komentarzach ( '/* ... */' ) opisuję co zostaje zmieniane. Można usunąć wiersze kodu z komentarzami, które nie są nam potrzebne. Można również tam dodać inne właściwości, jak np. 'box-shadow'.

input.add-comment{
background: #7CB2DE; /* kolor tła */
color: white; /* kolor tekstu */
border: 1px solid gray; /* ramka */
border-radius: 5px; /* narożniki */
margin-left: 50px; /* korekcja położenia */
}

input.add-comment:hover{
background: white; /* kolor tła */
color: #33BBEE; /* kolor tekstu */
}
  • awatar Gość: As I website possessor I believe the content material here is rattling wonderful , appreciate it for your hard work. You should keep it up forever! Best of luck.
Dodaj komentarz ›/ Pokaż wszystkie (1) ›
 

 
Przycisk 'Odpowiedz' pojawia się pod komentarzami do wpisów. Jego wygląd opiera się całkowicie na dwóch obrazkach o wymiarach 66 na 16 pikseli – jednego dla stanu w spoczynku i drugiego wyświetlanego wtedy, kiedy wskaźnik myszy znajduje się nad przyciskiem. Tekst etykiety przycisku ( 'Odpowiedz' ) jest częścią obrazków. Pierwsza opcja przy zmianie przycisku polega na podmianie jednego lub obu obrazków przedstawiających przycisk:

ul.comments-list .comment-meta .comment-reply{
background-image: url(adres.obrazka);
}

ul.comments-list .comment-meta .comment-reply:hover{
background-image: url(adres.drugiego.obrazka);
}

Fragmenty tekstu 'adres.obrazka' oraz 'adres.drugiego.obrazka' w powyższym kodzie należy zastąpić absolutnymi adresami plików obrazków przedstawiających przycisk w dwóch stanach.


Druga opcja zmiany wyglądu przycisku nie wymaga obecności obrazków i opiera się tylko na kodzie CSS. Oto przykład:

/* przycisk bez wskaźnika myszy */
ul.comments-list .comment-meta .comment-reply{
background: #7DB6F5; /* kolor tła */
color: white; /* kolor tekstu */
font-weight: bold; /* pogrubienie tekstu */
padding: 2px 5px; /* wielkość przycisku */
border-radius: 3px; /* narożniki przycisku */
}

/* przycisk i wskaźnik myszy */
ul.comments-list .comment-meta .comment-reply:hover{
background: white;
color: #478DB3;
}

/* wyświetlenie etykiety */
ul.comments-list .comment-meta .comment-reply span {
visibility: visible;
}
 

 
Font 'Lobster' można znaleźć na stronie 'Google Fonts' pod adresem 'http://www.google.com/fonts/';, a jak uzyskać kod CSS dla tego i innych fontów, opisałem we wpisie tutaj: 'http://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:

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

 
Zastosowanie właściwości CSS 'box-shadow' na obrazkach może urozmaicić wygląd wpisu, zatem przedstawię kilka kodów CSS, które ozdobią wasze obrazki.

Na początku standardowy cień rzucany przez obrazek:

/* reguła 1 */
.message a.imgs img{
box-shadow: 3px 3px 3px #aaa; /* efekt cienia */
}
/* reguła 2 */
.message a.imgs{
padding-bottom: 8px;
}

Powyższa druga reguła z deklaracją 'padding-bottom: 8px' dodaje trochę przestrzeni na dole, dzięki temu zapobiega ucinaniu cienia w pewnych przypadkach.

Kolejny przykład przedstawia nieco zmodyfikowaną wersję cienia:

.message a.imgs img{
box-shadow: 0 13px 3px -8px #aaa;
}
.message a.imgs{
padding-bottom: 8px;
}
 

 
Przycisk 'szukaj' składa się całkowicie z obrazka, a więc również tekst 'szukaj' jest częścią tego obrazka. Jest to zatem odmienne rozwiązanie, niż ma to miejsce w przypadku przycisku 'dodaj...', gdzie tło jest obrazkiem, a napis osobnym tekstem. Zatem, jeśli podmieniamy przycisk 'szukaj', na nowym obrazku o wymiarach 62 na 20 pikseli musimy sami umieścić nazwę przycisku.
Kod CSS podmiany obrazka może wyglądać tak:

input#search, input#search-msg-submit, input#search-msg-by-tag-submit{
background-image: url(obrazek.z.napisem);
}

Tekst 'obrazek.z.napisem' zastępujemy adresem absolutnym ( posiadającym na początku fragment 'http:' ) pliku obrazka przedstawiającego nasz przycisk z nazwą 'szukaj'.
Jeśli posiadamy również wersję obrazka, gdzie przycisk wygląda inaczej w momencie najechania na niego wskaźnikiem myszy, nasz kod CSS powinniśmy rozszerzyć do takiej postaci:

input#search, input#search-msg-submit, input#search-msg-by-tag-submit{
background-image: url(obrazek.z.napisem);
}
input#search:hover, input#search-msg-submit:hover, input#search-msg-by-tag-submit:hover{
background-image: url(drugi.obrazek.z.napisem);
}
 

 
W momencie, kiedy jesteśmy zalogowani na naszym koncie i wejdziemy na blog innej osoby, po prawej stronie pojawiają się przyciski, z których pierwszy to 'Dodaj do znajomych'. Aby zmienić wygląd tych przycisków, mamy możliwość podmiany ich obrazków tła lub ustalić ich wygląd całkowicie za pomocą kodu CSS.
Jeśli chcemy skorzystać z pierwszej opcji, musimy posiadać własny obrazek o wymiarach najlepiej 150 na 21 pikseli i zastosować kod CSS, w którym 'adres.obrazka' to absolutny adres naszego obrazka:

button.button-add{
background-image: url( "adres.obrazka" );
}

Aby przycisk zmieniał wygląd po najechaniu na niego myszką, musimy posiadać dwa obrazki i wprowadzić następujący kod:

button.button-add{
background-image: url( "adres.obrazka" );
}
button.button-add:hover{
background-image: url( "adres.drugiego.obrazka" );
}

Zmiany koloru tekstu na przyciskach możemy dokonać za pomocą właściwości 'color', np.:

button.button-add{
background-image: url( "adres.obrazka" );
color: #EE9;
}

Jak wspomniałem na początku, wygląd przycisków 'Dodaj...' możemy zdefiniować bez używania obrazków korzystając tylko z kodu CSS. Poniżej znajduje się przykład takiego kodu i widok w przeglądarce:

button.button-add{
background: white; /* kolor tła */
color: #33BBEE; /* kolor tekstu */
border: 1px solid gray; /* ramka */
border-radius: 5px; /* narożniki */
}
/* po najechaniu wskaźnikiem myszki */
button.button-add:hover{
background: lightblue; /* kolor tła */
color: white; /* kolor tekstu */
}
  • awatar Gość: @Konstylencja: Te przyciski pojawiają się na Twoim blogu, kiedy ktoś inny zalogowany wchodzi na Twoją stronę.
Dodaj komentarz ›/ Pokaż wszystkie (1) ›
 

 
Wpis ten poświęcony jest przyciskom, które oryginalnie znajdują się na górze strony blogu po prawej stronie. Modyfikacje tutaj opisane nie uwzględniają przeglądarki Internet Explorer 8, która jest przestarzała i coraz rzadziej używana.
Na początku przedstawię kody CSS, które pozwalają na likwidację elementów wizualnych, które mogą nam się nie podobać w tych przyciskach.

Usunięcie cienia pod przyciskami:

ul#navlist li
{
box-shadow: none;
}

Usunięcie gradientu z przycisków:

ul#navlist li
{
background-image: none;
}

Usunięcie strzałek przy etykietach przycisków:

ul#navlist li .arrow, ul#navlist li .arrow:hover {
background-image: none;
padding-right: 0;
}

Kiedy usuniemy gradient, możemy ustalić kolor tła przycisków:

ul#navlist li
{
background-image: none;
background-color: #FFF; /* ustalamy nowy kolor np. biały */
}

Możemy również zaokrąglić narożniki przyciskom:

ul#navlist li
{
border-radius: 6px;
}

Jeśli podoba nam gradient na przyciskach, lecz chcemy zastosować inny kolor, musimy usunąć oryginalny gradient, nadać własny kolor tła oraz zastosować specjalny zapis właściwości 'box-shadow':

ul#navlist li
{
background-image: none;
background-color: #FFF;
box-shadow: inset 0 -20px 12px -12px #CC9; /* nowy gradient */
}

Jeśli chcemy, aby przyciski rzucały cień i dodatkowo posiadały gradient, to przedstawiona powyżej właściwość 'box-shadow' musi być rozszerzona o wartości dla rzucanego cienia:

box-shadow: inset 0 -20px 12px -12px #CC9, 1px 1px 3px #888;

Wspomnę tylko, że wartość #CC9 to kolor dla gradientu, a wartość #888 to kolor dla cienia. Wartości te oczywiście można zmieniać, tak samo jak pozostałe.

A teraz przykład kodu CSS zmienionych przycisków w całości:

ul#navlist li
{
background-image: none;
background-color: #FFF;
border-radius: 4px;
box-shadow: inset 0 -20px 12px -12px #CC9, 1px 1px 3px #888;
}

ul#navlist li .arrow, ul#navlist li .arrow:hover {
background-image: none;
padding-right: 0;
}
 

 
Technika osadzania własnych fontów na stronie internetowej sprowadza się do napisania w języku CSS specjalnych reguł '@font-face', które zawierają nazwy fontów, opisują ich styl i wagę oraz określają, gdzie znajdują się pliki tych fontów. Serwisy zajmujące się udostępnianiem krojów pisma na strony takie jak 'Google Web Fonts' wyręczają nas od tego i wymagają jedynie, aby na witrynie umieścić przeważnie krótki kod HTML lub kod CSS upraszczający cały proces. Kody te zostaną wyświetlone w serwisie Google wtedy, kiedy stworzymy naszą kolekcję fontów i następnie klikniemy na przycisk 'Use' umiejscowiony w prawym dolnym rogu strony. Drugi sposób uzyskanie kodu to skorzystanie z przycisku 'Quick-use' znajdującego się pod każdym przykładowym tekstem prezentującym font. Strona, którą następnie ujrzymy, podzielona jest na pewne części zawierające kolejne czynności do wykonania, aby na naszej stronie zawitały czcionki Google. Kod do skopiowania i wklejenia znajduje się w części trzeciej strony w niebieskim bloku z zakładkami wraz z instrukcją: 'Add this code to your website'. W zasadzie do wyboru mamy trzy rodzaje kodów do skopiowania, ale dla nas najbardziej odpowiednim jest ten w pierwszej zakładce pod nazwą 'Standard'. Jest tak, ponieważ drugi kod (w języku CSS) zawiera dyrektywę '@import', której nie akceptuje mechanizm weryfikujący kody CSS użytkownika blogu, natomiast ostatni kod (Javascript) jest bardziej skomplikowany, poza tym kod języku Javascript nie zadziała, jeśli osoba odwiedzająca stronę ma wyłączoną obsługę tego języka w przeglądarce.


Kod do skopiowania zmienia się dynamicznie wraz ze zmianami dokonywanymi w kolekcji fontów oraz w momencie, gdy wykonujemy czynności zawarte w częściach pierwszej i drugiej znajdujących się na stronie nad blokiem z naszym kodem. Zanim więc skopiujemy nasz kod, musimy ostatecznie wybrać style fontów i zestawy znaków. Jeżeli krój znaków posiada style poza tym o nazwie 'Normal 400', a my ich nie zaznaczymy, to w razie potrzeby w trakcie wyświetlania tego kroju na naszej strony przeglądarka internetowa pochyli lub pogrubi znaki tego fontu automatycznie, lecz nie zawsze będą one wyglądać atrakcyjnie. Dodatkowe style z kolei niosą ze sobą potrzebę ściągnięcia większej ilości danych podczas ładowania naszej strony.
Nieco odmiennie wygląda sprawa z wybieraniem zestawu znaków w drugiej części strony serwisu, gdzie występuje polecenie: 'Choose the character sets you want' – tutaj nie wybieramy zestawu dla każdego fontu z osobna, lecz globalnie dla nich wszystkich. Jeśli np. posiadamy w kolekcji dwa fonty, które zawierają w sobie zestaw znaków rozszerzonej łaciny i zaznaczymy zestaw 'Latin Extended (latin-ext)', to zestaw rozszerzonej łaciny będzie zawarty w obu tych fontach ładowanych na naszej stronie.


Gdy wszystko mamy już ustawione, kod HTML jest gotowy do skopiowania. Niestety sprawa się komplikuje, kiedy przychodzi do ustalenia miejsca, gdzie ten kod wkleić. Nie ma problemu, jeśli mamy własną stronę internetową – wklejamy wtedy kod wewnątrz znacznika '<head>' w pliku HTML. Niestety nie mamy takiej możliwości w przypadku blogu na 'pinger.pl'. Teoretycznie możemy wkleić kod do pola tekstowego 'Zewnętrzne statystyki' w ustawieniach blogu, ale podejrzewam, że może nie być to działanie zaakceptowane przez moderatora serwisu. Aby rozwiązać ten problem, musimy zamiast kodu HTML uzyskać kod CSS, który bez problemu wstawimy w pole tekstowe 'CSS' w sekcji 'Własne style' w ustawieniach blogu.
Pierwszą metodą jest skorzystanie z narzędzia online istniejącego pod adresem: 'http://pingback.pl/2012/09/12/google-web-fonts/';, gdzie wklejamy uzyskany w serwisie Google kod HTML.


Po kliknięciu 'Wprowadź' powinien wyświetlić się interesujący nas kod CSS, który następnie kopiujemy do ustawień blogu.


Potrzebny kod CSS możemy uzyskać jeszcze w inny sposób, ale jest to bardziej skomplikowane.
Aby to zrobić, dobrze jest na początku wiedzieć, co właściwie robi ten konkretny kod HTML udostępniany przez Google. Mianowicie tworzy on w dokumencie strony element 'link', który ma za zadanie załadowanie zewnętrznego arkusza stylów zawierającego kod CSS wraz ze wspomnianymi na początku regułami '@font-face'. Kluczowym składnikiem elementu 'link' jest atrybut 'href' określający adres powyższego arkusza.


Jest to standardowy adres internetowy, więc możemy go np. wprowadzić do pola adresu jakiejkolwiek przeglądarki internetowej. Uzyskany dokument, który następnie nam się wyświetli w oknie przeglądarki, to właśnie arkusz stylów z poszukiwanym przez nas kodem CSS.


Musimy jednak wiedzieć, że treść tego arkusza jest generowana dynamicznie. Czyli za każdym razem kiedy o niego poprosimy, treść w nim dostarczona może być nieco inna, a zależy to od przeglądarki pobierającej ten arkusz. Serwis Google wykrywa, jaka przeglądarka z nim się komunikuje i tworzy w regule '@face-font' adresy fontów obsługiwane konkretnie przez tą przeglądarkę.
Niestety kod CSS w formie jaką wysyła Google zostanie odrzucony w ustawieniach blogu. Przed wklejeniem należy go więc poddać edycji: usunąć wszelkie funkcje 'local' i 'format', do deskryptora 'src' dodać po przecinku kolejne funkcje 'url' z adresami fontów obsługiwanych w innych przeglądarkach oraz umieścić na końcu adresów plików fontów dla Internet Explorera specjalnych końcówek '?#' lub '?#iefix'. Ostatecznie kod powinien wyglądać tak jak ten, który generowany przez narzędzie online wymienione wcześniej.

Gdy mamy już kod CSS ze specjalnymi regułami '@font-face' opisującymi osadzane fonty, potrzebujemy jeszcze w nim zwykłych reguł CSS określających, które elementy będą wykorzystywać nasze fonty i jakie będą to fonty. Część potrzebnych informacji na ten temat umieszczonych jest na stornie 'Google Web Fonts' tuż pod kodem HTML w ostatniej, czwartej części z poleceniem 'Integrate the fonts into your CSS'.


Przedstawione są tam linijki kodu CSS z właściwością 'font-family' i nazwą kroju pisma, które należy zastosować wewnątrz takich zwykłych reguł CSS wymienionych wcześniej. Pozostaje jeszcze ustalić selektory tych reguł. Jeśli ktoś nie wie, to powiem, że selektor to początkowy fragment reguły, wskazujący elementy, na których ma działać dana reguła CSS. Selektory można łączyć przecinkiem, jeśli chcemy, aby reguła wskazywała więcej elementów. We wspomnianej wyżej czwartej części strony Google znajduje się przykład takiej reguły, gdzie selektor to ciąg znaków 'h1'. Ta przykładowa reguła CSS sprawia, że font 'Metrophobic' będzie wykorzystany przy wyświetlaniu tekstu w nagłówkach 'h1'.
Samodzielne ustalanie wartości selektorów może być trudne, jeśli nie posiada się wiedzy na temat języków CSS i HTML oraz nie zna się budowy strony blogu. Pomocne narzędzia w szukaniu selektorów oferują dzisiejsze przeglądarki internetowe. Wystarczy wskazać kursorem myszki interesujący nas element strony, kliknąć prawym klawiszem myszy i wybrać z menu kontekstowego pozycję 'Zbadaj element'. Wyświetlą nam się wtedy m.in. informację na temat reguł CSS wskazujących na ten element.

Przedstawię kilka przykładów wartości selektorów, które mogą się przydać:

'ul#navlist, ul#navlist li.logout button' – przyciski po prawej na górze strony,
'div.profil-info h2' – nick właściciela blogu,
'a.msg-title, span.msg-title' – tytuły wpisów,
'.message-wrap .news-tags' – tagi wpisów,
'.message-wrap div.message' – treść wpisów,
'.msg_foot, .msg_foot a.time, .like span, .comments-more' – stopka wpisu.

Dla przykładu, jeżeli mamy już specjalną regułę '@font-face' z fontem o nazwie 'Ranchers', to następna, zwykła reguła zmieniająca font tytułów wpisów na ten o nazwie 'Ranchers' może wyglądać tak:

a.msg-title, span.msg-title{
font-family: 'Ranchers', cursive;
}

Podsumowując, aby osadzić fonty z serwisu 'Google web Fonts' na stronie blogu, musimy:
- wybrać interesujące nas fonty w serwisie Google i następnie skopiować wygenerowany kod HTML,
- wykorzystać dany kod HTML, aby uzyskać zawartość arkusza stylów ze specjalnymi regułami CSS '@font-face',
- do treści powyższego arkusza stylów dodać zwykłe reguły CSS ustalające dla tekstów elementów na blogu fonty, których nazwy występują w regułach '@font-face'.
 

 
Serwis Google z fontami udostępnia cztery widoki wybieranych krojów pisma. Dostępne są one za pomocą zakładek na górze strony, a są to: 'Word', 'Sentence', 'Paragraph' i 'Poster'. Każdy z tych widoków ma w zasadzie inne przeznaczenie i pomaga znaleźć czcionki na odmienne cele.
Widok 'Word' przedstawia więcej fontów na tej samej powierzchni niż inne widoki, co umożliwia szybsze przeglądanie i porównywanie krojów pisma. Widok nadaje się raczej do szukania czcionek na większe nagłówki, ponieważ wielkość liter jaką można ustawić to zakres od 64 do 120 pikseli, a widoczny przykładowy tekst to zaledwie krótkie słowo.


Zakładka 'Sentence' jest otwarta podczas wejścia na stronę serwisu. Jest ona najbardziej uniwersalna podczas szukania fontów. Oferuje najszerszy zakres dostępnych wielkości fontów, a przykładowy tekst składa się z jednego wiersza zdania. Widok nadaje się do przeglądania fontów dla np.: nicka blogu (oryginalna wielkość to 36 pikseli), tytułu wpisów (16 pikseli), etykiet (np. 'Szukaj blogów', 14 pikseli) jak i tekstu wpisów (12 pikseli).


Widok 'Paragraph' prezentuje fonty w postaci dłuższych bloków tekstu o wymiarach czcionki od 9 do 12 pikseli. Jeżeli ktoś szuka fontu dla tekstów we wpisach, ten widok jest do tego stworzony.


Zakładka 'Poster' jest nieco odmienna od pozostałych, gdyż jej przeznaczenie to prezentacja fontów przy wykorzystaniu różnych efektów wizualnych, wybieranych z górnej rozwijanej listy 'Appearance'. Nie mamy tutaj możliwości edycji tekstu, a wielkości czcionek to zakres od 28 do 120 pikseli.


Przydatne narzędzia podczas przeszukiwania fontów w 'Google Web Fonts' znajdują się w kolumnie po prawej stronie. Pozwalają one przyspieszyć proces wyboru eliminując z listy te czcionki, które nie pasują do wytycznych – w związku z tym lista czcionek do przeszukania jest krótsza. Na samej górze do dyspozycji mamy wyszukiwarkę. Wystarczy już wpisać kilka liter nazwy lub autora fontu, a pojawiają się odpowiednie pozycje.
Następnie poniżej wyszukiwarki mamy filtry. W liście rozwijanej, na której na początku jest napis 'All categories', możemy zaznaczyć odpowiednie typy fontów. Pierwszy typ 'Serif' oznacza czcionki, w których główne kreski znaków posiadają ukośne lub prostopadłe zakończenia tzw. szeryfy (np. krój pisma Times New Roman). Typ 'Sans Serif' to czcionki, które nie posiadają szeryfów (np. Arial). 'Display' to fonty, które prezentują się najlepiej w większych rozmiarach, np. w napisach, a niekoniecznie w blokach tekstu o małej wielkości czcionki. Ostatni typ na liście to 'Handwriting', czyli fonty imitujące pismo odręczne. Poniżej listy mamy kolejne filtry, które mają wyodrębnić kroje pisma o podobnych cechach. Ustawia się je za pomocą odpowiednich suwaków. Można wybrać kilka tych filtrów jednocześnie – co jeszcze bardziej zmniejszy zakres dostępnych fontów. Są to: 'Thickness' – filtrowanie tutaj odnosi się do grubości kreski znaku, 'Slant' – czyli filtr stopnia nachylenia fontów, 'Width' - filtr uwzględniający szerokość znaków.

Pod spodem filtrów znajdziemy listę rozwijaną 'Script', dzięki której możemy wybrać pismo alfabetyczne, jakie ma być obsługiwane przez font lub inaczej, jaki zestaw znaków ma zawierać konkretny font. Większość z krojów pisma w serwisie zawiera podstawowy alfabet łaciński wraz z cyframi i znakami specjalnymi ( Na liście rozwijanej jest to pozycja pod nazwą 'Latin' ). Poza tym kroje te mogą zawierać inne zestawy znaków jak Cyrylicę ( 'Cyrillic', ' Cyrillic Extended' ), czy alfabet grecki ( 'Greek', 'Greek Extended' ). Ważnym dla tekstów w języku polskim jest zestaw 'Latin Extended', gdyż zawiera on polskie litery diakrytyczne. Wybierając więc jakąś pozycję z listy 'Script' wyświetlane zostają fonty zawierające pasujący zestaw znaków i możliwe, że jeszcze jakiś inny zestaw. Może się jednak zdarzyć, że font posiada konkretny zestaw, ale nie występują w tym zestawie wszystkie znaki. Na przykład wiele czcionek w zestawie ' Latin Extended' ma zdefiniowane litery 'ł', 'ń', 'ó', ale już nie znajdziemy tam takich liter jak 'ą' czy 'ę'. Zatem, jeśli zależy nam na polskich literach i wybierzemy z listy 'Script' pozycję 'Latin Extended', powinniśmy dodatkowo sprawdzić, czy zestaw znaków wybranego kroju pisma posiada na pewno wszystkie te dodatkowe litery diakrytyczne, specyficzne dla języka polskiego. Mamy w tym przypadku dwie możliwości, aby to zrobić. Jedną z nich to wpisanie własnego tekstu w polu 'Preview Text', który zawierał będzie wyżej wymienione litery. Drugi sposób to otwarcie dodatkowego okna, gdzie zawartych jest więcej informacji na temat wybranego fontu. Znajduje się tam również zestaw znaków danego fontu – jeżeli jakiś znak nie jest w zestawie zdefiniowany, pojawia się zamiast niego szary krzyżyk. Powyższe okno otwiera się przyciskiem 'Pop out' znajdującym się pod spodem każdego wyświetlanego fontu.


Na samym dole lewej kolumny znajdziemy jeszcze przełącznik 'Show/Hide all styles'. Pozwala on wyświetlić lub ukryć wszystkie style jakie posiada dany krój pisma. Podobną funkcję ma przycisk 'See/Hide all styles', który pojawia się pod każdym fontem posiadającym więcej niż jeden styl.


Samo przeglądanie listy fontów jest tak rozwiązane, że ilość wyświetlanych pozycji zwiększa się wraz z przewijaniem tej listy w dół. Niestety przełączenie zakładki np. 'Sentence' na 'Word' i z powrotem sprawi, że nie zachowa się wyświetlana pozycja listy przed przełączeniem zakładek i zobaczymy font, który znajduje się prawie na samej górze listy.

Fonty do kolekcji dodajemy za pomocą niebieskiego przycisku 'Add to Collection'. Po kliknięciu na niego zamienia się on w szary przycisk 'Remove from Collection', który z kolei służy do usunięcia danej pozycji z kolekcji. W momencie dodania tło bloku, w którym znajduje się wybrany font, zmienia się na kolor szary, a na dole strony zostaje zaktualizowana lista pozycji w kolekcji. Jeżeli font posiada wiele stylów, możemy zaznaczyć te, które chcemy w kolekcji. Wraz z dodaniem pierwszego fontu do zbioru w kolumnie po lewej stronie pojawia się przełącznik 'Show Collection only/Show all families', który umożliwia wyświetlanie albo tylko fontów znajdujących w kolekcji, albo ich wszystkich.

Dolna niebieska część strony może być rozwijana lub zwijana za pomocą przycisku reprezentowanego za pomocą dwóch strzałek skierowanych w dół lub w górę. Wyświetlana jest w tej części lista fontów występujących w kolekcji. Każda pozycja zawiera nazwę kroju pisma napisaną przy pomocy tego właśnie kroju oraz zawiera jego style. Przy każdym stylu jest krzyżyk, który usuwa dany styl. Krzyżyk umieszczony jest również na końcu każdej pozycji – jego funkcją z kolei jest usunięcie z kolekcji całego fontu. Jeśli chcemy zlikwidować wszystkie fonty, możemy skorzystać z przycisku na samym dole o nazwie 'Remove all families from Collection'.


Jeśli wiemy, że będziemy potrzebować tylko jedną czcionkę, wcale nie musimy tworzyć kolekcji. Wystarczy, że skorzystamy z przycisku 'Quick-use' znajdującego pod każdym fontem, który od razu przeniesie nas do sekcji związanej z osadzaniem fontu na stronie. Powyższego przycisku możemy także użyć w trakcie tworzenia kolekcji, co nie będzie miało na tą kolekcję wpływu.
Należy też wspomnieć, że istnieje możliwość zapamiętania stworzonej przez nas kolekcji fontów na później. Robimy to klikając na znajdujący się na górze po prawej stronie link 'Bookmark your Collection' i kopiując następnie wygenerowany adres, który się pojawi w wyskakującym okienku.
Wchodząc następnym razem na serwis 'Google Web Fonts' za pomocą skopiowanego poprzednio adresu mamy już zaznaczone wcześniej, odpowiednie fonty. Adres ten może się również przydać, jeżeli chcemy podzielić się swoją kolekcją z inną osobą.
 

 
Osadzanie własnych krojów pisma na blogu w serwisie 'pinger.pl' może sprawiać trudność. Na szczęście istnieją serwisy specjalizujące się w hostingu fontów. Jednym z nich jest 'Google Web Fonts', który można znaleźć pod adresem internetowym 'http://www.google.com/webfonts/';. Zaletą tego serwisu jest to, że oferuje on czcionki, które są darmowe i można ich używać bez ograniczeń.
Wchodząc na stronę 'Google Web Fonts' po raz pierwszy ukazuje nam się ona mniej więcej tak:


Po lewej stronie mamy kolumnę, gdzie umieszczonych jest kilka przydatnych narzędzi takich, jak pole tekstowe wyszukiwarki fontów, czy flitry, które kontrolują rodzaj wyświetlanych fontów znajdujących się w bloku po prawej stronie. Na górze strony znajdują się zakładki, które pozwalają wybrać sposób prezentacji czcionek oraz narzędzia do zmiany wyświetlanego, przykładowego tekstu, zmiany wielkości czcionki oraz ustalenia kolejności wyświetlanych czcionek. Poza tym na górze przy zakładkach znajduje się kilka linków, m.in. 'Bookmark your Collection', który pozwala stworzyć pewnego rodzaju zakładkę w postaci adresu internetowego, dzięki której możemy wrócić do przerwanej poprzednio pracy przy tworzeniem naszej kolekcji fontów. Natomiast link 'Download your Collection', jak można się domyślić, pozwala ściągnąć nam naszą kolekcję na dysk lokalny, dzięki czemu możemy na przykład używać tych czcionek na naszym komputerze. Ściągnięte, spakowane fonty są w formacie TrueType (.ttf). Każdy blok z prezentowanym fontem zawiera przykładowy tekst dla jednego ze stylów danego fontu, na dole po lewej stronie wyświetla nazwę fontu i informację o jego autorze. Na dole, po prawej stronie bloku znajdziemy też kilka przycisków: 'See/Hide all styles' pozwala wyświetlić lub schować teksty we wszystkich stylach danego fontu; 'Quick-use' otwiera sekcję serwisu, która pomoże nam w osadzeniu konkretnego fontu, a nie całej ich kolekcji; 'Pop out' otwiera okno z dodatkowymi informacjami o foncie, przykładowymi tekstami w danym foncie oraz zestawem znaków jakie zawiera dany font; ostatni przycisk 'Add to Collection/Remove from Collection' dodaje lub usuwa font z kolekcji.


Na dole strony na niebieskim tle przedstawiane są czcionki dodane do naszej kolekcji. Umieszczone tam są również trzy przyciski, które przełączają nas do innych sekcji serwisu. Przycisk 'Choose' przeniesie nas do miejsca, w którym znajdujemy się na początku, czyli do sekcji wyboru fontu. Przycisk 'Review' z kolei wyświetli sekcję, dzięki której będziemy mogli zarządzać naszą kolekcją fontów, testować wygląd tekstów przy zastosowaniu tych czcionek lub porównywać między sobą poszczególne znaki owych fontów.


Sekcja trzecia, którą otwieramy przy pomocy przycisku 'Use', związana jest z osadzaniem wybranych fontów na własnej stronie internetowej i podzielona jest na cztery części. Pierwsza z nich pozwala na wybranie stylów fontów, jakie chcemy mieć do dyspozycji na stronie. Zawarty też jest wskaźnik, który informuje o ilości danych związanych z pobieraniem fontów w momencie wyświetlania naszej strony.


Druga część pozwala wybrać zestaw znaków spośród tych, które oferują fonty z naszej kolekcji. Ważny dla polskich znaków jest zestaw 'Latin Extended (latin-ext)'.


Część kolejna oferuje trzy sposoby na osadzenie fontów na naszej stronie: poprzez kod HTML z tagiem 'link', kod CSS z dyrektywą '@import' oraz kod 'Javascript'. Dla użytkowników serwisu 'pinger.pl' najlepszą opcją jest wykorzystanie pierwszego kodu HTML z tagiem 'link'.


Ostatnia część przedstawia przykładowe kody CSS, jakie trzeba umieścić na własnej stornie internetowej, aby można było wykorzystać osadzone fonty przy konkretnych blokach tekstu na stronie.
 

 
Fonty na stronie internetowej osadza się przy pomocy specjalnej reguły '@font-face'. Przykładowy kod CSS może wyglądać tak:

@font-face {
font-family: 'Super Nowy', sans-serif;
font-style: normal;
font-weight: normal;
src: local( 'Super Nowy Regular' ),
url(plik.eot) format( 'embedded-opentype' ),
url(plik.woff) format( 'woff' ),
url(plik.ttf) format( 'truetype' );
}

@font-face {
font-family: 'Super Nowy', sans-serif;
font-style: normal;
font-weight: bold;
src: local( 'Super Nowy Bold' ),
url(plik-bold.eot) format( 'embedded-opentype' ),
url(plik-bold.woff) format( 'woff' ),
url(plik-bold.ttf) format( 'truetype' );
}

Wyjaśnię poszczególne części opisu tej reguły.

Deskryptor 'font-family' ustala nazwę kroju pisma, jaką będziemy się posługiwać w innych częściach arkusza stylów, np. poniższy kod ustala, że nick na blogu będzie wyświetlony fontem 'Super Nowy':

div.profil-info h2 {
font-family: 'Super Nowy';
}

Opcjonalna wartość po przecinku 'sans-serif' określa, jaki rodzaj kroju pisma będzie wykorzystany w razie niepowodzenia podczas ładowania fontu. Możliwe wartości to: 'serif', 'sans-serif', 'cursive', 'fantasy', 'monospace'. Jeśli nie wprowadzimy tej wartości w regule '@font-face', zawsze można to zrobić podczas ustalania fontu konkretnego elementu:

div.profil-info h2 {
font-family: 'Super Nowy', sans-serif;
}

Deskryptor 'font-style' określa styl ładowanego fontu. Jeżeli wartością tego deskryptora nie jest 'all', to może zawierać więcej wartości oddzielonych przecinkami, takimi jak: 'normal', 'italic' czy 'oblique'. Jeżeli pominiemy 'font-style' w regule '@font-face' ustalona zostanie wartość 'normal'. Deskryptor ten połączony jest z właściwością o tej samej nazwie stosowaną przy określaniu stylu czcionek tekstu jakiegoś elementu. Dla przykładu określimy czcionkę pochyłą dla naszego nicka:

div.profil-info h2 {
font-family: 'Super Nowy', sans-serif;
font-style: italic;
}

Jeżeli nie zostanie stworzona reguła '@font-face' dla plików z fontami pochyłymi, tekst zostanie w tym przypadku pochylony przez przeglądarkę – co niekiedy może sprawić, że wygląd tekstu będzie nieestetyczny.

Deskryptor 'font-weight' podobnie działa jak 'font-style', lecz odnosi się do wagi lub grubości fontu. Wartości to: 'all' lub 'normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'. Wartość '400' jest równoznaczna z 'normal', a '700' z wartością 'bold'. Jeśli pominiemy deskryptor, ustalona zostanie wartość 'normal'. Brak specjalnego fontu dla tekstu pogrubionego sprawi, że przeglądarka pogubi czcionkę sama. Nasz nick napisany wytłuszczonym fontem:

div.profil-info h2 {
font-family: 'Super Nowy', sans-serif;
font-weight: bold;
}

Deskryptor 'src' ustala źródło pliku fontu. Może składać się z kilku wartości oddzielonych przecinkami, z tym, że liczy się tutaj kolejność wstawianych wartości – na początku będą ładowane pliki wstawione jako pierwsze. Jeżeli skorzystamy z funkcji 'local' jak w powyższym przykładzie: 'local( 'Super Nowy Regular' )', przeglądarka spróbuje odnaleźć font o podanej nazwie na lokalnym komputerze odwiedzającego stronę internetową. Jeżeli zakończy się to sukcesem, wykorzysta ten font i zaprzestanie odczytywać kolejne wartości deskryptora 'src'. Jeśli program natrafi na funkcję 'url' jak np.: 'url(plik.woff)', spróbuje pobrać plik znajdujący pod podanym adresem. Jeśli się to nie uda lub plik jest w formacie nie obsługiwanym przez przeglądarkę, przeglądarka przeskoczy do kolejnej wartości, w przeciwnym wypadku, program zastosuje załadowany font i przestanie szukać kolejnych wartości. Funkcji 'url' może towarzyszyć po spacji określenie formatu danego pliku fontu, który ma ściągnąć jak np.: 'url(plik.woff) format( 'woff' )'. Spowoduje to, że przeglądarka zanim ściągnie plik fontu sprawdzi, czy obsługuje dany format, i jeśli tak nie jest, pominie ten plik i sprawdzi kolejną wartość.
Niestety nie wszystko w praktyce wygląda tak, jak wygląda w teorii. Utrudnienia przynosi nam tutaj Internet Explorer do wersji ósmej włącznie. Po pierwsze nie rozumie ta przeglądarka funkcji 'local' w deskryptorze – jeżeli na nią natrafi, pomija cały wiersz z 'src' i czyta następny. Po drugie program źle odczytuje wiersz w przypadku, kiedy po określeniu adresu fontu przez funkcję 'url' po spacji podany jest format pliku. Chodzi o to, że Explorer traktuje całą zawartość wiersza jako adres fontu i dopiero zatrzymuje się na średniku na końcu wiersza. To oczywiście powoduje, że adres jest błędny i nie zostaje załadowany plik z fontem. Stosuje się kilka technik, aby temu zaradzić. Jedna to taka, że tworzy się dwa deskryptory 'src' – pierwszy specjalnie dla IE, kolejny z funkcją 'local' dla pozostałych przeglądarek. Program trafiając na wiersz z 'local', pomija go zostając przy pierwszym. Niekiedy dla 'local' podawane są wartości zupełnie nie związane z nazwami fontów lokalnych. Przykładowy kod:

@font-face {
font-family: 'Super Nowy', sans-serif;
font-style: normal;
font-weight: normal;
src: url(plik.eot); /* dla IE8 */
src: local( 'Super Nowy Regular' ), /* dla pozostałych */
url(plik.eot) format( 'embedded-opentype' ),
url(plik.woff) format( 'woff' ),
url(plik.ttf) format( 'truetype' );
}

Inna technika, która ma zaradzić błędnemu działaniu przeglądarki IE8, to dodanie na końcu adresu pliku fontu przeznaczonego dla niej znaku zapytania, lub nawet lepiej znaku zapytania, krzyżyka (inaczej płotek czy hash) oraz litery lub kilka liter, np.: '?#iefix'. Rozwiązanie to sprawia, że IE8 nadal błędnie tworzy adres internetowy fontu, lecz tym razem dodatkowe, niepotrzebne znaki znajdujące się za naszym znakiem zapytania, hashem i literami nie są już groźne i nie mają więcej żadnego znaczenia dla głównej części naszego adresu. Kod CSS:

@font-face {
font-family: 'Super Nowy', sans-serif;
font-style: normal;
font-weight: normal;
src: url(plik.eot?#iefix) format( 'embedded-opentype' ), url(plik.woff);
}

Do tego wszystkiego dochodzi jeszcze jeden problem. Umieszczając któryś z powyższych kodów CSS z regułą '@font-face' w polu tekstowym 'CSS' w ustawieniach blogu na 'pinger.pl' otrzymamy komunikat: 'Błąd składni CSS'. Mechanizm weryfikujący poprawność wprowadzanych własnych kodów CSS w tym serwisie nie akceptuje słów 'local' i 'format' w regule '@font-face'. Mamy w tym przypadku dwa wyjścia: albo z kodu usuniemy wymienione słowa, albo będziemy musieli skorzystać z sekcji 'Zewnętrzne statystyki', gdzie wprowadzimy np. link do zewnętrznego arkusza stylów z regułą '@font-face', np.: '<link rel="stylesheet" type="text/css" href="adres.arkusza.css" /> '. Istnieje jednak pewne prawdopodobieństwo, że z kolei drugi sposób nie zostanie pozytywnie przyjęty tym razem przez moderatora serwisu. W związku z tym, kiedy pozostaniemy przy opcji z usunięciem słów, nasz kod CSS, który zostanie zaakceptowany przez mechanizm weryfikujący na 'pinger.pl', może wyglądać tak:

@font-face {
font-family: 'Super Nowy';
font-style: normal;
font-weight: normal;
src: url(http://przyklad.pl/plik.eot?#iefix), url(http://przyklad.pl/plik.woff);
}
 

 
Najpierw krótko wyjaśnię pewne pojęcia oraz zależności między nimi. Krój pisma to zestaw znaków o podobnych cechach ( np. 'Arial' ). Składa się z fontów, czy plików określających kształt tych znaków. Każdy plik fontu jest przeważnie odpowiedzialny tylko za jeden styl lub wagę (grubość) zestawu znaków danego kroju pisma. Można powiedzieć, że font to zestaw czcionek, choć tak naprawdę słowem czcionka określa się kawałek metalu z uformowanym kształtem znaku pisma stosowany przy druku tradycyjnym. Niekiedy potocznie nazwą 'czcionka' określa sam font lub krój pisma, tak samo jak wyraz 'font' stosowany jest w przypadku, kiedy ma się na myśli krój pisma.
Aby korzystać z jakiegoś kroju pisma na stronie internetowej, który nie jest np. powszechnie stosowany w systemach komputerowych, musimy mieć dostęp do pliku fontu tego kroju w odpowiednim formacie, który umieszczony jest gdzieś na serwerze podłączonym do internetu. Poza tym, jeżeli dany plik z fontem znajduje się na innej domenie niż plik ze stroną internetową, która z tego fontu korzysta, wymieniony wcześniej zewnętrzny serwer musi być odpowiednio skonfigurowany. Chodzi o to, że program Firefox zaakceptuje font serwowany z innej domeny tylko wtedy, kiedy przeglądarka w odpowiedzi z serwera znajdzie specjalny nagłówek z treścią: 'Access-Control-Allow-Origin: * ', gdzie gwiazdka może być zastąpiona nazwą domeny np.: 'http://pinger.pl';. To może być dosyć uciążliwe utrudnienie zwłaszcza, kiedy dysponujemy fontem na dysku naszego komputera i chcemy go umieścić w sieci nie dysponując własnym serwerem. Powyższe ograniczenie dostępu sprawia również to, że bezużyteczne staje się osadzanie plików fontów w załączniku wpisu do blogu. W związku z tym dobrym rozwiązaniem może być tutaj skorzystanie z usług takich jak 'Google Web Fonts' pod adresem 'http://www.google.com/webfonts';.
Jest kilka formatów plików fontów obsługiwanych przez przeglądarki internetowe. Niestety żaden z nich nie jest uniwersalny, a więc taki, który byłby na dzień dzisiejszy rozpoznawalny przez wszystkie nowoczesne przeglądarki. Chyba najszerzej obsługiwany format to 'TrueType' o rozszerzeniu nazwy pliku '.ttf' – większość fontów w systemie Windows to pliki w tym formacie. Jak na złość Internet Explorer 8 i starsze nie wyświetlą nam czcionek w TrueType. Dla nich przeznaczony jest inny ich własny format, a mianowicie 'Embedded OpenType' o rozszerzeniu '.eot'. Natomiast formatem, który został wybrany przez organizację World Wide Web Consortium (W3C) jako nośnik dla internetu, jest 'Web Open Font Format' ( rozszerzenie '.woff' ) – obsługiwany jest przez większość przeglądarek desktopowych i wiele mobilnych.
Trzeba mieć na uwadze kilka rzeczy osadzając własne czcionki na stronie:
- Nie wszystkie fonty, które używa się na lokalnym komputerze, ze względu na licencję można zastosować na stronie internetowej.
- Im więcej fontów umieścimy na stronie, tym dłużej będzie się ona ładowała, zwłaszcza za pierwszym razem. Później przeglądarka stara się korzystać z czcionek umieszczonych w pamięci, lub nie ściągać, gdy plik z fontem na serwerze się nie zmienił.
- Tekst, który ma być wyświetlony czcionką pobieraną z serwera, na czas pobierania pliku nie będzie wyświetlony w ogóle lub będzie wyświetlony czcionką standardową.
- Krój pisma, którego font pochodzi z zewnątrz, nie zawsze prezentuje się tak samo we wszystkich przeglądarkach – warto uruchomić stronę w wielu programach, aby sprawdzić jak wygląda.
- Wiele krojów pisma nie posiada polskich znaków. Znaki te w tekście, który korzysta z takiego kroju, będą wyświetlone czcionką standardową.
- Fonty mają różne proporcje i mimo, że ustawimy rozmiar czcionki za pomocą właściwości CSS 'font-size' na tą samą wartość, przeważnie uzyskamy różne szerokości tekstu przy różnych fontach.
 

 
Jedną z ciekawszych właściwości, która pojawiła się wraz z CSS3, jest 'box-shadow'. Odpowiedzialna jest za efekt rzucanego cienia przez element, do którego została przypisana. Jej wartości są następujące: opcjonalne słowo 'inset' określające, czy cień jest na zewnątrz, czy wewnątrz elementu; przesunięcie w poziomie; przesunięcie w pionie; opcjonalna wartość promienia rozmycia cienia; opcjonalna wartość promienia rozprzestrzeniania się cienia; opcjonalna wartość koloru. Dla chętnych zobaczenia ciekawych przykładów zastosowania 'box-shadow' polecam strony pod adresem: 'http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/'; oraz 'http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html';.

W tym wpisie korzystam z informacji, zawartych we wcześniejszym poście o adresie: 'http://csslab.pinger.pl/m/13664829/modyfikacja-wygladu-bloku-wpisu-pozbawionego-strzalki';. Podaje on przepis na modyfikację bloku wpisu polegającą na likwidacji dodatkowych obiektów ozdobnych i zwiększeniu jego szerokości. Poniżej z kolei przedstawiam kilka przykładów, gdzie nieco zmieniam oryginalny kod CSS i poszerzam go o zastosowanie wcześniej wymienionej właściwości 'box-shadow'.

1.

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
}

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
box-shadow: 2px 2px 4px lightgray; /* cień */
}

/* wpisy własne */

.message-wrap .native
{
width: 436px;
margin: 4px 0 0 13px; /* zmienione marginesy */
padding: 0; /* zmienione wartości 'padding' */
}

/* wpisy innych */

.message-wrap .foreign
{
width: 346px;
margin: 4px 0 0 5px; /* zmienione marginesy */
padding: 0; /* zmienione wartości 'padding' */
}


2.

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
box-shadow: inset 2px 2px 5px #d3d3d3; /* cień */
border-radius: 7px; /* zaokrąglone narożniki */
}

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
}

.message-wrap .native
{
width: 436px;
margin: 4px 0 0 13px;
padding: 0;
}

.message-wrap .foreign
{
width: 346px;
margin: 4px 0 0 5px;
padding: 0;
}


3.

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
background-color: transparent; /* przezroczysty kolor wpisu */
}

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
border-radius: 7px; /* zaokrąglone narożniki */
border: 1px solid rgba(0,0,250,0.2); /* ramka wokół wpisu */
box-shadow: 0 0 6px 1px rgb(182,221,220); /* efekt 'glow' */
}

.message-wrap .native
{
width: 436px;
margin: 4px 0 0 13px;
padding: 0;
}

.message-wrap .foreign
{
width: 346px;
margin: 4px 0 0 5px;
padding: 0;
}
 

 
Jak można zauważyć, bloki wpisów zawierają zaokrąglone narożniki, więc nie ma w zasadzie potrzeby modyfikacji tych bloków. Problem pojawia się wtedy, kiedy zechcemy np. zwiększyć lub zmniejszyć wielkość zaokrągleń wymienionych narożników, gdyż stworzone są one przy pomocy stałych obrazków. Nowsze przeglądarki internetowe są w stanie tworzyć zaokrąglone narożniki przy pomocy właściwości CSS 'border-radius', ale nie Internet Explorer 8 i starsze, dlatego też jedną z technik dla zaokrąglonych narożników jest zastosowanie obrazków. Jeżeli nie przeszkadza komuś to, że na dzień dzisiejszy około 12% użytkowników nie będzie widziało na jego stronie zaokrągleń, może zastosować właściwość 'border-radius', która daje większe możliwości przy edycji m.in. bloku wpisu.
Kody CSS zawarte w tym wpisie opierają się na innych kodach zawartych we wpisach: 'http://csslab.pinger.pl/m/13653176/wlasna-strzalka-wpisu-modyfikacja-wygladu-bloku-wpisu'; oraz 'http://csslab.pinger.pl/m/13664829/modyfikacja-wygladu-bloku-wpisu-pozbawionego-strzalki';.

1. Zaokrąglone narożniki dla wpisu pozbawionego strzałki:

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
border-radius: 7px; /* zaokrąglone narożniki */
}

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
}

.message-wrap .native
{
width: 436px;
padding-left: 7px;
}

.message-wrap .foreign
{
width: 346px;
padding-left: 5px;
}

Widok w przeglądarce:


Dodając do reguły z selektorem '.message-wrap div.entry' w powyższym kodzie linijkę z właściwością 'border' uzyskamy ramkę wokół bloku wpisu:

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
border-radius: 7px;
border: 1px solid #ddd; /* ramka */
}

Widok w przeglądarce:


2. Zaokrąglone narożniki dla wpisów parzystych i nieparzystych pozbawionych strzałki:

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
}

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
}

.message-wrap .native
{
width: 436px;
padding-left: 7px;
}

.message-wrap .foreign
{
width: 346px;
padding-left: 5px;
}

/* zaokrąglone narożniki */

.message-odd div.entry
{
border-radius: 2px 14px; /* wpisy nieparzyste */
}

.message-even div.entry
{
border-radius: 14px 2px; /* wpisy parzyste */
}

Efekt w przeglądarce:


3. Zaokrąglone narożniki dla wpisu z własną strzałką:

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
border-radius: 7px; /* zaokrąglone narożniki */
}

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
position: relative;
}

.message-odd .native:before,
.message-odd .foreign:before
{
display: block;
position: absolute;
top: 13px;
left: -2px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 5px;
border-bottom-width: 7px;
border-right-width: 13px;
content: "";
border-color: transparent;
border-color: rgba(231, 251, 251, 0);
border-right-color: rgb(231, 251, 251);
}

.message-even .native:before,
.message-even .foreign:before
{
display: block;
position: absolute;
top: 13px;
left: -2px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 5px;
border-bottom-width: 7px;
border-right-width: 13px;
content: "";
border-color: transparent;
border-color: rgba(248, 249, 234, 0);
border-right-color: rgb(248, 249, 234);
}

Efekt w przeglądarce:


4. Zaokrąglone narożniki dla wpisów parzystych i nieparzystych z własną strzałką:

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
}

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
position: relative;
}

.message-odd .native:before,
.message-odd .foreign:before
{
display: block;
position: absolute;
top: 13px;
left: -2px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 5px;
border-bottom-width: 7px;
border-right-width: 13px;
content: "";
border-color: transparent;
border-color: rgba(231, 251, 251, 0);
border-right-color: rgb(231, 251, 251);
}

.message-even .native:before,
.message-even .foreign:before
{
display: block;
position: absolute;
top: 13px;
left: -2px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 5px;
border-bottom-width: 7px;
border-right-width: 13px;
content: "";
border-color: transparent;
border-color: rgba(248, 249, 234, 0);
border-right-color: rgb(248, 249, 234);
}

/* zaokrąglone narożniki */

.message-odd div.entry
{
border-radius: 10px 2px; /* wpisy nieparzyste */
}

.message-even div.entry
{
border-radius: 2px 10px; /* wpisy parzyste */
}

Widok w przeglądarce:
 

 
Zanim zajmiemy się umieszczeniem ramki wokół bloku wpisu, muszę umieścić adres wpisu, w którym opisuję, jak przygotować element bloku do dalszych modyfikacji – oto ten adres: 'http://csslab.pinger.pl/m/13664829/modyfikacja-wygladu-bloku-wpisu-pozbawionego-strzalki';.

Wykorzystajmy zatem kod CSS znajdujący się w wymienionym wpisie i dodajmy do niego linie kodu odpowiedzialne za wyświetlenie ramki. Na początku stwórzmy ramkę, która jest taka sama dla wszystkich bloków wpisów:

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
/* parametry dla ramki: szerokość, styl, kolor */
border: 1px solid green; /* nowy wiersz dla ramki */
}

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
}

.message-wrap .native
{
width: 436px;
padding-left: 7px;
}

.message-wrap .foreign
{
width: 346px;
padding-left: 5px;
}

Efekt:


A teraz stwórzmy ramkę, która ma tą samą szerokość i styl, ale inny kolor dla parzystych i nieparzystych bloków. W komentarzach opisałem to, co zostało dodane:

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
border-width: 1px; /* szerokość ramki */
border-style: dashed; /* styl ramki */
}

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
}

.message-wrap .native
{
width: 436px;
padding-left: 7px;
}

.message-wrap .foreign
{
width: 346px;
padding-left: 5px;
}

/* dwie nowe reguły ustalające kolory ramek */

.message-odd div.entry
{
border-color: blue; /* kolor ramek wpisów nieparzystych */
}

.message-even div.entry
{
border-color: orange; /* kolor ramek wpisów parzystych */
}

Efekt:


Wszystkie wartości stylów, które można nadać ramkom: dashed, dotted, double, groove, hidden, inset, none, outset, ridge, solid (przy wartościach 'hidden' i 'none' ramka nie jest widoczna).
 

 
Podstawą tego wpisu są treści zawarte w dwóch innych wpisach. Pierwszy z nich opisuje sposób tworzenia własnej strzałki znajdującej się po lewej stronie bloku wpisu: 'http://csslab.pinger.pl/m/13653176/wlasna-strzalka-wpisu-modyfikacja-wygladu-bloku-wpisu';. Drugi przedstawia metody na zmianę koloru bloku wpisów: 'http://csslab.pinger.pl/m/13694966/zmiana-koloru-tla-bloku-wpisu';.

Zdecydowaliśmy się więc na inny kolor bloku wpisów, które posiadają strzałkę. Chcemy, aby ten kolor był jednakowy dla wszystkich wpisów. Zaglądając do treści drugiego materiału wymienionego wyżej dowiemy się, że aby zmienić kolor tła dla wszystkich bloków wpisów, tworzymy regułę z selektorem '.message-wrap div.entry'. Tak się składa, że kod CSS z materiału pierwszego, którego funkcja to usunięcie oryginalnych elementów dekoracyjnych bloku wpisu, zawiera już regułę z takim selektorem, choć stworzoną do innych celów. Możemy to wykorzystać i zamiast tworzyć dwie reguły z tym samym selektorem, dopiszemy właściwość 'background-color' do pierwszej reguły. Poza tym nie musimy tworzyć dwóch reguł z pseudo-elementem ':before' dla dwóch kolorów strzałki – wystarczy jedna reguła z nieco innymi selektorami.
Kod CSS:

/* ukrycie oryginalnych elementów */

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

/* ustalenie nowych wartości marginesów bloku wpisu*/

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
background-color:#FFDFF7; /* dodatkowy wiersz z nowym kolorem tła wpisu */
}

/* usunięcie oryginalnego obrazka strzałki wpisu oraz wartość 'relative' dla rodzica strzałki */

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
position: relative;
}

/* pseudo-element strzałki */

.message-wrap .native:before,
.message-wrap .foreign:before
{
display: block;
position: absolute;
top: 13px;
left: -2px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 5px;
border-bottom-width: 7px;
border-right-width: 13px;
content: "";
border-color: transparent;
border-color: rgba(255, 223, 247, 0); /* dla Firefoksa – kolor strzałki plus '0' dla alpha */
border-right-color: #FFDFF7; /* nowy kolor strzałki */
}

Widok z przeglądarki:


Z powyższego kodu wynika, że tło bloku wpisów jest głównie ustalone w dwóch miejscach przez wartość szesnastkową 'FFDFF7'. Trzecie miejsce z komentarzem 'dla Firefoksa...' to w zasadzie kosmetyczna poprawa wyglądu na potrzeby przeglądarki Firefox. Bez tego wiersza kodu nasza strzałka w tym programie będzie zawierać dwie ciemniejsze krawędzie:


Jeżeli nasz kolor jest w postaci szesnastkowej, przy ustaleniu wartości w wierszu 'dla Firefoksa...' może pomóc np. narzędzie online pod adresem 'http://www.colorpicker.com/';, gdzie do górnego pola tekstowego wprowadzamy wartość szesnastkową, a kolejno z pól 'R', 'G' i 'B' kopiujemy wartości wynikowe do funkcji 'rgba(r, g, b, 0)' w miejsca oznaczone dla ułatwienia małymi literami. Jeśli ktoś nie chce się męczyć w zamianę formatu koloru, może ustalić tą wartość na 'rgba(255, 255, 255, 0)' – pod warunkiem, że tło pod spodem strzałki pozostaje białe.

Narzędzie 'colorpicker':


Przypadek, kiedy używamy dwóch kolorów tła wpisu, musi wyglądać inaczej. Kod CSS jest połączeniem kodu z wpisu o tworzeniu własnej strzałki i kodem z wpisu o zmianie koloru tła bloku wpisu bez strzałki, a wygląda mniej więcej tak:

/* ukrycie oryginalnych elementów */

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

/* ustalenie nowych wartości marginesów bloku wpisu*/

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
}

/* usunięcie oryginalnego obrazka strzałki wpisu oraz wartość 'relative' dla rodzica strzałki */

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
position: relative;
}

/* pseudo-element strzałki wpisu nieparzystego*/

.message-odd .native:before,
.message-odd .foreign:before
{
display: block;
position: absolute;
top: 13px;
left: -2px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 5px;
border-bottom-width: 7px;
border-right-width: 13px;
content: "";
border-color: transparent;
border-color: rgba(231, 251, 251, 0);
border-right-color: #FFDFF7; /* nowy kolor strzałki wpisu nieparzystego */
}

/* pseudo-element strzałki wpisu parzystego*/

.message-even .native:before,
.message-even .foreign:before
{
display: block;
position: absolute;
top: 13px;
left: -2px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 5px;
border-bottom-width: 7px;
border-right-width: 13px;
content: "";
border-color: transparent;
border-color: rgba(228, 255, 224, 0);
border-right-color: #E4FFE0; /* nowy kolor strzałki wpisu parzystego */
}

/* nowy kolor tła wpisu nieparzystego */

.message-odd div.entry
{
background-color:#FFDFF7;
}

/* nowy kolor tła wpisu parzystego */

.message-even div.entry
{
background-color:#E4FFE0;
}

Efekt działania kodu w Firefoksie:
 

 
Kolor tła wpisu może być ustalony jako taki sam dla wszystkich wpisów lub inny dla parzystych i nieparzystych wpisów wyświetlanych na stronie. Jeśli chcemy zmienić kolor tła wszystkich wpisów za jednym razem, możemy skorzystać z jednej reguły, gdzie selektor to '.message-wrap div.entry'.
Przykład:

.message-wrap div.entry
{
background-color:#FFDFF7;
}

Efekt zastosowania kodu widziany w przeglądarce:


Natomiast gdy zależy nam, aby występowały dwa oddzielne kolory wpisów, stosujemy dwie reguły, których selektory to '.message-odd div.entry' dla nieparzystych i '.message-even div.entry' dla parzystych.
Przykład:

.message-odd div.entry
{
background-color:#FFDFF7;
}

.message-even div.entry
{
background-color:#E4FFE0;
}

Efekt w przeglądarce:


Jak można zauważyć, nie wszystkie części tła bloku wpisu zmieniają kolor. Strzałka, górna i dolna krawędź wpisu z zaokrąglonymi narożnikami pozostają nietknięte. Jeżeli nam to nie przeszkadza, to jest to cały kod CSS, który będzie nam potrzeby. Jeśli jednak chcemy coś z tym zrobić, to albo wprowadzimy własne obrazki z powyższymi elementami, albo usuniemy je całkowicie i zastosujemy metody zastępcze jak np. właściwość 'border-radius' dla zaokrąglonych narożników oraz pseudo-element ':before' dla strzałki. We wpisach o adresach: 'http://csslab.pinger.pl/m/13632163/modyfikacja-wygladu-bloku-wpisu';, 'http://csslab.pinger.pl/m/13653176/wlasna-strzalka-wpisu-modyfikacja-wygladu-bloku-wpisu'; oraz 'http://csslab.pinger.pl/m/13664829/modyfikacja-wygladu-bloku-wpisu-pozbawionego-strzalki'; opisałem mój sposób na pierwsze kroki przy modyfikacji bloku wpisu w tym metodę pozbycia się oryginalnych dodatkowych elementów tego bloku.
Przypuśćmy, że decydujemy się na lekko rozszerzone wpisy bez strzałek z dwoma kolorami, osobnymi dla parzystych i nieparzystych bloków. W tym przypadku korzystamy z kodu zamieszczonego w trzecim wpisie wymienionym powyżej oraz dodajemy drugi kod CSS z obecnego wpisu:

/* kod z zewnętrznego wpisu */

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
}

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
}

.message-wrap .native
{
width: 436px;
padding-left: 7px;
}

.message-wrap .foreign
{
width: 346px;
padding-left: 5px;
}

/* kod z obecnego wpisu */

.message-odd div.entry
{
background-color:#FFDFF7;
}

.message-even div.entry
{
background-color:#E4FFE0;
}

Widok w przeglądarce:


Pod adresem 'http://csslab.pinger.pl/m/13699247/zmiana-koloru-tla-bloku-wpisu-ze-strzalka'; znajduje się wpis zajmujący się kwestią zmiany koloru tła bloku wpisu zawierającego strzałkę.