Wraz z tym jak co raz więcej przeglądarek zaczyna obsługiwać nowe kolejne wersje CSS możliwe jest stosowanie coraz to nowych technik, w celu osiągnięcia efektów, które do tej pory wymagały przemyślnych tricków HTML/CSS/JS albo stosowania grafiki.

Jednym z takich elementów są "odznaki", zwykle dodawane do produktu czy usługi w celu zakomunikowania klientowi, że są one godne jego uwagi - przykładowa odznaka wygląda tak:

Zwykle w celu zastosowania takiego rozwiązania przygotowuje się obrazek graficzny z gwiazdką, czy też innym kształtem i umieszcza go na stronie jako obrazek czy też tło znacznika HTML. Jeżeli mamy kilka rozmiarów lub kolorów - trudno, robimy albo kilka obrazków, albo - dla trochę bardziej zaawansowanych - używamy odwrotnego obrazku jako maski kadrującej tło.

Na szczęście z nadejściem wsparcia dla nowszego CSS możliwe stało się wstawienie takiego (oraz podobnych) elementów bez użycia grafiki. Na początek pokażę co chcemy osiągnąć:

CSS3!

Wygląda tak samo (prawie) jak wyżej? Super - Twoja przeglądarka wspiera "zaawansowane" właściwości CSS. Nie wygląda tak samo? Przestań używać IE. Niestety, nawet IE9 preview nie wspiera w tym momencie zastosowanych tu technik, więc musisz sam siebie zapytać, czy IE nie stanowi większości Twoich odbiorców. Nie? Świetnie - przystąpimy do sekcji elementu. Na pierwszy ogień HTML:

<span class="badge"><span><span>CSS3!</span></span></span>

Jak widać, nie ma obrazków - są za to 3 zagnieżdżone elementy - w tym wypadku span, ale jeżeli np. chcesz, by element był klikalny i dobry dla SEO nic nie stoi na przeszkodzie by zamienić kombinację na np.:

<a class="badge"><span><strong>OKAZJA!</strong></span></a>

Ok, HTML wydaje się prosty - zostaje nam zatem CSS:

.badge,
.badge span {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: red;
    color: white;
    line-height: 40px;
    text-align: center;
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    rotation: 30deg;
}

.badge {
    -moz-transform: rotate(300deg);
    -webkit-transform: rotate(300deg);
    -o-transform: rotate(300deg);
    rotation: 300deg;  
}

Ok, bez paniki - tak na prawdę jest to prostsze niż wygląda. Większość właściwości znamy już z poprzednich wersji CSS. display: inline-block oczywiście nakazuje traktowanie obiektu jako element blokowy, jednak pozostaje on w linii z tekstem, width i height określają szerokość i wysokość naszej odznaki. Dochodzi za to jedna nowa własność - rotation (zapisy -*-transform: rotate przeznaczone są dla konkretnych przeglądarek, samo rotation jest proponowane w standardzie CSS i niejako zapewnia nam kompatybilność, kiedy już właściwość ta będzie w pełni obsługiwana).

Co mówi nam ta właściwość? Prosto się domyśleć - nakazuje, by przeglądarka po wyrenderowaniu elementu obróciła go o podaną wartość wyrażoną w stopniach wg. jego środka. Jak widać przy 3 elementach suma obrotów sprowadza się do 360°, tak, by napis był w odpowiedniej postaci. De-facto nasza gwiazdka składa się z 3 nałożonych na siebie elementów:

    CSS3!

Oczywiście odpowiednio modyfikujące (dodając kolejne span) kod HTML oraz CSS (zmniejszając kąt oraz dobierając width/height) możemy zwiększyć ilość ramion naszej gwiazdy. A Ci, którzy wolą kwiatki, mogą zastosować jeszcze border-radius:

CSS3!

Oczywiście zdaję sobie sprawę, że póki IE nie zacznie obsługiwać poprawnie CSS nie ma co marzyć o stosowaniu takich technik w komercyjnych rozwiązaniach, ale samorozwój jest zawsze pożądany ;)

Aktualizacja

Wasacz, w komentarzu wypomina mi, że efekt ten można stworzyć także w CSS z wykorzystaniem selektora :after: oraz :before - i rzeczywiście jest taka możliwość:

CSS3!

By osiągnąć taki efekt musimy użyć nieco bardziej zawiłego CSS:

.badgeSt:after,
.badgeSt:before,
.badgeSt {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: red;
    color: white;
    line-height: 40px;
    text-align: center; 
    position: relative;
}

.badgeSt:after 
.badgeSt:before {
    z-index: -1;
    content: "";   
    position: absolute;
    top: 0;
    left: 0;           
}

.badgeSt:after {
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    rotation: 30deg;  
}

.badgeSt:before {
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    rotation: -30deg;
}

Pojawiają się dwa nowe zagadnienia - wspomniane :after, :before oraz właściwość content. Selektory pozwalają nam na stworzenie i ostylowanie elementu HTML który zostanie umieszczony (odpowiednio) za oraz przed zawartością wskazanego elementu - tak jakby został on na sztywno wpisany do znacznika. Nowo utworzony element nie jest jednak żadnym znacznikiem (nie jest to ani span, ani stron etc.) więc by został wyświetlony musimy wstawić do niego jakąś zawartość - chociażby pusty łańcuch znaków - tu właśnie wkracza kolejna nowość czyli content. Parametr ten pozwala nam na określenie zawartości znacznika za pomocą CSS (więcej w specyfikacji). Dla poprawy wyświetlania musimy jeszcze zastosować z-index tak, by nasz tekst był na wierzchu.

Każdy, kto interesuje się kulturą pracy w Google wie, że pracownicy mogą poświęcić 20% swojego dnia pracy na rzeczy nie związane z ich głównym zajęciem takie jak tworzenie nowych produktów lub praca w innych zespołach. Oczywiście wszelkie stworzone w ten sposób projekty stają się automatycznie własnością Google, ale to już inna sprawa.

Jednym z efektów pracy w 20% jest Google Browser Size. Stwierdzić, że jest to prosta aplikacja jest lekkim nadużyciem - jest to diabelnie prosta aplikacja.

Zadaniem Browser Size jest pokazanie jaką część strony widzą użytkownicy różnych rozdzielczości ekranów bez konieczności przesuwania strony. Dodatkowo widzimy procentową ilość osób, które zobaczą elementy mieszczące się w oknie przeglądarki (uwaga, nie jest to wartość informująca, ile osób używa danej rozdzielczości - informuje ile osób przegląda stronę z oknem przeglądarki - a dokładniej oknem dokumentu - w tym lub wyższym rozmiarze ^[1]).

Osobiście uważam, że narzędzie to nie będzie się cieszyć dużym powodzeniem - po pierwsze nie bierze pod uwagę tego, że większość stron jest centrowana, przez co efekt pomiaru jest zniekształcony (poprawia się to, jeżeli przeskalujemy okno przeglądarki), a po drugie decyzja o tym, gdzie umiejscowić dany element powinna być podejmowana już na etapie tworzenia grafiki serwisu przez webdesignerów, a nie w momencie kodowania strony.

^[1] edycja, zgodnie ze stroną O Projekcie jest to wielkość okna, a nie rozdzielczość

Ostatnio wraz z żoną bawimy się w tłumaczenie programów z różnych języków na trochę bardziej przystępny. O ile w moim wypadku ogranicza się to do przerabiania obrazków i czcionek bitmapowych, o tyle żona dorwała program, który grafikę trzyma we własnym formacie. Na szczęście udało się go przekodować do TGA.

Niestety, nie wszystko było takie proste - okazuje się, że po zapisaniu zmian w pliku i odpaleniu programu dookoła zmian wyświetlają się kolorowe tła. Niby tak właśnie Photoshop Elements ów plik otwierał i naiwnie założyłem, że sam program ma gdzieś zakodowany kolor przeźroczystości dla danej bitmapy.

Pierwsza podpowiedź co się dzieje przyszła, gdy oryginalny plik TGA otworzyłem w Irfan View. Poniżej przykład pliku w Irfan i Photoshop:

Podpytanie grafików w pracy nic nie dało. Na szczęście Google nie zawiódł! TGA w odróżnieniu od PNG czy GIF nie używa konkretnego koloru czy wartości Alpha z RGBA do uzyskania przeźroczystości lecz stosuje maskę Alpha. W Photoshop CS przehodzimy na zakładkę "Kanały" (Channels) i wybieramy warstwę Alpha - teraz pracujemy jak na normalnej masce.

Wszystko fajne - ale jako że nie używamy z żoną Photoshop CS tylko Elements pojawił się problem - w Elementsie nie można edytować Kanałów, a już na pewno nie kanału Alpha. Na szczęście Google nie zawodzi - by uzyskać podobny efekt w Photoshop Elements należy:

1. Otworzyć interesujący nas plik TGA
2. Wybrać Select > Load Selection
3. Z listy wybrać "Alpha 1" i tryb Replace

W ten sposób pojawi nam się nowe zaznaczenie będące odpowiednikiem kanału Alpha - wszystko to, co jest NIE zaznaczone będzie traktowane jako przeźroczysta część obrazka. Zostaje nam tylko zmodyfikować maskę i analogicznie:

1. Wybrać Select > Save Selection
2. Z listy wybrać "Alpha 1"

W ten prosty sposób żona jest podwójnie szczęśliwa - może edytować sobie pliki i wszystko działa oraz zaoszczędziła minimum 2.000 PLN potrzebnych na zakup Photoshopa CS :-)