Приклади тіней на css.
Відео: Уроки по CSS / CSS3. Частина 14. Тіні (box-shadow)
Ми вже розбирали з вами властивість box-shadow, але мало хто може за допомогою нього зробити класні тіні. Сьогодні я хочу показати вам прості приклади використання цієї властивості для створення знаменитих ефектів.
Базова тінь
створимо html і css файли. В html пропишемо наступне:
lang="En"gt;
charset="UTF-8"gt;
Basic Shadow
rel="Stylesheet"href="Style.css"gt;
class="Shadow"gt;
А тепер перейдемо до css
body {
background:# ccc-
margin:0-
}
div { background-color:# fff-
width:400px-
height:200px-
padding:15px-
margin:15px-
float: left-
}
.shadow {
box-shadow:5px5px rgba(150,150,150,.5) -
}
Пояснювати тут, чесно кажучи, нічого. Єдине, в тіні ми зрушуємо її вправо і вниз на 5px і задаємо колір, використовуючи rgba, з прозорістю 0.5. У підсумку отримуємо просту, але симпатичну тінь
Розмита поширена тінь
Html у нас такий:
Відео: Тінь блоку css
lang="En"gt;
charset="UTF-8"gt;
Blurred Spread Shadow
rel="Stylesheet"href="Style.css"gt;
class="Shadow"gt;Some text ...
А css ось такий:
body {
margin:0-
padding:0-
background:# ccc-
}
.shadow {
margin:30px-
background:# fff-
width:494px-
height:294px-
border-radius:3px-
box-shadow:020px3px-10px rgba(0,0,0,.3) -
font:15px"Sans-Serif","Times New Roman"-
padding:3px-
}
Тут тінь зміщена по осі x на 0px, по осі y на 20px, розмиття задано невелике - 3px. Найголовніше - поширення тіні. Ми його ставимо негативним в 10px. У підсумку, ось така красива тінь, яку, наприклад, можна використовувати під слайдерами
падаюча тінь
Html ось такий:
lang="En"gt;
charset="UTF-8"gt;
Drop Shadow
rel="Stylesheet"href="Style.css"gt;
class="Container"gt;
src="Ball.jpg"width="250"height="250"alt="М`яч"gt;
В html файлі нічого незвичайного, крім того, що я використовую картинку футбольного м`ячика в блоці .container. перейдемо до css
body {
background-color:# ccc-
margin:0-
}
.container {
padding:20px50px-
background-color: black-
}
.container img {
-webkit-filter: drop-shadow(20px20px50px white) -
}
Тут ми вже не використовуємо властивість box-shadow, а використовуємо властивість filter. Воно поки що погано підтримується, але вже працює в webkit браузерах останніх версій. У нашому випадку ми використовуємо функцію drop-shadow, в яку передаємо вже знайомі нам з властивості box-shadow параметри: x, y, розмиття і колір.
Отже, на цьому все. Сподіваюся, що ви зможете знайти застосування цих ефектів тіней і придумаєте свої, цікавіші. Успіхів!
- Neon shadow
- Shadow blade
- Shadow kings
- Shadow battle
- Shadow bug rush
- Де завантажити оригінальний windows 7 rus / eng?
- Як дізнатися ключ windows в вашому комп`ютері?
- Be quiet! Представила компактний процесорний кулер shadow rock lp
- Як створити "вислизати" меню на css.
- Як зробити тінь на css
- Як зробити аккордіон на чистому css3.
- Як зробити вигнуту тінь на чистому css3.
- Як задавати градієнти в css3.
- Як зробити прогрес бар на чистому css3.
- Як зробити ефект вдавленого тексту на css3.
- Як зробити просту навігацію на html5 і css3.
- Знову перехід на зимовий час 2014. Оновлення для автоматичного переходу
- Плавні переходи в css3.
- Тіні для тексту і блоків.
- Коментарі у вигляді бульбашки.
- Верстаємо круглі кнопки на css3.