» » » Креативные Box Border Hover Effects на чистом Html и css
18 0  

Креативные Box Border Hover Effects на чистом Html и css

Креативный эфект Box Border Hover Effects на чистом Html и css созданый с помощью :before и продуманого позиционирования.

Заголовок один

Короткий текст про опис тої чи іншої послуги, що забезпечує перевагу над конкурентами на ринку України або закордоном.

Детальніше

Заголовок два

Короткий текст про опис тої чи іншої послуги, що забезпечує перевагу над конкурентами на ринку України або закордоном.

Детальніше

Заголовок три

Короткий текст про опис тої чи іншої послуги, що забезпечує перевагу над конкурентами на ринку України що забезпечує перевагу над конкурентами на ринку України або закордоном.

Детальніше

Исполняемый код:

<div class="korobka"> <div class="blokhover"> <div data-name="01"><div> <h3>Заголовок один</h3> <p>Короткий текст про опис тої чи іншої послуги, що забезпечує перевагу над конкурентами на ринку України або закордоном.</p> <a href="">Детальніше</a></div> </div> <div data-name="02"><div> <h3>Заголовок два</h3> <p>Короткий текст про опис тої чи іншої послуги, що забезпечує перевагу над конкурентами на ринку України або закордоном.</p> <a href="">Детальніше</a></div> </div> <div data-name="03"><div> <h3>Заголовок три</h3> <p>Короткий текст про опис тої чи іншої послуги, що забезпечує перевагу над конкурентами на ринку України що забезпечує перевагу над конкурентами на ринку України або закордоном.</p> <a href="">Детальніше</a></div> </div> </div> </div> <style> .korobka {width:100%; overflow:hidden; background:#14182f; padding: 50px 0; } .blokhover {display:flex; flex-flow: row wrap; justify-content: space-between; padding:0 2%; color:#fff;} .blokhover > div {width:31%; position:relative; margin:1px 2% 1px 0;z-index:2;} .blokhover > div:last-child{margin:0;} .blokhover > div::before {content:""; width:100%; height:102%; background:linear-gradient(135deg, #5f03fd 50%, #e51d65); transform: skew(2deg,2deg); position:absolute; top:-1.1%; left:-0.5%; z-index:-2;} .blokhover > div > div { display:flex; flex-direction: column; justify-content: center; align-items: center; padding:110px 8%; height:100%; background: linear-gradient(to right, #14182f 50%, #070b22 50%);} .blokhover p, .blokhover h3 {position:relative;z-index:3; color:#fff;} .blokhover h3 {font-size:1.4em;} .blokhover > div::after {content: attr(data-name);font-size:123px; font-weight:bold; color:#343644; position: absolute;top:30%;left:33%; z-index:0; opacity:.2;} .blokhover a {display: inline-block; text-decoration:none; color:#fff; padding:10px 20px; border:1px solid white; opacity:0; position:absolute; bottom:30%;left:35%;} .blokhover > div:hover a {bottom:8%; opacity:1; transition:0.5s;} .blokhover a:hover {background:#fff; color:#14182f;} .blokhover > div:hover::after {top:4%; transition:0.5s; top:5px; opacity:.3;} .blokhover > div:hover::before {-webkit-filter: invert(100%);filter: invert(100%); transition:0.9s;} .blokhover > div:nth-child(2)::before {background:linear-gradient(135deg, #04bfd2, 50%, #84fe02);} .blokhover > div:nth-child(3)::before{background:linear-gradient(135deg, #ea491b 50%, #fe0455);} </style

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

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019