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

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

✅ Шпаргалка для CSS Grid

CSS Grid Layout — представляет собой двумерную систему сеток в CSS. Это пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки. Элементы могут быть помещены в грид в пределах линий этих колонок и строк.

@code_ready | #css #шпаргалка

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

Использую данный JavaScript код, помимо обычного 3D текста, можно создать другие крутые эффекты. Курсор следует за движениями мышки, тем самым заставляет эффект двигаться за ним.

Делимся уже готовым кодом ниже, для создания эффекта, который движется за курсором. ⤵️

<h1>Mousemove</h1>

h1{
  font-size:72px;
  font-family:'Verdana';
  text-align:center;
  text-transform:uppercase;
}

jQuery(document).ready(function(){
   $('h1').mousemove(function(e){
     var rXP = (e.pageX - this.offsetLeft-$(this).width()/2);
     var rYP = (e.pageY - this.offsetTop-$(this).height()/2);
     $('h1').css('text-shadow', +rYP/10+'px '+rXP/80+'px rgba(227,6,19,.8), '+rYP/8+'px '+rXP/60+'px rgba(255,237,0,1), '+rXP/70+'px '+rYP/12+'px rgba(0,159,227,.7)');
   });
});

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