(Ýòà ñòðàíè÷êà èñïîëüçóåò êàñêàäíûå òàáëèöû ñòèëåé 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 èçîáðàæåíèé è ðàçìåùàåì èõ â ÷åòûðåõ óãëàõ è íàïðîòèâ ïðàâîãî êðàÿ ýëåìåíòà. Âîò èçîáðàæåíèÿ:
À âîò ïðàâèëà 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, âû ìîæåòå ïîïðîáîâàòü òóò.