Каскадныя табліцы стыляў
CSS рады & прыёмы

Закругленыя куты і блокі з ценем

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, вы можаце паспрабаваць тут.