Мы уже разбирали с вами свойство box-shadow , но немногие могут с помощью него сделать классные тени. Сегодня я хочу показать вам простые примеры использования этого свойства для создания знаменитых эффектов.
Мы уже разбирали с вами свойство box-shadow, но немногие могут с помощью него сделать классные тени. Сегодня я хочу показать вам простые примеры использования этого свойства для создания знаменитых эффектов.
Базовая тень
Создадим html и css файлы. В html пропишем следующее:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Shadow</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="shadow"></div>
</body>
</html>
А теперь перейдем к css
body {
background: #ccc;
margin: 0;
}
div {
background-color: #fff;
width: 400px;
height: 200px;
padding: 15px;
margin: 15px;
float: left;
}
.shadow {
box-shadow: 5px 5px rgba(150,150,150,.5);
}
Пояснять тут, честно говоря, нечего. Единственное, в тени мы сдвигаем ее вправо и вниз на 5px и задаем цвет, используя rgba, с прозрачностью 0.5. В итоге получаем простую, но симпатичную тень
Размытая распространенная тень
Html у нас такой:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blurred Spread Shadow</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="shadow">Some text...</div>
</body>
</html>
А css вот такой:
body {
margin: 0;
padding: 0;
background: #ccc;
}
.shadow {
margin: 30px;
background: #fff;
width: 494px;
height: 294px;
border-radius: 3px;
box-shadow: 0 20px 3px -10px rgba(0,0,0,.3);
font: 15px "Sans-Serif", "Times New Roman";
padding: 3px;
}
Здесь тень смещена по оси x на 0px, по оси y на 20px, размытие задано небольшое - 3px. Самое главное - распространение тени. Мы его задаем отрицательным в 10px. В итоге, вот такая красивая тень, которую, например, можно использовать под слайдерами
Падающая тень
Html вот такой:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop Shadow</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="ball.png" width="250" height="250" alt="Мяч">
</div>
</body>
</html>
В html файле ничего необычного, кроме того, что я использую картинку футбольного мячика в блоке .container. Перейдем к css
body {
background-color: #ccc;
margin: 0;
}
.container {
padding: 20px 50px;
background-color: black;
}
.container img {
-webkit-filter: drop-shadow(20px 20px 50px white);
}
Здесь мы уже не используем свойство box-shadow, а используем свойство filter. Оно пока что плохо поддерживается, но уже работает в webkit браузерах последних версий. В нашем случае мы используем функцию drop-shadow, в которую передаем уже знакомые нам из свойства box-shadow параметры: x, y, размытие и цвет.
Итак, на этом все. Надеюсь, что вы сможете найти применение этим эффектам теней и придумаете свои, более интересные. Удачи!
