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>