3D эффект на CSS
Здравствуйте дорогие друзья, сегодня мы с Вами реализуем 3D эффект на CSS. Данный пример будет основан на CSS свойстве transition и вся реализация будет построена именно благодаря ему. Поэтому давайте, как обычно, начнем с написания структуры кода:
<html>
<head>
<title>3D эффект на CSS</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="wrap">
<h1>Первый эффект</h1>
<h2>Второй эффект</h2>
<div class="three">
<div>Третий эффект</div>
</div>
</div>
</body>
</html>
И приступаем к реализации нашей задачи при помощи CSS:
* {
margin: 0;
padding: 0;
}
body {
background: #567;
}
.wrap {
margin: 0 auto;
text-align: center;
width: 550px;
}
.wrap h1 {
color: #fff;
font-size: 50px;
text-shadow: 1px 1px #d94141, 2px 2px #d94141, 3px 3px #d94141;
transition: all 0.2s;
top: 0;
left: 0;
}
.wrap h1:hover {
position: relative;
top: -3px;
left: -3px;
text-shadow: 1px 1px #d94141, 2px 2px #d94141, 3px 3px #d94141, 4px 4px #d94141, 5px 5px #d94141, 6px 6px #d94141;
}
.wrap h2 {
color: #fff;
font-size: 30px;
text-shadow: 1px 1px #759593, 2px 2px #759593;
transition: all 0.2s;
}
.wrap h2:hover {
text-shadow: 1px 1px #759593, 2px 2px #759593, 3px 3px #759593, 4px 4px #759593;
}
.three div {
color: #eee;
font-size: 45px;
transition: all 1s;
}
.three div:hover {
text-shadow: 3px 3px 3px #000;
transform: scale(1.1);
}
Вся реализация завершена, у нас получилось целых три примера с различным эффектом. Чтобы посмотреть на результат, я советую
Вам самостоятельно написать данный код и проверить его в браузере. А если говорить в двух словах, то в первых двух примерах
у нас появляется некоторая тень, за определенный промежуток времени. И в отличие от второго примера в первом происходит небольшое смещение.
Третий пример является, на мой взгляд, самым интересным, поэтому чтобы Вас заинтересовать не буду о нем ничего говорить, увидите все сами.
А теперь немного о реализации.
Мы создали блок, который является оболочкой, и в нем хранится вся информация. В нем разместили два заголовка разного уровня, а также третий пример, в отдельном блоке.
Убрали все отступы и поля у всех элементов. Установили цвет фона для страницы. Задали фиксированную ширину для блока, выровняли данный блок и все его
содержимое по центру.
Для заголовка задаем цвет текста, указываем размер шрифта, задаем тень и указываем свойство transition, благодаря которому
и получается некоторый 3D эффект текста. И в итоге меняем нужные свойства при наведении курсора мыши на элемент. Вот и вся реализация. Думаю, здесь все
предельно ясно и не требует детального рассмотрения.
На этом мы можем завершать нашу тему и с уверенность сказать, что Вы научились реализовывать
некоторые 3D эффекты на CSS. Всем пока, до скорого!
