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

(Ця сторінка використовує каскадні таблиці стилів CSS)

Цей документ є перекладом статті з сайту W3C.
Оригінальна версія документу знаходиться тільки на сайті W3C https://www.w3.org/Style/Examples/007/roundshadow.html
Цей переклад НЕ є офіційним документом W3C.
Всі Авторські Права Належать W3C.
Цей документ може містить помилки перекладу та похибки.
Автор: Скрипець Євген, голова SSL (всі переклади автора: en, ru, uk )
Локальна копія: https://www.indeep76.com/Style/Example007ukr/roundshadow.html

Закруглені & з тінню

П'ять зображень

Результат

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

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

Ця сторінка була вигадана та створена Арве Берсвендсоном. Він має багато інших цікавих демонстрацій 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!