Code Ready | Frontend

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

Больше в этот бар не пойду @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 | #мем

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

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

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

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

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

Не украл, а вдохновился архитектурой кода @code_ready | #мем

👋 Добро пожаловать в Code Ready! Мы решили не ограничиваться одними эффектами и расширяем наш канал. Теперь, здесь публикуются только самые интересные опросы, крутые IT мемы, туториалы и не только. Навигация: #обучение — эффект или анимация с кодом и объяснением #теория — познавательные теории про Frontend #мем — интересный мем про IT тематику #практика — эффект или анимация только с готовым кодом

Казалось, что успех близок) @code_ready | #мем

Продуктивный отдых) @code_ready | #мем

✅ Как создать анимацию 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

✅ Как создать плавную анимацию фигуры? Делимся готовым 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;
  }
}

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