CSS 2 piedāvātās iespējas ne vienmēr apmierina lapu veidotājus. Daļēji lapās jau iespējams izmantot CSS 3 iespējas, piemēram, teksta ēnojumu (text-shadow). Šajā lapā teksta ēnojums ir piešķirts pirmās un otrās pakāpes virsrakstiem. Ja parametram norāda x un y nobīdi (var būt arī negatīvas vērtības) un krāsu, tad teksta ēnojums ir ass. Tādam jābūt pirmās pakāpes virsraksta ēnojumam. Ja pirms krāsas kā trešo parametru norāda ēnas pārejas lielumu, tad ēna iznāk izplūdusi. Tādam jābūt otrās pakāpes virsraksta ēnojumam.
Kamēr tiek gaidīts CSS 3 gala variants, tīmekļa pārlūku programmētāji centās papildināt CSS iespējas. Šādi, ar pārlūkiem saistīti, stili parasti ir atpazīstami pēc to nosaukumiem tie sākas ar mīnusa zīmi aiz kuras seko pārlūka nosaukums, piemēram, -moz- (uz Mozilla bāzēti pārlūki), -o- (Opera), -webkit- (uz Webkit bāzēti pārlūki (Safari, Midori)). Pamazam šie jaunievedumi tiek iekļauti CSS 3 . Tālāk sekojošā tabulā doti šādu papildinājumu piemēri.
Šajā lapā izmantotos stilu aprakstus var apskatīt šeit.
Krāsu pārejas |
Ēnas |
||
|
Rindkopa ar pāreju pamatnē (CSS 3).
background-image: linear-gradient(to bottom right, yellow 0%, lightblue 100%); |
Rindkopa ar pāreju pamatnē (CSS 3).
background-image: radial-gradient( yellow 0%, lightblue 100%); |
Rindkopa ar daudzām ēnām (CSS 3).
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600; |
Rindkopa ar iekšēju ēnojumu un apaļām malām (CSS 3).
box-shadow: #c4c4c4 -2px -2px 3px 3px inset; border-radius: 9px; |
|
Rindkopa ar pāreju pamatnē (-moz-).
-moz-linear-gradient (top left, yellow, lightblue); |
Rindkopa ar pāreju pamatnē (-moz-).
-moz-radial-gradient (yellow, lightblue); |
Rindkopa ar daudzām ēnām (-moz-).
-moz-box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600; |
Rindkopa ar iekšēju ēnojumu un apaļām malām (-moz-).
-moz-box-shadow: #c4c4c4 -2px -2px 3px 3px inset; border-radius: 9px; |
|
Rindkopa ar pāreju pamatnē (-webkit-).
background: -webkit-gradient (linear, left top, right bottom, from(yellow), to(lightblue)); |
Rindkopa ar pāreju pamatnē (-webkit-).
background: -webkit-gradient (radial, 50% 50%, 20, 50% 50%, 60, from(yellow), to(lightblue)); |
Rindkopa ar daudzām ēnām (-webkit-).
-moz-box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600; |
Rindkopa ar iekšēju ēnojumu un apaļām malām (-webkit-).
-webkit-box-shadow: #c4c4c4 -2px -2px 3px 3px inset; -webkit-border-radius: 9px; |
|
Rindkopa ar pāreju pamatnē (-o-).
background: -o-linear-gradient(top left, yellow, lightblue); |
|||
Daļēji caurspīdīgas krāsu parējas piemērsŠīs tabulas rindas pamatnei ir ievietots efeju lapu zīmējums. Rindā atrodas tikai viena šūna, kuras pamatnei izmantota vienmērīga krāsu pāreja no baltas (rgba(255, 255, 255)) uz melnu (rgb(0, 0, 0)) krāsu. Papildus krāsai ir norādīts arī caurspīdīgums kā rgba ceturtā vērtība (alfa kanāls). Vērtība 1 nosaka, ka krāsa ir necaurspīdīga, bet 0 ka pilnīga caurspīdīga (rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0)). Pamatnes izveidotas izmantojot stilus. Rindai:
Šūnai:
|
|||
Ja vēlas, izmantojot stilu, visas norādes var izveidot kā pogas. Piemēram, šī rindkopa ietilpsta sadaļā, kurai piešķirta klase ar_pogu. Stilu aprakstā visas norādes (.ar_pogu a) pārvērstas par pogām izmantojot border-radius, border, box-shadow, background un background-image. Stilu aprakstu var apskatīt šeit. Labākam izskatam arī pats norādes teksts ir uzbiezināts un tam ir piešķirta ēna. Šajā klasē tika izmantoti tikai CSS standartiem atbilstoši stili. Iespējams, ka vecākos pārlūkoks pogas nebūs redzamas visā savā krāšņumā. Protams, stilu aprakstā iepējams vienlaicīgi iekļaut dažādiem pārlūkiem pielāgotus aprakstus, tādejādi panākot lielāku savietojamību (uz doto brīdi). Ir novērots, ka, ar laiku, pārlūku programmētāji pārtrauc uzturēt sevis ieviestos aprakstus un izmanto CSS standartam atbilstošos. Katram lapas veidotājam pašam ir jāizvērtē, vai ievērot standartus (un ietaupīt savu laiku), vai arī censties pielāgoties pēc iespējas lielākam tīmekļa pārlūku skaitam (un patērēt daudz vairāk laika).
Šai teksta sadaļai, savukārt, piešķirta klase ar_pogu_2. Stilu aprakstā visas norādes (.ar_pogu_2 a) pārvērstas par pogām izmantojot border-radius, border, box-shadow un background. Stilu aprakstu var apskatīt šeit. Labākam izskatam arī pats norādes teksts ir uzbiezināts un tam ir piešķirta ēna. Šajā klasē tika izmantoti tikai CSS standartiem atbilstoši stili. Iespējams, ka vecākos pārlūkoks pogas nebūs redzamas visā savā krāšņumā.
