Code Ready | Frontend

Как легко прокачать навыки верстки и найти работу? Присоединяйся к каналам опытного верстальщика: 1. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе. 2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду Научись и зарабатывай на верстке!

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

Совет фронтендерам: уважайте свое время В 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