Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу --

Блок перевёртыш CSS

Сергей Кутузов

Оригинальный эффект, привлекающий к себе внимание посетителя, и совершенно не портящий внешний вид страницы — блок-перевёртыш.

Перевёртышем он становиться при наведении на него курсора мыши. Попробуйте, наведите курсор на мою фотографию.

Согласитесь, если посетитель проведёт курсором по такому элементу, и он вдруг оживёт, то это однозначно привлечёт его внимание.

В этот блог легко вставляются гиперссылки, фоновые изображения и всё, что можно вставить в 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 основы. Добавьте в закладки постоянную ссылку.
А так же:

5 комментариев на «Блок перевёртыш CSS»

  1. Валерия говорит:

    Спасибо, чуть доработала под свой логотип все получилось

  2. stariс говорит:

    Не надо переделывать.

  3. Валерия говорит:

    Как вставить картинку?
    Вставляется адрес или его нужно как то переделать?

  4. stariс говорит:

    Можно с помощью шорткода, а можно на странице разместить html, а css в style.css, только всем элементам html надо задать классы, и свойства прописать этим классам.

  5. Игорь говорит:

    Как на одной странице поместить два разных изображение с такой анимацией?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *