hover

Пишем разметку: <button class="prism">Click Me</button> <button class="prism">Click Me</button> Пишем стиль для разметки: .prism { --intensity: 1; --scaleFactor: 1.01; --blur: 5; --redTop: 0; --redLeft: 0; --greenTop: 0; --greenLeft: 0; --blueTop: 0; --blueLeft: 0; position...

Пишем нашу разметку: <div class="m-linkitem"> <h1>Hover Below</h1> <a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quia natus repudiandae consequuntur tenetur consequatur.</a> </div> Пишем стиль: @keyframes backgroundGradient { 0% { background-position...

Пишем наше тело: <button style="--content: 'Hover me!';"><div class="left"></div>Hover me!<div class="right"></div></button> Пишем стиль: @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,900'); :root { --text-color: hsla(210, 50%, 85%, 1); --shadow-color: hsla(210...

Умельцы наверняка быстро найдут данному эффекту применения, пишем простой код HTML: <a>???</a> Пишем стиль с эффектом: a { position: relative; display: flex; justify-content: center; align-items: center; width: 200px; height: 50px; background: #fff; border-radius: 999px; }...

Делаем разметку HTML в нашем дополнении или сайте: <nav id="nav-1"> <a class="link-1" href="#">Home</a> <a class="link-1" href="#">About</a> <a class="link-1" href="#">Contact</a> <a class="link-1" href="#">Shop</a> </nav> <nav id="nav-2"> <a class="link-2" href="#">Home</a> <a...

Делаем эффекты при наведение на кнопки, наша разметка HTML: <div class="container"> <div class="button">Center -> out</div> <div class="button">Left -> Right -> Left</div> <div class="button">Left -> Right -> Right</div> <div class="button">Top -> Bottom -> Top</div> <div...

Пример выделения разделов при наведении мышкой на них, код добавляем в шаблон EXTRA.CSS .stretch, .node.forum.level_2:after, .node.forum.level_2:before { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .node.forum.level_2:after { -moz-box-shadow: rgba(212, 207, 201...