logo

Трансформация «Дверной глазок»

«Дверной глазок»

Приподнимаем заслонку дверного глазка наводя курсор, а под ней находится ссылка на скачивание. Код каждого из представленных ниже глазков одинаков. Разница состоит в том, что для каждого из вариантов используются различные фоновые изображения и значения некоторых свойств. Различия выделены соответственно разными цветами. Эти значения изменяют местонахождение оси поворота, направление и угол поворота заслонки.


<div class="spyhole ">
  <div class="spyhole__info">
    <a href="#" class="spyhole__link">Скачать</a>
  </div>
  <div class="spyhole__thumb spyhole__bg"></div>
</div>

.spyhole {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 7px rgba(0, 0, 0, 1)
}
.spyhole__thumb {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255, 255, 255, 0.5);
    transform-origin: 95% 40%;
    transform-origin: 5% 40%;
    transform-origin: 50% 4%;
    transition: all .3s ease-in-out
}
.spyhole__thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;left: 95%;
    top: 40%;left: 5%;
    top: 4%;left: 50%;
    margin: -4px 0 0 -4px;
    background: #0e0e0e;
    background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0, rgba(125, 126, 125, 1) 100%);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.9)
}
.spyhole__bg {
    background-image: url(images/img1.jpg);
}
.spyhole__info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(images/img2.jpg);
    box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
}
.spyhole__link {
    font-size: 20px;
    line-height: 150px;
    text-decoration: none;
    color: #7297e0;
    font-style: italic;
    letter-spacing: 4px;
    text-shadow: 0 0 0 #5277c0, 1px 0 0 #3459a2, 2px 0 0 #163b84, 3px 0 2px rgba(0, 0, 0, 0.25), 3px 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, .2);
}
.spyhole__link:hover {
    text-decoration: underline;
}
.spyhole:hover .spyhole__thumb {
    box-shadow: inset 0 0 0 15px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.2);
    transform: rotate(110deg;)
    transform: rotate(-110deg);
    transform: rotate(150deg);
}

Практические примеры 0

Рекомендую прочитать...

Оформление кнопок для сайта
Оформление кнопок для сайта

Практически на любом сайте Вы найдете хотя бы одну кнопку. Это может быть кнопка «Поиск», или «Скачать», или «Читать полностью», или какая то другая.
Ранее в качестве кнопок использовался ссылка-рисунок. При наведении на нее курсора одна картинка замещалась другой, чтобы создать иллюзию движения. В настоящее время с помощью CSS3 появилась возможность создавать всевозможные кнопки совершенно не используя картинки.

Читать полностью
Тег  <hr>  или просто линия
Или просто линия

Линия. Что может быть проще? Провел карандашом по листу бумаги, получите — линия. Причем эта линия может быть прямой, кривой, волнистой, угловатой, короче — любой. В HTML для того, чтобы нарисовать линию служит тег hr .Он создает на странице линию, простую линию, которую разные браузеры отображают по своему (может незначительно отличаться цвет и ширина)

Читать полностью
Оформление кнопок на сайте
Кнопки для сайта

Продолжаем публикацию оформления кнопок для сайта. Сегодня рассмотрим кнопки с изменением внешнего вида при наведении в виде шторок и анимации текстового содержимого.

Как обычно, внешнее оформление, размеры, содержимое каждый выбирает сам, здесь задается только описание самого эффекта.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.