Як зробити тінь на css

Відео: [CSS] Як прибрати туман, і зробити квадратні тіні

Дизайнери дуже люблять додавати всякі тіні на свої блоки. В Photoshop це робиться протягом двох секунд, а ось для верстальника - це ціла історія. Якщо Ви будете шукати в Інтернеті, як зробити тінь на CSS, то виявите, що майже скрізь використовується CSS3, який, як я вже писав, ще рано використовувати. є суміш CSS3 і JQuery (Взагалі жах), щоб тінь була кросбраузерності. Загалом, одне рішення гірше іншого, а я ж у цій статті покажу кросбраузерності варіант без всяких JQuery і CSS3.

Насамперед Вам треба вирізати такі картинки:

Верхню межу з лівим кутом, але без правого. Бажано, щоб її довжина була свідомо більше, ніж потрібно для блоку.
Верхній правий вугол.
Смужки зліва і праворуч від блоку висотою по 1 пікселя.
Нижня межа з лівим кутом і так само без правого. Знову треба, щоб смуга ця була максимально довгою.
Правий нижній кут.

Ось ці 6 картинок у Вас повинні бути, а далі треба написати наступний HTML-код:

class="Shadow-block"gt; 
class="Sh-top"gt; 
class="Sh-rt"gt; 
class="Sh-sl"gt; 
class="Sh-sr"gt; 
class="Sh-content"gt; 
 Тут вміст блоку 
 
 
 
class="Sh-bottom"gt; 
class="Sh-rb"gt;

тепер CSS-код:

Відео: ►Materialize CSS◄ # 3 Як зробити тінь у будь-якого елементу. шаблони тіней

/ * Ховаємо область за блоками * / 
.shadow-block, 
.shadow-block .sh-sl, 
.shadow-block .sh-content { 
 overflow: hidden- 
} 
 
/ * Висота верхньої і нижньої рамки тіні, а також кутів * / 
.shadow-block .sh-top, 
.shadow-block .sh-rt, 
.shadow-block .sh-rb, 
.shadow-block .sh-bottom { 
 height:20px- 
}/ * Ширина кутів, їх вирівнювання і підйом наверх * / 
.shadow-block .sh-rt, 
.shadow-block .sh-rb { 
float:right- 
 margin-top:-20px- 
 width:20px- 
} 
 
/ * Відступ праворуч (для куточків) * / 
.shadow-block .sh-bottom, 
.shadow-block .sh-top { 
 margin-right:20px- 
} 
 
/ * Довга смужка з верхньої тінню (лівий кут вже на картинці) * / 
.shadow-block .sh-top { 
 background: url("Images / st.jpg")no-repeat- 
} 
 
/ * Верхній правий кут (лівий кут вже є на смужці) * / 
.shadow-block .sh-rt { 
 background: url("Images / rt.jpg")no-repeat- 
} 
 
/ * Горизонтальна смуга тіні (висота 1 піксель) зліва від блоку * / 
.shadow-block .sh-sl { 
 background: url("Images / sl.jpg") left repeat-y- 
} 
 
/ * Горизонтальна смуга тіні (висота 1 піксель) праворуч від блоку * / 
.shadow-block .sh-sr { 
 background: url("Images / sr.jpg") right repeat-y- 
} 
 
/ * Колір блоку і відступ від кордонів з тінями * / 
.shadow-block .sh-content { 
 background:# FFF- 
 margin:020px- 
}/ * Довга смужка з нижньої тінню (лівий кут вже на картинці) * / 
.shadow-block .sh-bottom { 
 background: url("Images / sb.jpg")no-repeat- 
} 
 
/ * Нижній правий кут (лівий кут вже є на смужці) * / 
.shadow-block .sh-rb { 
 background: url("Images / rb.jpg")no-repeat- 
}

Безумовно, це складний спосіб, але я його використовую у своїй практиці, як і інші професіонали. А новачки і всякі халтурники використовують box-shadow, плюс різні скрипти і htc, щоб було кросбраузерності. Коли наплювати на якість, а хвилюють лише час і гроші, то це найкращий варіант. Але якщо Ви хочете якість, то використовуйте мій спосіб.

Поділися в соціальних мережах:

Схожі