Формошлёп
@frontbox
3.39K subscribers
144 photos
90 videos
159 links
Шлёпаем формы и красим кнопки...

Блог про фронтенд — просто, понятно и с юмором. Всех обнял, приподнял, пошел пилить для вас годноту)

Связь: @advertos
Download Telegram
About
Blog
Apps
Platform
Join
Формошлёп
3.39K subscribers
Формошлёп
This media is not supported in your browser
VIEW IN TELEGRAM
Создаем видео-фон для блока

Иногда на лендингах, особенно на первом экране, нужно запилить видео-фон, а над ним какой-то текст, давайте разберем, один из способов, как это можно реализовать.

HTML-разметка:
<div class="container">
  <video autoplay muted loop playsinline>
    <source src="video.mp4" type="video/mp4">
  </video>
  <h1>ФОРМОШЛЁП</h1>
</div>


В контейнере разместили текст и видео.

Стилизация:
.container {
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: brightness(0.3) contrast(1.1);
}


Контейнер на всю высоту экрана, выравниваем по центру, обрезаем лишнее.
Видео растягиваем на 100%, ставим на "на задний план" и затемняем, чтобы сделать текст более читаемым.

В принципе, это всё — небольшой набор стилей, чтобы добавить видео-фон на страницу)

Посмотреть код можно здесь.
👍22🔥7❤1
2.47K views
Формошлёп
Автоматические кавычки в CSS

А вы знали, что CSS умеет автоматически ставить правильные типографские кавычки в зависимости от языка текста?

Достаточно прописать в CSS правила для разных языков:
:lang(ru) {
  quotes: "«" "»";
}
:lang(en) {
  quotes: "“" "”";
}


А в HTML просто оборачиваем цитату в <q> и указываем язык:
<!-- «Быть или не быть» -->
<p lang="ru">
  Цитата на русском: <q>Быть или не быть</q>.
</p>

<!-- “To be or not to be” -->
<p lang="en">
  Quote in English: <q>To be or not to be</q>.
</p>


Если весь сайт на русском, можно один раз прописать язык в корневом теге: 
<html lang="ru">


Теперь все <q> автоматически будут с «ёлочками».

Вроде мелочь, но приятно, сам недавно узнал об этом)

Пример, как всегда здесь лежит.
👍28🔥12❤5😐1
2.54K views
Формошлёп
This media is not supported in your browser
VIEW IN TELEGRAM
Когда вставил кусок кода со Stack Overflow в свой проект.

Где твой проект — это колёса)
😁55❤7👍3👎1
2.51K views
Формошлёп
Маркеры списков, зависящие от содержимого элемента

Разберем интересный метод, позволяющий создавать маркеры списков, которые меняются в зависимости от данных самого элемента через атрибуты HTML.

HTML-разметка:
<ul class="emoji-list">
  <li data-icon="🚀">Запуск нового проекта</li>
  <li data-icon="✅">Завершенная задача</li>
  <li data-icon="⚠️">Требует внимания</li>
  <li data-icon="🎯">Приоритетная цель</li>
</ul>


Добавляем данные в атрибуты элементов списка, например, эмоджи.

CSS:
.emoji-list li::marker {
  content: attr(data-icon) " ";
}


С помощью attr() извлекаем эти данные и отображаем через ::marker.

Такой вот метод сделать списки еще интереснее)

Код посмотреть можно здесь.
👍23🔥12😐4❤1
2.16K views
Формошлёп
This media is not supported in your browser
VIEW IN TELEGRAM
Shorthand-свойства в CSS

Нашел классный видос с сокращёнными свойствами в CSS, решил вам тоже показать)
Чтобы было удобнее, добавил код из видео в пост:

Padding
/* long-hand */
padding-top: 1em;
padding-right: 3px;
padding-bottom: 30px;
padding-left: 5px;
/* short-hand */
padding: 1em 3px 30px 5px;


Margin
/* long-hand */
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
/* short-hand */
margin: 10px 5px 10px 5px;


Border
/* long-hand */
border-width: 1px;
border-style: solid;
border-color: #000;
/* short-hand */
border: 1px solid #000;


Font
/* long-hand */
font-style: italic;
font-weight: bold;
font-size: 15px;
line-height: 1.2;
font-family: Arial, sans-serif;
/* short-hand */
font: italic bold 15px/1.2 Arial, sans-serif;


Background
/* long-hand */
background-color: #000;
background-image: url(image.png);
background-repeat: no-repeat;
background-position: left top;
/* short-hand */
background: #000 url(image.png) no-repeat left top;


Animation
/* long-hand */
animation-name: crazy;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: 12;
animation-direction: backwards;
/* short-hand */
animation: crazy 4s ease-in-out 0.5s 12 backwards;


List
/* long-hand */
list-style-type: disc;
list-style-position: outside;
list-style-image: url('image.png');
/* short-hand */
list-style: disc outside url('image.png');


Думаю, все об этом и так уже давно знают, но все равно, пусть будет здесь, на всякий случай)
👍28❤6🔥4
2.11K views
Формошлёп
Добавляем svg-иконку в кнопку

Часто требуется добавлять в кнопку иконку, давайте здесь разберем простой способ для создания такой кнопки)

HTML-разметка:
<button class="btn">
  <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <!-- SVG content -->
  </svg>
  Кнопка
</button>


Просто вставляем SVG в кнопку, добавляем текст.

CSS:
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.btn svg {
  width: 20px;
  height: 20px;
}


С помощью flex выравниваем иконку и текст, gap задает расстояние между иконкой и текстом.
Также через CSS управляем размером иконки, а благодаря currentColor иконка будет одного цвета с текстом кнопки.

Код лежит здесь.
👍25🔥5❤4👎1
2.21K views
Формошлёп
Overlay с помощью border-image

В этом посте, мы уже с вами разбирали, как сделать оверлей, с помощью добавления градиента непосредственно на фоновое изображение. Но есть еще один интересный и не совсем очевидный способ — с помощью свойства border-image.

Свойство border-image, позволяет заменять стандартные границы элемента на произвольное изображение или CSS-градиент. Но можно использовать его не совсем стандартно)

HTML-разметка:
<div class="container overlay">
  <h1>С затемнением</h1>
</div>


CSS:
.container {
  height: 250px;
  margin: 10px auto;
  background: url(image.jpg) center/cover;
  display: grid;
  place-items: center;
  color: #fff;
}

.overlay {
  border-image: fill 0 linear-gradient(#0003, #000);
}


С помощью border-image мы:
■ fill — растягиваем градиент на всю область элемента.
■ 0 — отключаем "нарезку" границы (градиент заполняет всё).
■ linear-gradient(#0003, #000) — создаем полупрозрачный чёрный градиент.

Такой вот интересный и необычный способ)

Код можно увидеть здесь.
👍24❤6🔥5
2.43K views
Формошлёп
Анимируем градиентный фон

Сегодня разберём простой, но эффектный способ создать блок с анимированным градиентным фоном. Такое обычно используют на лендингах, для привлечения внимания к первому экрану.

HTML-разметка:
<div class="hero">
  <h1>формошлёп</h1>
</div>


Тут у нас один элемент — контейнер .hero с заголовком.

Секция .hero:
.hero {
  height: 100vh;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 800% 800%;
  animation: gradientMove 15s ease-in-out infinite;
}


Делаем блок на весь экран, выравниваем по центру, создаем градиент, увеличиваем размер фона, запускаем бесконечную анимацию.

Анимация:
@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


Сдвигаем фон по горизонтали, начинаем с 0%, доходим до 100% и возвращаемся.

Полный код можно найти здесь.
👍21🔥8❤5
2.6K views
Формошлёп
This media is not supported in your browser
VIEW IN TELEGRAM
CSS-эффект затухания для обрезки текста

Если не хочется ставить многоточие для обрезки длинного текста, то можно использовать эффект плавного затухания.

Причем организовать это можно без псевдоэлементов, а с помощью mask-image.

Разметка:
<div class="single-line">
  Формошлёп: блог про фронтенд — шлёпаем формы и красим кнопки
</div>


CSS:
.single-line {
  white-space: nowrap;
  overflow: hidden;
  /* Маска для затухания */
  mask-image: linear-gradient(to right, black 70%, transparent 100%);
}


Как работает mask-image:
■ mask-image задаёт прозрачность по шаблону.
■ black = непрозрачно (текст виден полностью)
■ transparent = полная прозрачность (текст исчезает)
■ Градиент от чёрного к прозрачному означает, что текст будет постепенно исчезать, а не резко обрываться.

Текст исчезает с правой стороны, создавая эффект плавного перехода к фону)

Пример можно глянуть здесь.
👍26🔥8❤2
2.26K views
Формошлёп
This media is not supported in your browser
VIEW IN TELEGRAM
CSS-стрелки через border и transform

Нашел интересный видос, как делать стрелки с помощью border и transform, зацените, может быть, кому-нибудь пригодится)

Вот код из видео:

.arrow-right {
  display: inline-block;
  border: solid #FCA101;
  border-width: 0 5px 5px 0;
  padding: 5px;
  transform: rotate(-45deg);
}
.arrow-up {
  display: inline-block;
  border: solid #FCA101;
  border-width: 0 5px 5px 0;
  padding: 5px;
  transform: rotate(-135deg);
}
.arrow-left {
  display: inline-block;
  border: solid #FCA101;
  border-width: 0 5px 5px 0;
  padding: 5px;
  transform: rotate(135deg);
}
.arrow-down {
  display: inline-block;
  border: solid #FCA101;
  border-width: 0 5px 5px 0;
  padding: 5px;
  transform: rotate(45deg);
}


Html-разметка:
<div class="arrow-right"></div>  <!-- стрелка вправо -->


Берём div и задаём ему границы только справа и снизу (border-width: 0 5px 5px 0).
Поворачиваем элемент с помощью transform: rotate() в нужную сторону.

В codepen заливать не стал, вроде и так понятно)
👍26🔥12❤5
2.09K views
Формошлёп
Контроль изображения с Object-Fit

Как разместить картинку в контейнере, если их пропорции не совпадают? object-fit решает эту задачу довольно просто.

Свойство определяет, как изображение будет помещаться в контейнер. Аналог background-size, но для img)

Fill
Изображение растягивается или сжимается, чтобы полностью заполнить контейнер. Пропорции могут быть нарушены.
object-fit: fill;


Cover
Изображение масштабируется с сохранением пропорций, чтобы полностью покрыть контейнер. Части изображения могут быть обрезаны.
object-fit: cover;


Contain
Изображение масштабируется сохраняя пропорций так, чтобы полностью поместиться в контейнер. Могут появиться пустые области.
object-fit: contain;


Scale-down
Ведет себя как none или contain, выбирая вариант, который дает меньший размер изображения.
object-fit: scale-down;


None
Изображение отображается в исходном размере. Если оно больше контейнера, то обрезается.
object-fit: none;


Кстати, это свойство круто комбинируется с aspect-ratio)

Пример кода здесь.
👍27🔥12
2.16K views
Формошлёп
This media is not supported in your browser
VIEW IN TELEGRAM
Многострочный текст с вертикальным затуханием

Не давно в этом посте, мы разбирали, как делать CSS-эффект затухания для обрезки однострочного текста, давайте теперь посмотрим, как сделать то же самое, но с многострочным текстом.

Разметка:
<div class="text-container">
  <div class="multiline">Многострочный текст...</div>
</div>


CSS:
.multiline {
  height: 4lh;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}


Получается такое интересное затухание текста сверху вниз)

Код, как всегда здесь.
👍21🔥9❤4
2.38K views
Формошлёп
This media is not supported in your browser
VIEW IN TELEGRAM
Glitch-эффект для текста на CSS

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

Пробовал довольно разные способы и подобрал вроде неплохой, который всех устроил)

Разберем его здесь, вдруг кому пригодится.

Разметка:
<div class="glitch">ФОРМОШЛЁП</div>


CSS:
.glitch {
  font-size: 4rem;
  font-weight: bold;
  color: white;
  animation: glitch 0.9s infinite;
}

@keyframes glitch {
  0%,
  100% {
    text-shadow: -2px -2px 0 #1f640a, 2px 2px 0 red;
  }
  25% {
    text-shadow: 2px 2px 0 #1f640a, -2px -2px 0 red;
  }
  50% {
    text-shadow: 2px -2px 0 #1f640a, -2px 2px 0 red;
  }
  75% {
    text-shadow: -2px 2px 0 #1f640a, 2px -2px 0 red;
  }
}


Используем две тени — красная и зеленая, и в анимацией двигаем эти тени в разные стороны.

Так что, если кому надо тоже запилить такой эффект, то можете попробовать)

Пример здесь.
👍19🔥10❤1
2.63K views
Формошлёп
Или когда решил повайбкодить и нейросеть нагенерила код)
😁36🔥4👍3
2.34K views
Формошлёп
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация выделения текста при наведении

Случайно наткнулся на интересный прием — эффектное выделение важных частей текста при наведении.

Он отлично подходит для подсветки ключевых фраз в статьях, акцента на важных моментах и т.п.

HTML-разметка:
<p class="animate">
  Фронтенд-разработка — это создание внешнего интерфейса. 
  <span>Для фронтенд-разработчика важно, чтобы пользователи с лёгкостью могли найти на сайте всё, что им нужно.</span>
  К примеру, прочитать подробности о товаре...
</p>


Здесь обычный параграф с классом animate, а внутри него <span> оборачивает текст, который нужно выделить.

CSS:
p.animate span {
  background: linear-gradient(to right, #ffef7e, #b7f9e9);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background 750ms ease-in-out;
  box-decoration-break: clone;
}

.animate:hover span {
  background-size: 100% 100%;
}


Разбираем:
■ linear-gradient создаёт градиентное подчёркивание
■ background-size: 0% 100% - изначально фон невидим (0% по ширине)
■ transition обеспечивает плавную анимацию
■ box-decoration-break: clone - для многострочных выделений, чтобы фон применялся к каждой строке отдельно

:hover - триггер анимации, при наведении на весь абзац — фон растягивается на 100%.

На этом всё)

Потестить код можно здесь.
🔥26👍9❤6
2.24K views
Формошлёп
This media is not supported in your browser
VIEW IN TELEGRAM
Оживляем форму с помощью :focus-within

Сегодня разберем, как сделать формы немного умнее и приятнее для пользователя)
Поможет нам в этом псевдокласс :focus-within

Допустим, у нас есть поле ввода с префиксом или суффиксом:
<div class="input-group">
  <span>https://</span>
  <input type="text" placeholder="domain.tld" />
</div>


Когда пользователь кликает на input, мы хотим, чтобы всё поле реагировало — включая span.
Для этого используем псевдокласс :focus-within, который применяется к родителю, если любой из его потомков находится в фокусе:
.input-group:focus-within {
  border-color: #275efe;
}
.input-group:focus-within span {
  background: #678efe;
  color: white;
}

Как только пользователь кликает на input — весь контейнер "понимает", что внутри что-то активно, и реагирует)

Пример можно глянуть здесь.
🔥24👍6❤5
2.21K views
Формошлёп
This media is not supported in your browser
VIEW IN TELEGRAM
Акцент в меню с помощью :has()

Сегодня разберём мини-лайфхак: меню с эффектом "акцента" на активном пункте.
Ну, т.е. когда наводишь на один пункт — остальные слегка затемняются.

Создадим обычное меню:
<nav>
  <ul class="nav-list">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Статьи</a></li>
    <li><a href="#">Видео</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>


Добавим ховер, чтобы при наведении ссылка становилась оранжевой:
nav a:hover {
  color: #ff7a18;
}


И теперь заюзаем :has:
nav ul:has(a:hover) a:not(:hover) {
  opacity: 0.3;
}


Что мы получаем в итоге:
■ nav ul:has(a:hover) — если внутри списка есть ссылка в состоянии hover
■ a:not(:hover) — то все ссылки, которые НЕ в состоянии hover
■ opacity: 0.3 — сделать полупрозрачными

В результате, когда мы наводим на любую ссылку в меню, ссылка под курсором становится ярко-оранжевой, все остальные ссылки тускнеют.

Такой вот эффект фокусировки внимания)

Код, как всегда, здесь.
1👍45🔥16❤3✍2
2.16K views
Формошлёп
This media is not supported in your browser
VIEW IN TELEGRAM
Футер выезжающий из-под контента

Сегодня разберём один из тех визуальных приёмов, который вы 100% видели на модных лендингах — "Sticky Footer Reveal", или по-русски — футер, который выезжает из-под контента при прокрутке)

HTML-разметка:
<div class="container">
  <!-- контент -->
</div>
<footer>
  <!-- футер -->
</footer>


CSS:
.container {
  position: relative;
  z-index: 1;
  background: #fff;
}


z-index: 1 и position: relative — это делает контейнер "выше" по слоям, чем футер. Поэтому он будет перекрывать футер при прокрутке.

footer {
  position: sticky;
  bottom: 0;
  background: #0b0b0b;
  z-index: 0;
}


Футер позиционируем через position: sticky и bottom: 0, чтобы закрепить на нижней границе страницы, а z-index: 0 — делает его "ниже" контента.

Теперь, когда заказчик говорит: "Сделайте что-то модное" — ты просто вставляешь этот футер и уходишь в отпуск)

Полный код лежит здесь.
👍28🔥14😁4❤3
2.25K views
Формошлёп
This media is not supported in your browser
VIEW IN TELEGRAM
Раскрывающаяся панель поиска

Сегодня разберем классную штуку — раскрывающуюся панель поиска. Такую часто можно встретить в хедерах сайтов.

Создадим контейнер с инпутом и кнопкой:
<div class="search-bar">
  <input type="search" class="search-input" placeholder="Искать...">
  <button class="search-btn">
    <i class="fa-solid fa-magnifying-glass"></i>
  </button>
</div>


Иконку возьмем из font-awesome, предварительно подключив его к странице.

CSS контейнера:
.search-bar {
  display: flex;
  justify-content: flex-end;
  background: white;
  border-radius: 50px;
  width: 70px;
  transition: width 0.4s ease;
  overflow: hidden; 
}


Теперь с помощью :focus-within расширяемся при фокусе на любом дочернем элементе:
.search-bar:focus-within {
  width: 500px;
}


Анимация появления инпута:
.search-input {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.search-bar:focus-within .search-input {
  opacity: 1;
}


Вкратце это все, полностью посмотреть код можно здесь.
👍26🔥13❤8
2.72K views
Формошлёп
This media is not supported in your browser
VIEW IN TELEGRAM
По аккуратней с легаси)
1😁48❤4👏4
2.67K views