✅ Как сделать 3D текст?

Если долго поработать со свойством text-shadow, то вы можете обмануть даже собственное зрение. Это свойство можно добавить на любой текст и выразить его по сравнению с другими. ⬇️

☑️ В 3D глубина создается несколькими текстовыми тенями. Каждый имеет нулевое размытие и все больше смещается от основного текста.

Пробуйте создать 3D текст с помощью готового кода ниже: ⤵️

text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
font-weight: 700;
color: #ffffff;
font-size: 90px;
font-family: sans-serif;

#обучение #css

✅ Как создать эффект растяжения

Свойство letter-spacing определяет межбуквенное расстояние в тексте, но как раз с помощью него можно сверстать интересную растянутую кнопку, которая удивит неожиданностью каждого. ⬇️

☑️ Добавление hover обязательно, он будет менять letter spacing, что способствует растяжению кнопки.

Делимся готовым кодом для создание эффекта растяжения кнопки: ⤵️

a {
padding: 10px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
color: #fff;
letter-spacing: 3px;
font-family: sans-serif;
text-decoration: none;
transition: all .35s;
}
a:hover {
letter-spacing: 17px;
}

#практика #css

✅ Как создать эффект пламени для текста?

Продолжим экспериментировать со свойством text-shadow, вы уже знаете, что за многие текстовые эффекты отвечает как раз это свойство, оно помогает сделать даже самые необыкновенные и различные эффекты на текст. ⬇️

☑️ Эффект огня - это еще одно использование множественных теней. Каждая тень смещена в различных направлениях, использует различные степени размывания, а также, используется смесь теплых цветов для создания впечатления пламени.

Для интересного эффекта огня, вам поможет готовый код ниже. ⤵️

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
font-weight: 700;
color: #fff;
font-size: 90px;
font-family: sans-serif; 

#обучение #css

✅ Как сделать Hover Slide Effect?

Slide Effect - интересный способ стилизации кнопки. При наведении мышки на объект слева плавно появляется свойство box-shadow, которое задано в коде. Можно добавить через запятую радиус размытия и распространения, а также сменить цвет.

Оставляем ниже код, для создания такого эффекта кнопки: ⤵️

button {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  width: 220px;
  height: 60px;
  font-family: sans-serif;
  font-size: 15px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #D80286;
  transition: ease-out 1s;
  background: #162944;
}
button:hover {
  box-shadow: inset 400px 0 100px 0 #D80286;
}

#обучение #html #css

✅ Highlight Text

Делимся с вами ниже готовым кодом для создания оформленной анимации выделения любого текста, с использованием псевдокласса hover: ⤵️

span {
  font-family: 'Bebas Neue', cursive;
  font-size: 2em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-image: linear-gradient(gold, gold);
  background-size: 100% 10px;
  background-repeat: no-repeat;
  background-position: 100% 0%;
  transition: all .7s ease;
}

span:hover {
  background-size: 100% 100%;
  background-position: 0% 100%;
  transition: all .7s ease;
}

#практика #css

✅ Frozen Text

Вы можете создать эффект замороженного текста с помощью готового кода ниже: ⤵️

h1 {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/6963bbf342d87b3a2150bd8f59682b89.jpg);
-webkit-background-clip: text;
background-size: contain;
width: 100%;
text-align: center;
color: transparent;
font-weight: 900;
font-size: 59px;
font-family: 'frozen', serif;
}

@font-face {
font-family:'frozen';
src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Ice%20kingdom%20-%20Bold%20-%20Por%20Kustren.woff');
}

#практика #css

✅ Как сделать Color Swap?

Color Swap- эффектный способ изменить любой цвет текста с помощью анимированного ползунка. Весь код исполнен на CSS, в основном для создания используется анимация keyframes и псевдокласс before.

Ниже оставляем для вас код эффектного замена цвета текста на чистом CSS: ⤵️

div {
font-size: 80px;
font-weight: 700;
position: relative;
color: #262626;
padding: 20px 50px;
font-family: sans-serif;
}

div:before {
background: #262626;
color: white;
content: 'CODEPEN';
position: absolute;
top: 0;
left: 0;
padding: 20px 50px;
-webkit-clip-path: polygon(0% 0% , 30% 0%, 30% 100%, 0% 100%);
clip-path: polygon(0% 0% , 30% 0%, 30% 100%, 0% 100%);
animation: slide 4s 1s linear infinite;
}

@keyframes slide {
50% {
-webkit-clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 70% 100%);
}
}

#обучение #css

✅ Shine Animation

На сайте интересно выглядит сияющая анимация, это как луч света - линия, вдоль которой переносится световая энергия. Цвет этой линии зависит от заднего фона, условно говоря, если фон желтый, то и линия будет желтого цвета.

Для создания блестящей анимации вам поможет готовый код ниже: ⤵️

img {
    -webkit-mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    -webkit-mask-size: 800%;
    mask-size: 800%;
    transition: mask-position 2s ease,-webkit-mask-position 2s ease;
  }
  img:hover {
    -webkit-mask-position: 120%;
    mask-position: 120%;
    opacity: 1;
  }

#обучение #css

✅ Как создать анимацию Text Filling?

В этой анимации текст заполняется цветом, в определенном направлении, т. е. слева направо, справа налево, сверху вниз или снизу вверх. ⬇️

☑️ Этот тип анимации не ограничивается только текстом. Вы можете использовать ту же технику, чтобы заполнить любую часть или форму.

Мы сделали вариант оранжевой заливки текста в CSS. В этом коде вы можете поменять цвета и стили под себя: ⤵️

span {
  font: 700 4em/1 "Oswald", sans-serif;
  padding: .25em 0 .325em;
  text-shadow: 0 0 80px rgba(255,255,255,.5);
  background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: filling 80s linear infinite;
  transform: translate3d(0,0,0);
}

@keyframes filling {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

#обучение #css

✅ Как сделать интересную анимацию загрузки?

Анимация загрузки создана с помощью CSS свойства transform: rotate. Может использоваться в качестве загрузки при ожидании ответа на веб-странице, созданной только с использованием HTML и CSS. Текст переворачивается слева направо и представляет собой очень плавную анимацию.

Делимся готовым HTML & CSS кодом для создания анимации загрузки:

HTML ⤵️
<div class="waviy">
<span style="--i:1">L</span>
<span style="--i:2">o</span>
<span style="--i:3">a</span>
<span style="--i:4">d</span>
<span style="--i:5">i</span>
<span style="--i:6">n</span>
<span style="--i:7">g</span>
<span style="--i:8">.</span>
</div>

CSS ⤵️
.waviy {
position: relative;
}
.waviy span {
position: relative;
display: inline-block;
font-size: 43px;
color: #fff;
text-transform: uppercase;
animation: flip 2s infinite;
animation-delay: calc(.2s * var(--i))
}
@keyframes flip {
0%,80% {
transform: rotateY(360deg)
}
}

#обучение #html #css

✅ Как сделать градиентное переливание текста?

Градиентное переливание - чистый HTML и CSS, поэтому он будет очень прост в использовании и не требует JavaScript. Он посылает красочный переход разных цветов по тексту с помощью градиента, придавая ему очень современный вид.

Оставляем готовый код ниже, c помощью которого вы сможете добавить данный эффект на сайт: ⤵️

span {
text-transform: uppercase;
font-weight: 700;
font-size: 55px;
font-family: sans-serif;
background-image: linear-gradient(-225deg, #231557 0%, #670303 29%, #ff4545 67%, #fff800 100%);
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: color 2s linear infinite;
}

@keyframes color {
to {
background-position: 200% center;
}
}

#практика #css

✅ Как сделать мультяшный текст?

Для данного текстового эффекта достаточно добавить CSS свойство text-shadow, а также использовать мультяшный шрифт "Luckiest Guy".

Мы делимся готовым кодом ниже для создания интересного эффекта текста: ⤵️

@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

h1 {
font-size: 140px;
font-family: 'Luckiest Guy';
color: #fff;
-webkit-font-smoothing: antialiased;
text-shadow: 0px -6px 0 #212121, 0px -6px 0 #212121, 0px 6px 0 #212121, 0px 6px 0 #212121, -6px 0px 0 #212121, 6px 0px 0 #212121, -6px 0px 0 #212121, 6px 0px 0 #212121, -6px -6px 0 #212121, 6px -6px 0 #212121, -6px 6px 0 #212121, 6px 6px 0 #212121, -6px 18px 0 #212121, 0px 18px 0 #212121, 6px 18px 0 #212121, 0 19px 1px rgba(0,0,0,.1), 0 0 6px rgba(0,0,0,.1), 0 6px 3px rgba(0,0,0,.3), 0 12px 6px rgba(0,0,0,.2), 0 18px 18px rgba(0,0,0,.25), 0 24px 24px rgba(0,0,0,.2), 0 36px 36px rgba(0,0,0,.15);
}

#практика #css

✅ Как создать SVG Text анимацию?

Если говорить подробно, SVG — Text Animation это мощный текстовый эффект CSS, разработанный автором Webstoryboy. Он предоставляет вам возможность выделить ваш текст, добавив эффекты к контуру и фону текста. ⬇️

☑️ Сначала будет показан контур вашего текста, чтобы люди могли узнать его содержание, а затем фон. Он работает постоянно, чтобы вы могли привлечь больше внимания посетителей вашего сайта.

Мы сделали HTML & CSS код ниже, чтобы вы смогли добавить SVG эффект прямо себе на сайт:

HTML ⤵️
<svg viewbox="0 0 1320 300">
<text>
webstoryboy
</text>
</svg>

CSS ⤵️
svg {
font-family: sans-serif;
position: absolute;
width: 50%; height: 50%;
}
svg text {
animation: stroke 5s infinite alternate;
stroke-width: 2;
stroke: #365fa0;
font-size: 100px;
font-weight: 600;
}
@keyframes stroke {
0% {
fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1);
stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
}
70% {fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1); }
80% {fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1); stroke-width: 3; }
100% {
fill: rgba(72,138,204,1); stroke: rgba(54,95,160,0);
stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
}
}

#обучение #html #css

✅ Как сделать подпрыгивающий текст?

Создание эффекта подпрыгивания может добавить захватывающий и привлекательный вид вашему веб-дизайну. Прыгающий текстовый эффект с отражением, созданный только с помощью HTML и CSS, что делает его легко переносимым на разные веб-сайты. ⬇️

☑️ Он использует HTML-элемент span для позиционирования каждой буквы в строке и отскакивает каждую во время текстовой анимации, поэтому будьте осторожны при ее размещении.

HTML ⤵️
<div class="waviy">
<span style="--i:1">J</span>
<span style="--i:2">U</span>
<span style="--i:3">M</span>
<span style="--i:4">P</span>
<span style="--i:5">I</span>
<span style="--i:6">N</span>
<span style="--i:7">G</span>
</div>

CSS ⤵️
.waviy {
position: relative;
-webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
font-size: 48px;
}
.waviy span {
font-family: sans-serif;
position: relative;
display: inline-block;
color: #fff;
text-transform: uppercase;
animation: waviy 1.2s infinite;
animation-delay: calc(.1s * var(--i));
}
@keyframes waviy {
0%,40%,100% {
transform: translateY(0)
}
20% {
transform: translateY(-20px)
}
}

#html #css #обучение

✅ Как добавить задний фон к тексту?

Добавляя задний фон к тексту, ты не только удивишь пользователей, но и получишь очень интересно стилизованный текст. Данный эффект можно повторить с помощью трех свойств: ⬇️

☑️ color: transparent, background-clip: text, и самый важный из них это background: url, вот к нему как раз добавляется главный фон. Вы можете добавить любую картинку к тексту, просто копируя URL.

Делимся готовым кодом ниже, для создания данного эффекта с картинкой галактики: ⤵️

h1 {
font-family: sans-serif;
font-size: 70px;
text-transform: uppercase;
color: transparent;
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8P6d-nPnqKxgJ5IXUsR08HSGkg8x2haBBOg&usqp=CAU");
background-clip: text;
-webkit-background-clip: text;
background-size: 50%;
}

#обучение #css

✅ Как сделать эффект исчезновение текста?

Используя эффект анимации исчезновение блестящего текста, вы можете легко привлечь внимание к сообщению, которое хотите донести. Точнее, белый свет проходит через темный текст и заставляет текст светиться на темном фоне. ⬇️

☑️ Он работает непрерывно, поэтому ваш текст и ваше сообщение будут привлекать людей. Давайте прямо сейчас воспользуемся эффектами блестящей текстовой анимации и создадим потрясающий веб-сайт! ⤵️

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
}

h1 {
  font-family: sans-serif;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ffffff, #fff, #ffffff);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}

#обучение #css

✅ Как создать анимацию вспышки?

Эффект вспышки - очень простой способ поймать зрительный контакт с каждым пользователем. Он использует лишь одно правильно настроенное свойство text-shadow.
Данная анимация работает непрерывно, поэтому текст с этим эффектом будет легко заметить.

Делимся готовым кодом ниже для создания анимации вспышки на чистом CSS: ⤵️

body {
  background-color: #000;
  text-align: center;
}

h1 { 
  font-size: 40px;
  color: #fff;
  font-family: sans-serif;
  text-transform: uppercase;
  animation: flash 1s ease-in infinite;
}

@keyframes flash {
from {
   text-shadow: 0px 0px 10px #fff, 0px 0px 10px #fff,  0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff,0px 0px 50px #fff, 0px 0px 50px #fff, 0px 0px 50px #7B96B8, 0px 0px 150px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px -10px 100px #7B96B8, 0px -10px 100px #7B96B8;
  }
}

#практика #css

✅ Как создать разные виды курсоров?

В CSS есть множество разных типов курсоров, и все они созданы с помощью одного свойства cursor. CSS Свойство cursor определяет тип отображаемого курсора при наведении мыши на объект ⬇️

☑️ Указатель мыши на разных элементах выглядит по-разному. При этом, в CSS есть возможность напрямую указать вид курсора. Это можно сделать для любого элемента на странице. Для этого нужно указать свойство cursor и для него добавить определенное значение.

Мы создали готовый код ниже для создания трех значений курсора, которые используются чаще всего.

HTML ⤵️
<button class="progress">progress</button>
<button class="wait">wait</button>
<button class="not-allowed">not-allowed</button>

CSS ⤵️

.progress        { cursor: progress; }
.wait            { cursor: wait; }
.not-allowed     { cursor: not-allowed; }

body {
  font-family: sans-serif;
  margin-top: 100px;
  display: flex;
  justify-content: center;
}
button {
  width: 100px;
  height: 35px;
  border: 1px solid #eee;
  border-radius: 5px;
  background-color: #fff;
  margin: 0 10px 10px 0;
}
button:hover {
  background: #eee;
}

#обучение #html #css

✅ Как сделать розовый 3D текст?

Различные текстовые эффекты можно воплотить с помощью CSS свойства text-shadow, достаточно правильно его настроить. Один из примеров использования этого свойства - розовый 3D текст, он украсит любой дизайн сайта и добавление данного эффекта, точно не будет лишним. ⬇️

☑️ Помимо правильно настроенного свойства text-shadow, можно добавить шрифт "Kanit", чтобы 3D текст был более симпатичным.

Оставляем для вас готовый код ниже для создания розового 3D текста на красивом фоне: ⤵️

@import url('https://fonts.googleapis.com/css?family=Kanit:900');

body {
background-color: #ecc;
text-align: center;
}
h1{
color: #fff;
font-family: "Kanit";
font-size: 65px;
text-shadow: 0 1px 0 #e4adad, 0 2px 0 #e1a6a6, 0 3px 0 #df9e9e, 0 4px 0 #dc9696, 0 5px 0 #da8f8f, 0 6px 0 #d78787, 0 7px 0 #d58080, 0 8px 0 #d27878, 0 0 5px rgba(237, 154, 154, .05), 0 -1px 3px rgba(237,154,154,.2), 0 9px 9px rgba(237,154,154, .5),0 12px 12px rgba(237, 154, 154, .5), 0 15px 15px rgba(237,154,154, .5);
}

#практика #css

✅ Как создать градиентную анимацию текста?

Сегодня разберем создание градиентного переливания текста. Данный эффект очень интересно смотреться на черном фоне, хотя если поменять градиентное переливание на другие цвета, можно будет добавлять и на белый фон. ⬇️

☑️ Так вот, для создания градиентной анимации, помогут свойства background: linear-gradient, background-size и background-clip: text. Но чтобы запустить анимацию, нужно добавить keyframes и правильно их настроить.

Делимся уже готовым HTML & CSS кодом ниже для создания прекрасной градиентной анимации: ⤵️

HTML ⤵️

<h1 id="background">@code_ready</h1>

CSS ⤵️
body {
background-color: black;
}

#background {
animation: gradient 10s linear infinite;
background: linear-gradient(to right, rgb(76, 217, 105), rgb(52, 170, 220), rgb(88, 86, 217), rgb(255, 45, 83), rgb(255, 45, 83), rgb(88, 86, 217), rgb(52, 170, 220), rgb(76, 217, 105));
background-size: 400%;
-webkit-background-clip: text;
color: rgba(255, 255, 255, .1);
font-family: sans-serif;
font-size: 45px;
}
@keyframes gradient {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}

#обучение #html #css