Оригинальный эффект, привлекающий к себе внимание посетителя, и совершенно не портящий внешний вид страницы — блок-перевёртыш.
Перевёртышем он становиться при наведении на него курсора мыши. Попробуйте, наведите курсор на мою фотографию.
Согласитесь, если посетитель проведёт курсором по такому элементу, и он вдруг оживёт, то это однозначно привлечёт его внимание.
В этот блог легко вставляются гиперссылки, фоновые изображения и всё, что можно вставить в 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 вставить шорткод, и вставить в него Ваш доведённый код.
В зависимости от настроек темы, оформление перевёртыша ещё возможно придётся подправить, а возможно и нет.
Желаю творческих успехов.
Перекур
История повторяется дважды. Один раз в виде трагедии. И второй раз — для тупых
Можно с помощью шорткода, а можно на странице разместить html, а css в style.css, только всем элементам html надо задать классы, и свойства прописать этим классам.
Как на одной странице поместить два разных изображение с такой анимацией?