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

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

☑️ Делимся ниже HTML и CSS кодом, для создания крутых анимированных букв при наведении:

HTML ⤵️

<div class="animated">
  <div class="let">A</div>
  <div class="let">n</div>
  <div class="let">i</div>
  <div class="let">m</div>
  <div class="let">a</div>
  <div class="let">t</div>
  <div class="let">e</div>
  <div class="let">d</div>
</div>

CSS ⤵️

body{ background-color: #000; }

.animated{
  display: flex;
  margin-top: 20%;
  align-items: center;
  justify-content: center;
}
.let{
  color: #fff;
  font-size: 70px;
  font-family: cursive;
  letter-spacing: 3px;
  font-weight: 600;
  transition: 0.5s;
  cursor: pointer;
}
.let:hover{
  transform: translateY(-1rem);
  background: -webkit-linear-gradient(120deg, hsl(190, 100%, 50%), hsl(319, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



#практика #html #css

✅ Как создать озвучку текста?

SpeechSynthesis - это интерфейс Web Speech API, который используется для перевода текста в речь. Он содержит содержимое, которое должен прочитать речевой сервис, и информацию о том, как его читать (например, язык, высота тона и громкость). ⬇️

☑️ Делимся уже готовым HTML, CSS и JS кодом ниже для создания озвучки текста, с помощью элементов textarea, button и свойства SpeechSynthesis:

HTML ⤵️

<textarea></textarea>
<button>Speak</button>

SCSS ⤵️

button {
  width: 85px;
  background-color: blue;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
textarea, button {
  border: 1.5px solid #000;
  border-radius: 5px;
  outline: none;
  padding: 8px;
  display: block;
  margin: 0 auto;
  margin-top: 15px;
}

JavaScript ⤵️

const button = document.querySelector('button');
const text = document.querySelector('textarea');

button.addEventListener('click', () => {
  const utterance = new SpeechSynthesisUtterance(text.value);
  speechSynthesis.speak(utterance);
});

@code_ready | #обучение #html #css #js

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

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

☑️ Hover - самый важный и нужный псевдокласс в css для создания быстрых анимированных действий, срабатывает когда пользователь наводит на элемент мышью.

Оставляем готовый CSS код ниже, для создания кнопки с hover эффектом. При наведении кнопка бликом меняет свой градиентный цвет на другой: ⤵️

button {
  width: 280px;
  height: 80px;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  display: block;
  margin: 20% auto;
  border: none;
  background-size: 300% 100%;
  border-radius: 50px;
  transition: all 1s ease-in-out;
  cursor: pointer;
}
button:hover {
  background-position: 100% 0;
  transition: all 1s ease-in-out;
}
button {
  background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
  box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}

@code_ready | #обучение #css

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

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

Мы делимся вариантом эффекта при наведении. В этом коде вы можете добавить или поменять все стили под себя:

HTML ⤵️

<h1><span>I</span>M<span>POSSIBLE</span></h1>



CSS ⤵️

h1{
  color: #5b5b5b;
  font-size: 50px;
  font-family: monospace;
  letter-spacing: 7px;
  text-align: center;
  margin-top: 20%;
  cursor: pointer;
}
h1 span{
  transition: .8s all;
}
h1:hover span:nth-child(1){
  margin-right: 5px;
}
h1:hover span:nth-child(1):after{
  content: "'";
}
h1:hover span:nth-child(2){
  margin-left: 30px;
}
h1:hover span{
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff;
}



#практика #html #css

✅ Как сделать живой эффект для текста?

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

☑️ Это не простая задача, поэтому мы делимся уже готовым HTML & CSS кодом ниже для добавления видео внутрь текста:

<div class="title">
    <h1>simon</h1>
 </div> 

.title {
  color: #FFF;
  font-family: sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  font-size: 150px;
  font-weight: 800;
  text-transform: uppercase;
  background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
} 

@code_ready | #обучение #html #css

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

Hover кнопка - кнопка которая при наведении становится анимированной и делает интересные эффекты. С помощью hover можно воплотить свои крутые идеи.

☑️ Ну а мы оставляем HTML & CSS код ниже, для создания двух кнопок с крутым эффектом. (Кода достаточно много) ⤵️

<div class="buttons">
    <button class="close">Close</button>
    <button class="offset">Offset</button>
  </div>

body {
  background: hsl(227, 10%, 10%);
  font: 300 30px 'Fira Sans', sans-serif;
  display: flex;
  justify-content: center;
  margin-top: 20%;
}
.close:hover, .close:focus {
  box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);  
}
.offset {  
  box-shadow: 
    0.3em 0.3em 0 0 var(--color),
    inset 0.3em 0.3em 0 0 var(--color);
  &:hover, &:focus {
    box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
  }
}
$colors: ( 
  close: #ff7f82,
  offset: #19bc8b
);
@each $button, $color in $colors {
  .#{$button} {
    --color: #{$color};
    --hover: #{adjust-hue($color, 45deg)};
  }
}
button {  
  background: none;
  border: 2px solid;
  font: inherit;
  margin: 1em;
  padding: 1em 2em;
  color: var(--color);
  transition: 0.75s;
  cursor: pointer;
  &:hover,
  &:focus { 
    border-color: var(--hover);
    color: #fff;
  }
}

@code_ready | #практика #html #css

✅ Как создать анимированное перечеркивания текста?

В CSS существует свойство line-through — перечёркнутый текст, но к сожалению оно не добавляется анимированное. Поэтому предлагаем сделать тебе интересную анимацию перечеркивания текста: ⬇️

☑️ Чтобы сделать данный эффект, необходимы :hover, ::after и ::before, это достаточно долго объяснять, соответственно мы оставляем уже готовый код для его создания. ⤵️

<ul>
   <li><span>Home</span></li>
   <li><span>About us</span></li>
   <li><span>Contact</span></li>
</ul>

body {
  margin: 0;
  background: #333;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 25px;
  font-weight: 300;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}
li {
  display: inline-block;
  padding: 0 20px;
}
span {
  position: relative;
  cursor: pointer;
}
span:before, span:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 1px;
  top: 50%;
  margin-top: -0.5px;
  background: #fff;
}
span:after {
  right: 2.5px;
  background: #fff;
  transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
span:hover:before {
  background: #fff;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
span:hover:after {
  background: transparent;
  width: 100%;
}

@code_ready | #обучение #html #css

✅ Как создать неоновый текст?

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

☑️ Что полезно в text-shadow, так это то, что мы можем применить к нему несколько теней, просто разделив их запятыми.

Ниже вы найдете готовый CSS код для создания неонового текста: ⤵️

body {
  background-color: #000;
}
h1 {
  font-size: 100px;
  color: #fff;
  text-transform: uppercase;
  font-family: sans-serif;
  text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #b303f8, 0 0 80px #b303f8, 0 0 90px #b303f8, 0 0 100px #b303f8, 0 0 150px #b303f8;
  text-align: center;
}

@code_ready | #обучение #css

✅ Как создать анимацию подчеркивания текста?

В CSS есть свойство text-decoration: underline , оно позволяет подчеркнуть текст, но не создает анимированного подчеркивания. ⬇️

☑️ Для его создания нам необходимы псевдоэлементы after, before и псевдокласс hover. Все стили в теге a, это дизайн текста, бонусом мы оставляем эффект огня для текста: ⤵️

body {
  background-color: #000;
}
a {
  color: #fff;
  display: inline-block;
  font-size: 70px;
  font-family: sans-serif;
  font-weight: 600;
  text-decoration: none;
  margin-top: 20%;
  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;
}
a:after {
  background-color: #f66d52;
  display: block;
  content: "";
  height: 5px; 
  width: 0%;
  -webkit-transition: width .5s ease-in-out;
  transition: width .5s ease-in-out;
}
a:hover:after {
  width: 100%;
}

@code_ready | #практика #css

✅ Создание невероятной SCSS анимации

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

☑️ Делимся уже готовым HTML и SCSS кодом, для создания крутой анимации: ⬇️

  <span>W</span>
  <span>E</span>
  <span>E</span>
  <span>K</span>
  <span>E</span>
  <span>N</span>
  <span>D</span>

@import url("https://fonts.googleapis.com/css2?family=Titan+One&display=swap");
  span {
    -webkit-text-stroke-width: 1.25px;
    -webkit-text-stroke-color: #000;
    font-size: 100px;
    text-shadow: 0 0px #f3c623, 0 0px #f2aaaa;
    transform: translate(0, 100%) rotate(4deg);
    animation: jump 2s ease-in-out infinite;
    display: inline-block;
    font-family: "Titan One", cursive;
    color: #fff;
    @for $i from 1 through 7 {
      &:nth-child(#{$i}) {
        animation-delay: 120ms * $i;
     }
  }
}
@keyframes jump {
  33% {
    text-shadow: 0 60px #f37121, 0 150px #f2aaaa;
  }
  50% {
    transform: translate(0, 0) rotate(-4deg);
    text-shadow: 0 0px #8fc0a9, 0 0px #84a9ac;
  }
  66.67% {
    text-shadow: 0 -60px #d54062, 0 -150px #8fc0a9;
  }
} 

@code_ready | #обучение #html #scss

✅ Как создать анимацию появления текста?

Keyframes — это «ключевые кадры», на основе которых создается анимация для веб-страниц. Они показывают, как будет выглядеть анимированный элемент в конкретный момент времени.

☑️ С помощью этого можно создавать невероятные анимации. Явный пример использования keyframes, это анимация появления текста. Она создана лишь с помощью 25 строк SCSS кода и 1 строки в HTML. ⬇️

<h1>LUMINANCE</h1>

body {
    height: 100%;
    background: #333641;
}
h1 {
    font-weight: 400;
    background: 50% 100% / 50% 50% no-repeat radial-gradient(ellipse at bottom, #fff, transparent, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 100px;
    text-align: center;
    font-family: "Source Sans Pro", sans-serif;
    animation: reveal 3000ms ease-in-out forwards 200ms, glow 2500ms linear infinite 2000ms;

    @keyframes reveal {
        80% { letter-spacing: 8px;}
        100% { background-size: 200% 200%;}
    }
    @keyframes glow {
        40% { text-shadow: 0 0 8px #fff;}
    }
}

@code_ready | #обучение #scss

✅ Как создать крутой hover эффект для меню?

Меню — набор ссылок на другие страницы сайта, либо на конкретные разделы одной страницы. Если его круто стилизовать, он будет привлекать больше внимания. ⬇️

Данный эффект сделан с помощью свойства border и псевдокласса hover, также для плавной анимации добавляется transition. Ниже делимся готовым HTML и CSS кодом для создания меню с hover эффектом.

<nav>
  <a class="link" href="#">Home</a>
  <a class="link" href="#">About</a>
  <a class="link" href="#">Contact</a>
</nav>

nav {
  padding: 24px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  background: #3fa46a;
}
.link {
  transition: 0.7s ease;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  border-top: 4px solid #3fa46a;
  border-bottom: 4px solid #3fa46a;
  padding: 20px 0;
  margin: 0 20px;
}
.link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0; 
}

@code_ready | #обучение #html #css

✅ Как создать Hover Slide Effect?

Hover кнопка - кнопка которая при наведении становится анимированной и делает интересные эффекты. С помощью hover можно воплотить свои крутые идеи.

☑️ Ну а мы оставляем HTML & CSS код ниже, для создания двух кнопок с крутым эффектом. (Кода достаточно много) ⤵️

<div id="outer">
  <div class="slide left">SLIDE INSIDE </div>
  <div class="slide diagonal">SLIDE DIAGONAL </div>
</div>

body {background: #162944;}
.slide {
  font-family: sans-serif;
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  padding: 18px 36px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #D80286;
  -webkit-transition: ease-out 1s;
  transition: ease-out 1s;
}
.left:hover {
  box-shadow: inset 0 0 0 50px #D80286;
}
.diagonal:hover {
  box-shadow: inset 400px 50px 0 0 #D80286;
}
#outer {
  display: flex;
  justify-content: space-between;
  width: 400px;
  margin: 100px auto;
}

@code_ready | #практика #html #css

✅ Как создать цветной след от курсора

Анимация группы переливающихся квадратиков, движущихся за курсором. Для его создания оставляем SCSS и JavaScript код ниже. ⬇️

.loader-container {
  width:100px;
  height:100px;
  position: absolute;
  animation: scaleUp .5s linear;
  opacity: 0;
  transform: scale(0);
  .loader {
    background: #fff;
    animation: filterHue 2.5s linear infinite;
    height:100%;
    width: 100%;
  }
}
  @keyframes scaleUp {
  50% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(0.25) }
  }

window.addEventListener("mousemove", function (e) {
  var to_append = document.getElementsByClassName('loader-container')[0];
  var all = document.getElementsByClassName('loader-container');
  var parent_div = document.createElement('div');
  parent_div.className = "loader-container";
  var inner_div = document.createElement('div');
  inner_div.className = "loader";
  parent_div.appendChild(inner_div)
  var d = document.body.appendChild(parent_div);
  parent_div.style.left = (e.clientX - 50)+'px';
  parent_div.style.top = (e.clientY - 50)+'px';
  if(document.getElementsByClassName('loader-container').length > 50) {
    document.body.removeChild(to_append)
  }
});

@code_ready | #практика #scss #js

✅ Делаем счётчик кликов на JS

Простой интерактивный счетчик, который увеличивается при каждом клике пользователя. Когда пользователь наводит на элемент, его цвет меняется, чтобы указать на возможность взаимодействия. ⤵️

<div id="counter">0</div>

body {text-align: center; font-family: 'Segoe UI';}
#counter {
    font-size: 2.5em;
    cursor: pointer;
    padding: 10px 30px;
    border: 2px solid #3498db;
    border-radius: 10px;
    transition: background-color 0.3s;
    user-select: none;
    display: inline-block;
    color: #3498db;
}
#counter:hover {background-color: #3498db;color: #fff;}

let count = 0;
const counterElement = document.getElementById('counter');
counterElement.addEventListener('click', function() {
    count++;
    counterElement.textContent = count;
});

@code_ready | #обучение #js

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

Hover кнопка - кнопка которая при наведении становится анимированной и делает интересные эффекты. С помощью hover можно воплотить свои крутые идеи.

☑️ Я делюсь HTML & SCSS кодом ниже, для создания двух кнопок с крутым эффектом. (Кода достаточно много) ⤵️

<div class="buttons">
    <button class="fill">Fill In</button>
    <button class="pulse">Pulse</button>
  </div>

body {
    color: #fff;
    background: hsl(227, 10%, 10%);
    text-align: center;
  }
button {  
    font-size: 20px;
    background: none;
    border: 2px solid;
    margin: 1em;
    padding: 1em 2em;
    color: var(--color);
    transition: 0.75s;
    cursor: pointer;
}
.fill:hover, .fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
  border-color: var(--hover);
  color: #fff;
}   
.pulse:hover, .pulse:focus {
  animation: pulse 1s;
  box-shadow: 0 0 0 2em transparent;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--hover); }
}
$colors: (fill: #a972cb, pulse: #ef6eae,);
@each $button, $color in $colors {
  .#{$button} {
    --color: #{$color};
    --hover: #{adjust-hue($color, 45deg)};
  }
}

@code_ready | #обучение #html #scss

✅ Создание разных типов курсора

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

В этом посте, я показывал все типы курсоров которые существуют в css. А снизу пример кода, как использовать эти свойства.

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

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

button {
    width: 100px;
    height: 35px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fff;
}

@code_ready | #обучение #css

✅ Создание неонового текста

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

К text-shadow мы можем применить к нему несколько теней, просто разделив их запятыми.

body {
  background-color: #000;
}
h1 {
  font-size: 100px;
  color: #fff;
  text-transform: uppercase;
  font-family: sans-serif;
  text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #b303f8, 0 0 80px #b303f8, 0 0 90px #b303f8, 0 0 100px #b303f8, 0 0 150px #b303f8;
  text-align: center;
}

👉 @code_ready | #обучение #css