Jeszcze do niedawna rozpoczęcie prac nad wykonaniem strony internetowej polegało wpierw na wykonaniu projektu graficznego. Następnie projekt ten był cięty na kawałki i w formie tabelki wyświetlany na stronie. Niektóre z obszarów tej tabelki posiadały zmienny tekst zależny od podstrony lub reagowały na najechanie myszką.
Mniej więcej w ten sposób funkcjonowała strona.
Zmiana koloru tła, lub wyglądu przycisku wymuszała ponowne zmiany w pliku graficznym i podmianę grafik strony.
Gorzej jeśli zmianie podlegał układ strony - w tym przypadku ponowna praca z cięciem layoutu!
Tego typu strony musiały dużo kosztować!
Aktualnie w erze styli css3, gdzie do dyspozycji mamy gradienty, cienie, zaokrąglone narożniki, animacje oraz inne "cuda",
można zmniejszyć ilość godzin potrzebnych do wykonania projektu, a zatem i cenę projektu.
Oczywiście nie stosuje się już tabelek aby osadzić grafiki w odpowiednim miejscu, przez co wszelkie zmiany układu są o wiele prostsze.
Kod CSS3:
.nalepka { padding: 20px; margin: 10px; background: #36C; color: #FFF; font-size: 18px; border: 2px dashed #FFF; border-radius: 10px; box-shadow: 0 0 0 4px #36C, 2px 1px 6px 2px #000; }
Kod HTML:
‹p class="nalepka"›
Ciekawy efekt ostylowania :)
‹/p›
Wynik końcowy:
Ciekawy efekt ostylowania :)