Languages

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

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

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

Відкидання тіней

З моменту написання цієї сторінки в багатьох реалізаціях CSS було додано властивість 'box-shadow' з CSS рівня 3,    що робить описаний нижче метод необов'язковим. Дивіться "Закруглені кути і блоки з тінню" як приклад.    Ця сторінка також показує більш потужний, але в той же час більш складний, спосіб створення тіней за допомогою CSS рівня 2.

В CSS2 немає властивості, щоб додати тінь до блоку. Ви можете спробувати додати облямівку справа і внизу, але це не буде виглядати правильно. Проте, якщо у вас є два вкладених елемента, ви можете використовувати зовнішній елемент як тінь для внутрішнього. Наприклад, якщо у вас є такий текст (HTML): 

<div class=back>
  <div class=section>
    <h2>Die Rose duftet - doch ob sie empfindet</h2>
    <address>Heinrich Heine (1797-1856)</address>

    <p>Die Rose duftet - doch ob sie empfindet<br>
    ...
  </div>
</div>

Ви можете використовувати зовнішній DIV як тіні для внутрішнього. Результат повинен виглядати як ця окрема сторінка. Спочатку, задайте фоновий колір для BODY (в нашому прикладі — світло-зелений), зовнішній DIV зробіть трохи темнішим (зелено-сірим) і внутрішній DIV відмінним    від фону (наприклад, жовто-білим): 

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Потім, використовуючи властивості margin і padding, ви зміщуєте внутрішній DIV трохи вліво і вгору від зовнішнього DIV: 

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

Вам також потрібно перемістити зовнішній DIV трохи вправо. І якщо у вас кілька секцій, ви можливо, захочете залишити між ними трохи місця: 

div.back {margin: 3em 0 3em 5em}

В принципі, це все, що треба зробити. Ви також можете додати рамку навколо внутрішнього DIV, якщо хочете. Ви також, можливо, захочете зробити заливку    всередині нього, наприклад: 

div.section {border: thin solid #999; padding: 1.5em}

Зрозуміло, ви можете змінювати розмір тіней на ваш смак.

Текстові тіні

В CSS дійсно є властивість для додавання тіні до тексту. У нього чотири параметри: колір тіні, горизонтальний відступ (позитивний — вправо),    вертикальний відступ (позитивний — вниз) і розмиття (0 — різка тінь). наприклад: 

h3 { text-shadow: red 0.2em 0.3em 0.2em }

У цього тексту є тінь?

Bert Bos, style activity lead
Copyright © 1994–2021 W3C® Privacy policy

Created 4 April 2002;
Last updated ср, 06-січ-2021 05:40:49 +0000

Languages

About the translations