CSS3: Strzałka z zaokrąglonymi rogami

Opublikowany: 28.01.2011 23:21:13 | Komentarzy 2

Autorem tej sztuczki jest Łukasz Popardowski. Stworzył za pomocą HTML i CSS strzałkę z zaokrąglonymi rogami. Na poniższym obrazku można zobaczyć efekt końcowy. Robi wrażenie :).

Cała sztuczka polega na wykorzystaniu :before i :after, które odpowiednio wstawiają pseudoelementy przez i po danym elementem. Tutaj należy dodać kilka informacji:

• Elementy, które są wstawiane do dokumentu nie są widziane w drzewie dokumentu.
• Każdy element wstawiony w ten sposób jest wstawiany inline.

Po tych drobnych uwagach przejdziemy do zapoznania się ze szczegółami owej sztuczki.

Tworzymy element:

#next {
   color: #333;
   font: normal bold 80px "Lucida Grande",Helvetica,Arial,sans-serif;
   padding: 0.5em 1.5em 0.5em 0;
   position: relative;
   text-decoration: none;
}

Nic specjalnego: kolor, font, pozycja. Kolejne deklaracje to już swego rodzaju "magia", gdyż teraz do elementu #next musimy "dodać" dwa elementy, które po odpowiednim ostylowaniu stworzą nam strzałkę. Tworzymy wspólne cechy ramion strzałek:

#next:before, #next:after {
   background: #333;
   -moz-border-radius: 0.2em;
   -webkit-border-radius: 0.2em;
   border-radius: 0.2em;
   content: "";
   display: block;
   height: 0.5em;
   position: absolute;
   right: 0;
   width: 1em;
}

Pozycjonujemy każdy "dodatkowy", pusty (content: "") element absolutnie względem #next, nadajemy tło, wymiary oraz ustawiamy mu zaokrąglenie.

Ostatni etap to obrócenie (uwzględniając nowe przeglądarki) elementów (transform, rotate) i wypozycjonowanie ich.

#next:before {
   top:0.66em;
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg)
}
�
#next:after {
   bottom:0.66em;
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg)
}

Wiele osób się zapyta zaraz, ale po co to robić w CSS, skoro można trzasnąć grafikę. No można, będzie szybciej, łatwiej. Ale spójrzcie na to z innej strony. Teraz większość efektów, będzie można zrobić konieczności uruchamiania programów graficznych. Nie trzeba będzie wycinać chorych gradientów tworzonych przez grafików. Już niedługo będzie można je definiować z poziomu CSS.

Tym efektem można pobawić się na jsFiddle.

Tagi: css :after css :before css content css3 rotate css3 transform css3 tutorial