Languages

Це переклад. Він може містити помилки або бути застарілим відносно Англійської версії. Перекладач: Євген (address-data)

Каскадні таблиці стилів CSS поради & прийоми

Дивіться також покажчик усіх прийомів.

Закруглені кути та блоки з тінню

Ця сторінка була вигадана та створена Арве Берсвендсоном. Він має багато інших цікавих демонстрацій CSS.

CSS3 матиме можливість створювати закруглені краї, що складаються із зображень та блоки з тінями, але за допомогою певних дій ви зможете імітувати деякі з них вже у версії СSS2 — без будь-яких таблиць або додаткового оформлення.

Зрозуміло, що створення закруглених кутів та тіней буде спрощено у версій CSS3. Наприклад, для того, щоб задати параграфу товсту червону межу із закругленими кутами, вам знадобиться лише дві лінії CSS3, схожі на ці:

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

А для того, щоб додати розмиту тінь на половину еm нижче та правіше параграфу, достатньо буде лише однієї лінії:

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

(Ви можете подивитись тут і тут, щоб впевнитися як це працює.) Однак якщо ці ефекти потрібні в старих браузерах і ви не заперечуєте проти складності і відсутності гнучкості, ви можете використовувати техніку, описану нижче. В крайньому випадку, це буде хорошою перевіркою для дефектних браузерів…

П'ять зображень на одному елементі

Головний трюк - використовування сгенерованого контенту '::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>
Bert Bos, style activity lead
Copyright © 1994–2021 W3C® Privacy policy

Created 6 January 2004;
Last updated ср, 06-січ-2021 05:40:49 +0000

Languages

About the translations