✅ 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 | #мем

✅ Как создать крутой hover эффект для меню?

Меню — набор ссылок на другие страницы сайта, либо на конкретные разделы одной страницы. Если его круто стилизовать, он будет привлекать больше внимания. ⬇️

Данный эффект сделан с помощью свойства border и псевдокласса hover, также для плавной анимации добавляется transition. Ниже делимся готовым HTML и CSS кодом для создания меню с hover эффектом.

<nav>
  <a class="link" href="#">Home</a>
  <a class="link" href="#">About</a>
  <a class="link" href="#">Contact</a>
</nav>

nav {
  padding: 24px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  background: #3fa46a;
}
.link {
  transition: 0.7s ease;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  border-top: 4px solid #3fa46a;
  border-bottom: 4px solid #3fa46a;
  padding: 20px 0;
  margin: 0 20px;
}
.link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0; 
}

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

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

Данная анимация представляет собой смену цвета блока через плавный переход. Туда можно вставить любой текст и он также будет появляться вместе с цветом. ⬇️

☑️ Ниже мы оставляем пару строк HTML и CSS кода для создания slide up анимации.

<div class="box">
  <div class="hid-box">
</div>

.box {
  height: 90px;
  width: 100px;
  margin: auto;
  overflow: hidden;
  background: #b6feb4;
  cursor: pointer;
}
.hid-box {
  top: 100%;
  position: relative;
  transition: all .7s ease-out;
  background: #b8dbf1;
  height: 100%;
}
.box:hover > .hid-box{
  top: 0;
}

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

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

• Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым.

• Ctrl + ] / [ — Добавляет или удаляет отступ строки.

• Ctrl + Shift + ← / → — Выделяет слова после или перед курсором.

@code_ready | #клавиши

✅ Как создать Hover Slide Effect?

Hover кнопка - кнопка которая при наведении становится анимированной и делает интересные эффекты. С помощью hover можно воплотить свои крутые идеи.

☑️ Ну а мы оставляем HTML & CSS код ниже, для создания двух кнопок с крутым эффектом. (Кода достаточно много) ⤵️

<div id="outer">
  <div class="slide left">SLIDE INSIDE </div>
  <div class="slide diagonal">SLIDE DIAGONAL </div>
</div>

body {background: #162944;}
.slide {
  font-family: sans-serif;
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  padding: 18px 36px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #D80286;
  -webkit-transition: ease-out 1s;
  transition: ease-out 1s;
}
.left:hover {
  box-shadow: inset 0 0 0 50px #D80286;
}
.diagonal:hover {
  box-shadow: inset 400px 50px 0 0 #D80286;
}
#outer {
  display: flex;
  justify-content: space-between;
  width: 400px;
  margin: 100px auto;
}

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

@code_ready | #мем