Code Ready | Frontend

@code_ready | #консоль

✅ Как создать эффект следующий за курсором? Использую данный 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

Как же круто быть сеньором!😎 Удаленка, релокация в ЕС/США, зп в долларах, зимовка в Тайланде, топовые гаджеты от компании - вот что доступно для Senior инженеров, и не важно на чем ты пишешь - JS / PHP / Python, выбирай что по душе. Главное кодить, кодить и еще раз кодить! Вот тебе подборочка каналов, которая облегчит твой путь🔝: ✅Senior Frontend - все про современный фронтенд ✅Frontendinterview - подготовка к собеседованиям по фронту ✅WebCraft - PHP и все что связано с веб разработкой ✅Frontender Libs - всё про библиотеки и готовые решения для фронтенда ✅Python Practics - обучающий канал по Python

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

😘 Ваш Level Up в мире Frontend-разработки Pro Frontend | Amake — канал для каждого, кто стремится проверить и углубить свои знания, там публикуют: 😀 Тесты на понимание кода с объяснениями 🎄 Разборы задач и вопросов с собеседований 😘 Авторские обучающие статьи простым языком 😀 Макеты и эффекты для ваших пет-проектов 😀 @amake_frontend

@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

​​​​HTML, CSS, JS, Node.JS, 🤯 - пора бы всё объединить! Все для изучения веба 👉 Фронтенд - самый большой канал для изучения фронта 👉 Верстка - все о верстке 👉 Node.JS - для тех кто хочет писать бэк на JS Собрано всё, проверяй🔥

✅ Горячие клавиши для быстрой верстки • Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым. • Ctrl + ] / [ — Добавляет или удаляет отступ строки. • Ctrl + Shift + ← / → — Выделяет слова после или перед курсором. @code_ready | #обучение

✅ Шпаргалка типов курсора в CSS CSS-свойство cursor устанавливает курсор мыши, если таковой имеется, для отображения, когда указатель мыши находится над элементом. Вы можете указать тип курсора с помощью ключевого слова или загрузить свой значок. @code_ready | #css #шпаргалка

✅ Скоро новогодняя ночь Данный канал был создан 24 августа 2023 года, и за такой небольшой срок мы набрали 1500 подписчиков, всем спасибо 😇. Но на этом не стоит останавливаться, впереди ещё много всего интересного. Ну а скоро 2024 год, всех поздравляю, радости желаю🎉 А также предлагаю написать новогодний комментарий про ваши цели на 2024 год, может даже единомышленников соберем и создадим отдельный чат?) С наступающим Новым годом! 🎄

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

✅ Шпаргалка типов курсора в CSS CSS-свойство cursor устанавливает курсор мыши, если таковой имеется, для отображения, когда указатель мыши находится над элементом. Вы можете указать тип курсора с помощью ключевого слова или загрузить свой значок. @code_ready | #css #шпаргалка

Я ПРОТИВ ПЛАТНЫХ КУРСОВ Я самоучка, прошел весь путь до Senior Frontend разработчика совершенно бесплатно и без профильного образования. У себя на канале рассказываю: - Где брать опыт и как искать работу? - Как освоить сложную теорию? - Какие ресурсы использовать для обучения? Изучайте Frontend правильно ✈️ Telegram Reactify — сложные темы простым языком. Теория, советы, истории с работы. 📹 YouTube Reactify — изучаем JavaScript, TypeScript, React, CSS. Создаем приложение новостей или курса криптовалюты. 🎓 Academy Reactify - платформа для обучения. Бесплатные курсы, тесты, практика и экзамены. [СКОРО]

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

@code_ready | #мем