Pamatnes krāsu pārejas un ēnojums
Tekstā esoša poga
Atpakaļ uz stilu aprakstu lapu

Pamatnes krāsu pārejas un ēnojums

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:
background-image: url(/atteli/pamati/Atteli/G_pz_Efejas.jpg);

Šūnai:
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,1)), to(rgba(0,0,0,0)));

Tekstā esoša poga

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).

Par stilu izmantošanu lasiet šeit.

Tekstā esoša poga (2. piemērs)

Š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ā.

Par stilu izmantošanu lasiet šeit.


Atpakaļ uz stilu aprakstu lapu
Saturs IepriekŔējā lappuse Lappas saturs NākoŔā lappuse


priede.bf.lu.lv Bioloģijas fakultāte Datorklase Sākumlapa
Pamatlapa BF Datorklase Sākums
Lappusi
«stili.10.shtml»
veidoja
karlo@lanet.lv
2014.08.20-14:27
Lapa ir publicēta ar    CC    BYā€“SA    3.0 licenci. Ja lapā ir ietvertas daļas uz kurām attiecas cita licence, tas norādÄ«ts atseviŔķi lapas tekstā.