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

Делимся готовым HTML и CSS кодом ниже для создания интересно стилизованной анимации фигуры. Она бесконечно повторяется по одинаковой траекторией и создает фигуру напоминающею лужу:

HTML ⤵️

<svg viewbox="0 0 999 999">
    <path class="path" fill="#333" stroke="white" stroke-width="2" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>



CSS ⤵️

body {
  background: #333;
}
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: path 5s linear alternate infinite;
}
@keyframes path {
  from {
    stroke-dashoffset: 999;
  }
  to {
    stroke-dashoffset: 0;
  }
}



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

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

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

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

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

span {
  font: 700 4em/1 "Oswald", sans-serif;
  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%; }
}

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

Продуктивный отдых)

@code_ready | #мем

Казалось, что успех близок)

@code_ready | #мем

Не украл, а вдохновился архитектурой кода

@code_ready | #мем

✅ Как создать 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

HTTPS паркинга не найдется?

@code_ready | #мем

✅ Как создать тройную тень?

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

Мы делимся готовым CSS кодом ниже для создания тройной тени, данный код собой представляет только саму тень, стилизацию самого текста выбирайте вручную) ⤵️

h1 { 
  text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px   30px 0 #ffd217, 40px 40px 0 #5ac7ff; 
}

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

@code_ready | #мем

✅ Создание шрифта Bungee Shade

Bungee Shade - очень красивый шрифт, который точно украсит и сделает уникальным любой текст. Для его добавления нужно прописать свойство font-family и импортировать его с google fonts. ⬇️

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

Ниже вы найдете готовый CSS код для добавления шрифта Bungee Shade: ⤵️

@import url('//fonts.googleapis.com/css?family=Bungee+Shade');

h1 {
  color: #2c3e50;
  margin-top: 10%;
  font-size: 55px;
  font-family: 'Bungee Shade';
  text-align: center;
  margin: auto;
}

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

Больше в этот бар не пойду

@code_ready | #мем

Хоть кто-то указывает правду

@code_ready | #мем

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

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

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

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