Code Ready | Frontend

Совет фронтендерам: уважайте свое время В Html Gram собраны готовые и уникальные codepen решения на каждый день. От эффектов при наведении до 3D анимации. Учитесь, практикуйтесь и прокачивайте свое портфолио вместе с @HtmlGram

✅ Шпаргалка для Flexbox позиционирования Flexbox - позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое. @code_ready | #css #шпаргалка

@code_ready |#мем

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

Как быстро собрать такую форму оплаты? Легко! Фронтенд Гайд - это канал для верстальщиков, в котором публикуют: ✓ Готовый код ✓ Макеты для верстки ✓ Тесты на знание кода Ускорь работу над своим проектом!

Как вам посты на этой неделе? 🤔

✅ Как создать блестящий 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

WEBIK - Путеводитель в мире web'a! Каждый уважающий себя фронтендер подписан на нас, ведь у нас найдутся: ✓ интересные рецепты кода ✓ смешные мемы ✓ позновательные викторины ✓ ссылки на полезные ресурсы ✓ разбор вопросов с собеседований Подписывайся на @gki_webik_ru и стань профессиональным веб разработчиком!

✅ Как вырезать текст в буфер обмена нажатием на кнопку? Задача простая — вырезать текст из какого-то блока нажатием кнопки. Довольно таки удобно, вместо выделения и копирования просто нажать одну кнопку и нужный текст уже в буфере обмена. ☑️ Чтобы долго не объяснять, мы оставляем ниже готовый код, написанный на 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

✅ Горячие клавиши для быстрой верстки • Ctrl + Alt + Shift + ↓ / ↑ – Выделяет строки вверх или вниз и также ставит курсор сразу в нескольких местах. • Ctrl + Backspace — Удаляет всё слово стоящее перед курсором. • Ctrl + Delete — Удаляет всё слово стоящее после курсора. @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;
}
.btn {
  height: 45px;
  width: 110px;
  background-color: blue;
  color: white;
  cursor: pointer;
}

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

✅ 2 новых фронтенд канала 29 ноября мы выпускали пост про создание новых каналов, они должны были быть созданы 10 декабря, но к этому времени мы не успели наполнить каналы контентом. 👾 Поэтому на зимних каникулах ждём релиза, примерно 25 декабря будет создан 1 из новых каналов сразу с готовым контентом. Удачи 💥 @code_ready | #новость

✅ Как создать анимацию появления текста? 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

‼️ Ребят, новая функция телеграмма меня просто поражает, теперь можно смотреть откуда пришли новые подписчики. Тем более добавили вкладку "похожие каналы", с помощью неё можно смотреть около 80 разных каналов на одинаковые тематики. ❤️

✅ Создание крутого баннера Удивляйте каждого с впечатляющим баннером, созданным с использованием 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;
    }
}

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

@code_ready | #мем

✅ Как сделать анимированную 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