Êàñêàäíûå òàáëèöû ñòèëåé
CSS ñîâåòû & ïðèåìû

(Ýòà ñòðàíè÷êà èñïîëüçóåò êàñêàäíûå òàáëèöû ñòèëåé CSS)

Äàííûé äîêóìåíò ÿâëÿåòñÿ ïåðåâîäîì ñòàòüè "Web Style Sheets CSS tips & tricks".
Îðèãèíàëüíàÿ âåðñèÿ äîêóìåíòà ñóùåñòâóåò òîëüêî íà ñàéòå W3C http://www.w3.org/Style/Examples/007/roundshadow.html
Äàííûé ïåðåâîä ÍÅ ÿâëÿåòñÿ îôèöèàëüíûì äîêóìåíòîì W3C.
Âñå Àâòîðñêèå Ïðàâà Ïðèíàäëåæàò W3C.
Äàííûé äîêóìåíò ìîæåò ñîäåðæàòü îøèáêè ïåðåâîäà è îïå÷àòêè.
Àâòîð ïåðåâîäà: Åâãåíèé Ñêðèïåö, êîòîðûé ðàáîòàåò ñåé÷àñ íàä ïðîåêòîì Speed Lab. Âñå ïåðåâîäû àâòîðà: en, ru, uk
Ëîêàëüíàÿ âåðñèÿ: http://www.indeep76.com/Style/Example007/roundshadow.html

Çàêðóãëåííûå & ñ òåíüþ

Ïÿòü êàðòèíîê

Ðåçóëüòàò

Çàêðóãëåííûå óãëû è áëîêè ñ òåíüþ

CSS3 áóäåò îáëàäàòü âîçìîæíîñòüþ ñîçäàâàòü çàêðóãëåííûå êðàÿ, êðàÿ, ñîñòîÿùèå èç èçîáðàæåíèé è áëîêè ñ òåíÿìè, íî ïðè ïîìîùè îïðåäåëåííûõ äåéñòâèé âû ñìîæåòå èìèòèðîâàòü íåêîòîðûå èç íèõ óæå ñ âåðñèåé CSS2 — áåç êàêèõ-ëèáî òàáëèö èëè äîïîëíèòåëüíîãî îôîðìëåíèÿ.

Ýòà ñòðàíèöà áûëà ïðèäóìàíà è ñîçäàíà Àðâå Áåðñâåíäñîíîì. Ó íåãî åñòü ìíîãî äðóãèõ èíòåðåñíûõ äåìîíñòðàöèé CSS.

Ðàçóìååòñÿ, ñîçäàíèå çàêðóãëåííûõ óãëîâ è òåíåé áóäåò óïðîùåíî â âåðñèè CSS3. Íàïðèìåð, äëÿ òîãî, ÷òî çàäàòü ïàðàãðàôó òîëñòóþ êðàñíóþ ãðàíèöó ñ çàêðóãëåííûìè óãëàìè, âàì ïîíàäîáÿòñÿ âñåãî äâå ëèíèè CSS3, ïîäîáíûå ýòèì:

P { border: solid thick red;
    border-radius: 1em }

À äëÿ òîãî, ÷òîáû äîáàâèòü ñìàçàííóþ òåíü íà ïîëîâèíó åm íèæå è ïðàâåå ïàðàãðàôà, äîñòàòî÷íî áóäåò âñåãî îäíîé ëèíèè:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Âû ìîæåòå ïîïðîáîâàòü òóò ðàáîòàåò ëè îí.) Íî åñëè îíè íóæíû âàì ñåé÷àñ è ñëîæíîñòü è íåäîñòàòîê ãèáêîñòè äëÿ âàñ íå ïðåïÿòñòâèå, âû ìîæåòå èñïîëüçîâàòü òåõíîëîãèþ, îïèñàííóþ íèæå.  êîíöå êîíöîâ, ýòî áóäåò îòëè÷íûì òåñòîì äëÿ ïîëüçîâàòåëåé áðàóçåðîâ buggy …

Ïÿòü èçîáðàæåíèé íà îäíîì ýëåìåíòå

Ãëàâíûé òðþê - èñïîëüçîâàíèå ñãåíåðèðîâàííîãî êîíòåíòà '::before' è '::after') äëÿ ïîìåùåíèÿ ÷åòûðåõ äîïîëíèòåëüíûõ èçîáðàæåíèé â îäèí ýëåìåíò. '::before' ïñåâäîýëåìåíò ìîæåò èìåòü ôîíîâûé è ïåðåäíèé ñëîé, '::after' ïñåâäî ýëåìåíò - òàêæå, à ýëåìåíò ñàì ìîæåò èìåòü ôîíîâûé ñëîé â öåëîì äëÿ ïÿòè èçîáðàæåíèé.

Ìû ñîçäàåì ïÿòü PNG èçîáðàæåíèé è ðàçìåùàåì èõ â ÷åòûðåõ óãëàõ è íàïðîòèâ ïðàâîãî êðàÿ ýëåìåíòà. Âîò èçîáðàæåíèÿ:

âåðõíèé ëåâûé óãîë:
top left corner
âåðõíèé êðàé è âåðõíèé ïðàâûé óãîë:
top right corner
ñðåäíÿÿ ÷àñòü ïðàâûé êðàé:
background and right edge
íèæíèé ëåâûé óãîë:
bottom left corner
íèæíèé êðàé è íèæíèé ïðàâûé óãîë:
bottom and bottom left corner

À âîò ïðàâèëà CSS äëÿ èõ ðàñïîëîæåíèÿ:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote::before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote::after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

Òàê êàê íàø ôîíîâûé ðèñóíîê - 620px øèðèíîé, ìû íå ìîæåì ïîçâîëèòü áëîêè øèðå 620px áåç èíòåðâàëîâ. Ïîýòîìó òóò åñòü ñâîéñòâî 'max-width'. Ñâîéñòâî 'display: block' íåîáõîäèìî äëÿ òîãî, ÷òîáû óáåäèòüñÿ, ÷òî ñãåíåðèðîâàííûé êîíòåíò ôîðìèðóåò ñîáñòâåííûå áëîêè ñâåðõó è ñíèçó îñíîâíîãî êîíòåíòà, âìåñòî òîãî, ÷òî ïîìåùàòüñÿ íà ïåðâîé è ïîñëåäíåé ñòðî÷êå. Ñâîéñòâî 'line-height: 0' ãàðàíòèðóåò, ÷òî ñâåðõó è ñíèçó èçîáðàæåíèé îñòàíåòñÿ ìåñòî äëÿ íàäñòðî÷íûõ è ïîäñòðî÷íûõ ñèìâîëîâ â ñâîéñòâå 'content'.

Ðåçóëüòàò

À âîò êàê îíî âûãëÿäèò:

Âèäèòå áëåäíûé çåëåíûé áëîê ñ çàêðóãëåííûìè óãëàìè è òåíüþ íà áåëîì ôîíå? Åñëè íåò, âàø áðàóçåð íåêîððåêòíî íàñòðîåí äëÿ ñãåíåðèðîâàííîãî êîíòåíòà (èëè âîîáùå íå íàñòðîåí).

Èñòî÷íèê HTML äîëæåí áûòü ñëåäóþùèì:

<blockquote>
<p>Âèäèòå áëåäíûé çåëåíûé áëîê ñ çàêðóãëåííûìè óãëàìè 
è òåíüþ íà áåëîì ôîíå? Åñëè íåò,
âàø áðàóçåð íå êîððåêòíî íàñòðîåí äëÿ ñãåíåðèðîâàííîãî êîíòåíòà 
(èëè âîáùå íå íàñòðîåí).
</blockquote>

È åñëè õîòèòå ïðîâåðèòü, ñìîæåò ëè óæå âàø áðàóçåð ñäåëàòü ýòî ïðè ïîìîùè CSS3, âû ìîæåòå ïîïðîáîâàòü òóò.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
ñîçäàíî 6 ÿíâàðÿ 2004;
ïîñëåäíåå îáíîâëåíèå $Äàòà: 2007/07/20 16:19:10 $ GMT