✅ Как сделать анимированную 3D тень?

Существуют различные варианты hover эффектов, но не все помещаются буквально в пару строк кода. Данный эффект создан с помощью html атрибута data-text, css псевдокласса hover и псевдоэлементов аfter, before.

☑️ Атрибут data-text добавляют для создания второй тени, после остается добавить css стили и создать саму тень с помощью after и before. А под конец анимировать движение тени при нажатии на текст.

Оставляем для вас HTML & SCSS код, для создания крутого hover эффекта: ⤵️

<h1 data-text="ABC"></h1>

h1{
    position: relative;
    font-size: 10em;
    letter-spacing:10px;
    font-family: sans-serif;
    display:table;
    margin:40px auto;
    cursor:pointer;
    transition:.6s;
    &:hover {
        transform:translate(-10px,-10px);
    }
    &::before, &::after {
        content:attr(data-text);
        transition:.6s;
    }
    &::before {
        position: absolute;
    text-shadow:
     0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
    -webkit-mask:repeating-linear-gradient(45deg, transparent 0 3px, rgba(0,0,0,0.5) 0 6px);
            mask:repeating-linear-gradient(45deg, transparent 0 3px, rgba(0,0,0,0.5) 0 6px);
    }
    &:hover::before {
        text-shadow:
     1px 1px, 2px 2px, 3px 3px, 4px 4px, 5px 5px, 6px 6px, 7px 7px, 8px 8px, 9px 9px, 10px 10px;
    }
  }

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

@code_ready | #мем

✅ Создание крутого баннера

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

<section>
    <h2>Black <br> <span>Friday</span></h2>
    <div class="black"></div>
  </section>

section {
    font-family: 'Poppins',sans-serif;
    position: relative;
    width: 100%;
    height: 100vh;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .black {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        mix-blend-mode: difference;
    }
    h2 {
        font-size: 20vw;
        text-align: center;
        line-height: 0.75em;
        text-transform: uppercase;
        font-weight: 800;
    }
    span {
        font-size: 18.2vw;
        color: transparent;
        -webkit-text-stroke: 0.3vw #000;
    }
}

"use strict";
let black = document.querySelector('.black');
window.onmousemove = function(e) {
    let x = e.clientX;
    black.style.left = x + 'px';
}

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

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

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

✅ 2 новых фронтенд канала

29 ноября мы выпускали пост про создание новых каналов, они должны были быть созданы 10 декабря, но к этому времени мы не успели наполнить каналы контентом. 👾

Поэтому на зимних каникулах ждём релиза, примерно 25 декабря будет создан 1 из новых каналов сразу с готовым контентом. Удачи 💥

@code_ready | #новость

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

API EyeDropper предоставляет механизм для создания инструмента "Пипетка". С помощью этого инструмента пользователи могут брать образцы цветов со своих экранов, в том числе за пределами окна браузера.

*Экспериментальная технология, на данный момент поддержка составляет 31.83%

<img src="https://kinderbooks.ru/img/klassnye-kartinki-iz-multikov_69.jpg" alt="img">
  <div class="result">@code_ready</div>
  <button class="btn">Выбрать цвет</button>

* {text-align: center; font-weight: 600;}

const button = document.querySelector('.btn');
const result = document.querySelector('.result');

const colorPicker = async () => {
  const eyeDropper = new EyeDropper();
  const {sRGBHex} = await eyeDropper.open();
  result.innerHTML = sRGBHex;
}
button.addEventListener('click', colorPicker);

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

✅ Горячие клавиши для быстрой верстки

• Ctrl + Alt + Shift + ↓ / ↑ – Выделяет строки вверх или вниз и также ставит курсор сразу в нескольких местах.

• Ctrl + Backspace — Удаляет всё слово стоящее перед курсором.

• Ctrl + Delete — Удаляет всё слово стоящее после курсора.

@code_ready | #клавиши

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

Задача простая — вырезать текст из какого-то блока нажатием кнопки. Довольно таки удобно, вместо выделения и копирования просто нажать одну кнопку и нужный текст уже в буфере обмена.

☑️ Чтобы долго не объяснять, мы оставляем ниже готовый код, написанный на HTML и JavaScript, для создания кнопки вырезания в буфер обмена.

<textarea type="text" class="content"></textarea>
<button type="button" class="cut">Вырезать</button>

document.querySelector('.cut').addEventListener('click', () => {
 const txt = document.querySelector('.content').value;
 navigator.clipboard.writeText(txt)
   .then(() => {
     document.querySelector('.content').value = "";
   });
});

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

✅ Как создать блестящий hover эффект?

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

☑️ Создать его максимально просто, но тем не менее выглядит классно. Для его создания нужен 1 псевдокласс :hover, там меняем цвет и добавляем text-shadow.

<h1>@code_ready</h1>

body {background: #262626;}
h1 {
  font-size: 60px;
  font-family: sans-serif;
  font-weight: 600;
  text-align: center;
  color: #666;
  transition: 1s;
  cursor: pointer;
}
h1:hover {
  color: #ffee10;
  text-shadow: 0 0 10px #ffee10;
}

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

✅ Как создать loader на сайт?

Анимация довольно простая, но очень эффективная. Занимает немного строк кода в Html и Css. Всё что нужно, это создать keyframes анимацию и с помощью transform менять размер каждого блока в два раза. ⬇️

<div class="loader">
  <span class="loader__element"></span>
  <span class="loader__element"></span>
  <span class="loader__element"></span>
</div>

.loader {
  display: flex;
  align-items: center;
  justify-content: center;  
}
.loader__element {
  border-radius: 100%;
  border: 5px solid #555;
  margin: calc(5px *2);
}
.loader__element:nth-child(1) {
  animation: preloader .6s ease-in-out alternate infinite;
}
.loader__element:nth-child(2) {
  animation: preloader .6s ease-in-out alternate .2s infinite;
}
.loader__element:nth-child(3) {
  animation: preloader .6s ease-in-out alternate .4s infinite;
}
@keyframes preloader {
  100% { transform: scale(2); }
}

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

@code_ready |#мем

✅ Как создать движущею тень?

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

☑️ Она поможет привлечь внимание к особому тексту и создана только с помощью HTML и SCSS кода.

<p>
  <span>M</span>
  <span>O</span>
  <span>V</span>
  <span>E</span>
</p>

p{
  text-align: center;
  font-family: Futura, sans-serif;
  font-weight: 900;
  font-size: 80px;
  @keyframes ani{
    0% {transform: translate3d( 0,0,0); text-shadow: 0em 0em 0 lightblue; color: black;}
    100% {transform: translate3d( 0.08em,-0.08em,0);text-shadow: -0.08em 0.08em lightblue;color: black;}
  }
  span{
    position: relative;
    display: inline-block;
    animation: ani 1s infinite alternate cubic-bezier(0.860, 0.000, 0.070, 1.000);
    @for $i from 1 through 3{
      &:nth-last-child(#{$i}n){ animation-delay: -1s*$i/3/2;}
    }
  }
}

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

@code_ready | #мем