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>
