trim.68ABDF11-7C3E-4F93-BD9D-D851EDC9FEF4.MOV
184.8 KB
Обводка текста CSS.
Прикольный эффект для текста, который выделит ваш сайт на фоне других, рекомендую делать большой font-size, чтобы обводка лучше смотрелась, обычно встречал в различных выпадающих меню, но это уже на ваше усмотрение. Посмотреть пример можно тут
Кому интересно, вот код из примера:
a{
font-size: 80px;
font-weight: 700;
-webkit-text-stroke-color: #ba5353;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.02em;
background-clip: text;
-webkit-background-clip: text;
background-repeat: no-repeat;
background-image: linear-gradient(#ba5353 0%,#ba5353 100%, );
transition: all .5s ease;
background-size: 0 100%;
-webkit-background-size: 0 100%;
@media (min-width: 992px){
&:hover{
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}
}
}
Прикольный эффект для текста, который выделит ваш сайт на фоне других, рекомендую делать большой font-size, чтобы обводка лучше смотрелась, обычно встречал в различных выпадающих меню, но это уже на ваше усмотрение. Посмотреть пример можно тут
Кому интересно, вот код из примера:
a{
font-size: 80px;
font-weight: 700;
-webkit-text-stroke-color: #ba5353;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.02em;
background-clip: text;
-webkit-background-clip: text;
background-repeat: no-repeat;
background-image: linear-gradient(#ba5353 0%,#ba5353 100%, );
transition: all .5s ease;
background-size: 0 100%;
-webkit-background-size: 0 100%;
@media (min-width: 992px){
&:hover{
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}
}
}