Оригинальный эффект, привлекающий к себе внимание посетителя, и совершенно не портящий внешний вид страницы — блок-перевёртыш.
Перевёртышем он становиться при наведении на него курсора мыши. Попробуйте, наведите курсор на мою фотографию.
Согласитесь, если посетитель проведёт курсором по такому элементу, и он вдруг оживёт, то это однозначно привлечёт его внимание.
В этот блог легко вставляются гиперссылки, фоновые изображения и всё, что можно вставить в html блок.
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.perspective--100 {
perspective: 100px;
-webkit-perspective: 100px;
-ms-perspective: 100px;
}
.otcrytka {
display: block;
text-align: center;
width: 150px;
height: 150px;
color: #fff;
background-color: rgb(55,124,255);
font-size: 20px;
line-height: 250px;
background-image: url(images/sk1.jpg);
border-radius: 7px;
box-shadow: inset 0 0 0 3px #705E5F;
-webkit-transition: transform 3s;
-ms-transition: transform 3s;
transition: transform 3s;
}
.otcrytka:hover {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="perspective"><a href="https://starper55plys.ru/">
<span class="otcrytka">
Sergei Kutuzov
< /span></a>
</div>
</body>
</html>
Доводить этот код до своих целей, размеры там, картинки и т.п., лучше в Notepad++, а уж потом можно в файл functions.php вставить шорткод, и вставить в него Ваш доведённый код.
В зависимости от настроек темы, оформление перевёртыша ещё возможно придётся подправить, а возможно и нет.
Желаю творческих успехов.
Перемена
История повторяется дважды. Один раз в виде трагедии. И второй раз — для тупых
Анимация CSS для начинающих
CSS перемещение, вращение, 3D
Плавающий блок CSS
Часы CSS
Вращающийся куб баннер CSS
Текст появляющийся на изображениях CSS
Живое сердце CSS
Анимация для шапки сайта CSS
Логотип для сайта
Слайдер CSS
В раздел
Рекомендую: Шаблоны HTML на русском
Можно с помощью шорткода, а можно на странице разместить html, а css в style.css, только всем элементам html надо задать классы, и свойства прописать этим классам.
Как на одной странице поместить два разных изображение с такой анимацией?