Wstążka 3D za pomocą CSS 2.1 i CSS3
CSS3 niesie ze sobą wiele możliwości, także w kwestii zastępowania starych obrazkowych rozwiązań tymi, które już grafik a jedynie kolory potrzebują. Tak jest i w tym przypadku, zapewne wiele razy z zazdrością patrzyłeś na szablony a w nich tytuły modułów lub nagłówki, które posiadały efektowną wstążkę. Na ogół, aby dopasować ów elementy wymagany był program graficzny, od dziś – wystarczy ci zwykły edytor CSS i znajomość kilkunastu linijek kodu. Zresztą spójrz na obrazek z prawej strony.
Ów wstążka (DEMO) działa zarówno pod nowymi FF, IE8, Chrome, Operą, jak i Safari. Autor swoją modyfikacje (pobierz kod) przykładu zaczerpniętego ze strony http://css3.wikidot.com, oparł się jednak na CSS 2.1, jest więc szansa, że zadziała na starszych wersjach przeglądarek. Źródło: www.prothemer.com. Mając taki kod bardzo szybko wzbogacisz swój szablon o ładny dodatek. Moim zdaniem otwiera się coraz więcej możliwości przed web designerami, aby ograniczyć ilość elementów graficznych do niezbędnego minimum, a przez to zyskać szybszym wyświetlaniem się strony www, bez utraty efektu „Woow”.
Sama zawartość kodu html pozostaje tradycyjna, jak w przykładzie, sekret tkwi bowiem w pliku stylu css:
<div class="infobox">
<h3>Pure CSS Infobox</h3>
<p>This is the content of the infobox. It is made with pure CSS
- no images. Of course, you can change the colour of the background
and header to match your site's theme.
<strong>Pretty cool, huh?</strong></p>
</div>
-
rotsap
