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>