Code Ready | 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 | #мем

Как легко прокачать навыки верстки и найти работу? Присоединяйся к каналам опытного верстальщика: 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 |#мем