This media is not supported in your browser
VIEW IN TELEGRAM
Волны на CSS, без использования JS
Я принес еще немного красоты для ваших сайтов.
На сегодня это волны, нафиг они нужны?
Например, их можно разместить на первом экране, чтобы красиво разделить блоки на лендинге.
Как всегда, код можно пощупать здесь:
https://codepen.io/frontbox/pen/PovKeyG
Я принес еще немного красоты для ваших сайтов.
На сегодня это волны, нафиг они нужны?
Например, их можно разместить на первом экране, чтобы красиво разделить блоки на лендинге.
Как всегда, код можно пощупать здесь:
https://codepen.io/frontbox/pen/PovKeyG
👍3🔥1
Минификация CSS и JavaScript
Минификация — это сокращение размера CSS и JS файлов за счёт удаления комментариев, разметки, переносов строк и прочего.
Делается это для того, чтобы ваши файлы стали меньше, быстрее загружались и юзеры, которые заходят на ваш сайт, просто писали кипятком от его скорости загрузки.
Чтобы не изобретать велосипед, я нашел для вас два годных сервиса которые это делают:
1️⃣ CSS Minifier
2️⃣ JS Minifier
Уменьшайте свои файлы и радуйте посетителей быстрой загрузкой)
Минификация — это сокращение размера CSS и JS файлов за счёт удаления комментариев, разметки, переносов строк и прочего.
Делается это для того, чтобы ваши файлы стали меньше, быстрее загружались и юзеры, которые заходят на ваш сайт, просто писали кипятком от его скорости загрузки.
Чтобы не изобретать велосипед, я нашел для вас два годных сервиса которые это делают:
1️⃣ CSS Minifier
2️⃣ JS Minifier
Уменьшайте свои файлы и радуйте посетителей быстрой загрузкой)
🔥2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
💥Стилизуем элементы списка
Иногда нужно добавить какой-то динамики или красиво выделить элементы списка. Специально для таких моментов я нарыл этот прикольный эффект.
Вроде те же списки в кружочках, но выглядит уже красиво.
Причем все это делается чисто через 1 единственный CSS-класс, что очень удобно.
Тестим код, как обычно в codepen.
Иногда нужно добавить какой-то динамики или красиво выделить элементы списка. Специально для таких моментов я нарыл этот прикольный эффект.
Вроде те же списки в кружочках, но выглядит уже красиво.
Причем все это делается чисто через 1 единственный CSS-класс, что очень удобно.
Тестим код, как обычно в codepen.
👍2
❌ Запрещаем выделять текст на странице
Если вам нужно сделать так, чтобы юзер не мог выделить текст на странице, то сделать это можно очень просто, с помощью свойства
Если вы хотите запретить выделение текста в определенных местах страницы, то можете навесить все это дело на нужный класс, например:
Теперь с этими тайными знаниями вы можете поднасрать слабоумным копипастерам, которые не знают про DevTools в браузере)
Если вам нужно сделать так, чтобы юзер не мог выделить текст на странице, то сделать это можно очень просто, с помощью свойства
user-select:* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} Если вы хотите запретить выделение текста в определенных местах страницы, то можете навесить все это дело на нужный класс, например:
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} Теперь с этими тайными знаниями вы можете поднасрать слабоумным копипастерам, которые не знают про DevTools в браузере)
👍5😁1
This media is not supported in your browser
VIEW IN TELEGRAM
⭐️ Рейтинг со звездочками на CSS
Щас я вам покажу рейтинг со звездочками, но не простой, а сделанный на radio кнопках с использованием SVG-иконок и на чистом CSS.
Ну, а кому не нравятся SVG-иконки, то можно будет легко заменить их на шрифт типа FontAwesome.
Потыкать и забрать код можно здесь:
https://codepen.io/frontbox/pen/eYaGpqW
Щас я вам покажу рейтинг со звездочками, но не простой, а сделанный на radio кнопках с использованием SVG-иконок и на чистом CSS.
Ну, а кому не нравятся SVG-иконки, то можно будет легко заменить их на шрифт типа FontAwesome.
Потыкать и забрать код можно здесь:
https://codepen.io/frontbox/pen/eYaGpqW
🔥8
📏 Единицы измерения в CSS
Новички любят использовать в верстке только одну единицу измерения — пиксели. Если верстать что-то статичное, то норм, а вот если потом будет адаптив, будет очень больно.
Чтобы потом с горящей жопой не переделывать всю верстку, желательно сразу юзать правильные единицы измерения. Разберем самые основные.
Пиксели px
Абсолютная единица измерения, для элементов фиксированного размера. 1px = 1/96 дюйма
Проценты %
Относительная величина. Проценты задают размер относительно родительского элемента.
em
Величина относительно текущего размера шрифта. Например, если размер шрифта установлен в 16px, значение 1em будет равно 16px, 2em равно 32px.
rem
Рассчитывается относительно размера шрифта корневого элемента <html>. По умолчанию размер шрифта для <html> равен 16px. При таких условиях 2rem эквивалентны 32px.
vh/vw
Относительно высоты/ширины области просмотра (viewport). Значения от 0 до 100, например 1vh = 1% высоты области просмотра.
Надеюсь, теперь понятней, что и когда использовать)
Новички любят использовать в верстке только одну единицу измерения — пиксели. Если верстать что-то статичное, то норм, а вот если потом будет адаптив, будет очень больно.
Чтобы потом с горящей жопой не переделывать всю верстку, желательно сразу юзать правильные единицы измерения. Разберем самые основные.
Пиксели px
Абсолютная единица измерения, для элементов фиксированного размера. 1px = 1/96 дюйма
Проценты %
Относительная величина. Проценты задают размер относительно родительского элемента.
em
Величина относительно текущего размера шрифта. Например, если размер шрифта установлен в 16px, значение 1em будет равно 16px, 2em равно 32px.
rem
Рассчитывается относительно размера шрифта корневого элемента <html>. По умолчанию размер шрифта для <html> равен 16px. При таких условиях 2rem эквивалентны 32px.
vh/vw
Относительно высоты/ширины области просмотра (viewport). Значения от 0 до 100, например 1vh = 1% высоты области просмотра.
Надеюсь, теперь понятней, что и когда использовать)
👍7🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Стилизуем менюшку
Если хотите красиво оживить вертикальное меню, то предлагаю вам рассмотреть это решение.
Все довольно просто реализовано, используется только CSS, без JS.
Код можно найти здесь.
Если хотите красиво оживить вертикальное меню, то предлагаю вам рассмотреть это решение.
Все довольно просто реализовано, используется только CSS, без JS.
Код можно найти здесь.
🔥4👍2
❗️Запрещаем вставлять текст в поле ввода
Сегодня предлагаю немного побаловаться с JS. К примеру на странице есть форма с
Отслеживаем событие
Эту фишку юзают обычно в формах, где нужно ввести подтверждение почты или пароля.
Сегодня предлагаю немного побаловаться с JS. К примеру на странице есть форма с
<input> и вы хотите запретить юзеру вставлять туда скопированный текст. Хотите, чтобы он только ручками туда печатал, делается это просто:<input type="text"></input>
<script>
const input = document.querySelector('input');
input.addEventListener("paste", function(e){
e.preventDefault()
})
</script>
Отслеживаем событие
paste и вызываем его метод preventDefault(). Эту фишку юзают обычно в формах, где нужно ввести подтверждение почты или пароля.
🔥4👍1
📗Словарь терминов по фронтенду
Специально для новичков во фронтенд-разработке, я сегодня нашел крутой словарь с определениями, примерами, оглавлением, прям то, что доктор прописал.
Вот ссылочка: https://github.com/web-standards-ru/dictionary/blob/main/dictionary.md
Там все от anchor до word-spacing, в общем просвещайтесь)
Специально для новичков во фронтенд-разработке, я сегодня нашел крутой словарь с определениями, примерами, оглавлением, прям то, что доктор прописал.
Вот ссылочка: https://github.com/web-standards-ru/dictionary/blob/main/dictionary.md
Там все от anchor до word-spacing, в общем просвещайтесь)
👍5🔥1
📝 Фон из тетради "в клеточку" на CSS
Думаю вы встречали сайты, у которых фон выполнен в виде клеток. Обычно для этих целей используют графические паттерны. Так вот это не круто.
Это можно реализовать без доп. изображений на чистом CSS.
Все что нужно, это создать два градиента, один из которых будет повернут на 90 градусов, а с помощью
Посмотреть код в действии можно здесь:
https://codepen.io/frontbox/pen/RwmxmqP
Думаю вы встречали сайты, у которых фон выполнен в виде клеток. Обычно для этих целей используют графические паттерны. Так вот это не круто.
Это можно реализовать без доп. изображений на чистом CSS.
Все что нужно, это создать два градиента, один из которых будет повернут на 90 градусов, а с помощью
background-size задать размер клеток.Посмотреть код в действии можно здесь:
https://codepen.io/frontbox/pen/RwmxmqP
👍2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Украшаем иконки на сайте
Я к вам с новым украшательством, на сей раз подсветим иконки.
Отлично подойдет для сайтов с темной темой или просто выполненных в темных тонах. Только посмотрите, как круто подсвечиваются иконки, ну огонь же)
Код можно поглядеть здесь: https://codepen.io/frontbox/pen/zYQRepR
Я к вам с новым украшательством, на сей раз подсветим иконки.
Отлично подойдет для сайтов с темной темой или просто выполненных в темных тонах. Только посмотрите, как круто подсвечиваются иконки, ну огонь же)
Код можно поглядеть здесь: https://codepen.io/frontbox/pen/zYQRepR
👍6🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Спойлер на HTML
Если вам нужно запилить на странице раскрывающиеся блоки, например:
— Спойлеры для FAQ.
— Меню со сворачиваемыми подменю.
— Список с раскрываемыми элементами и т.п.
То это легко реализовать с помощью тегов
Код выглядит так:
Ну, а навести красоту можно по своему усмотрению с помощью CSS)
Если вам нужно запилить на странице раскрывающиеся блоки, например:
— Спойлеры для FAQ.
— Меню со сворачиваемыми подменю.
— Список с раскрываемыми элементами и т.п.
То это легко реализовать с помощью тегов
<details> и <summary>, без JS.Код выглядит так:
<details>
<summary>Подробнее</summary>
<p>Скрытый контент</p>
</details>
Ну, а навести красоту можно по своему усмотрению с помощью CSS)
🔥5👍3❤1🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
Выпадающий список с автозаполнением на HTML
Ну и раз мы начали разговор про тег
Причем это будет не просто выпадающий список, но еще и будет возможность поиска вводимых данных по этому списку.
Пример:
Под тегом
Ну и раз мы начали разговор про тег
<datalist>, то давайте заодно рассмотрим, как делать выпадающий список.Причем это будет не просто выпадающий список, но еще и будет возможность поиска вводимых данных по этому списку.
Пример:
<input list="cars">
<datalist id="cars">
<option value="BMW">
<option value="Mercedes">
<option value="Ford">
<option value="Lambo">
<option value="Ferrari">
</datalist>
Под тегом
<input> нужно создать <datalist>, содержащий список элементов <option>.🔥4✍3👍1😐1
📄 Шпаргалки по Flexbox CSS
Любите верстать с помощью флексов? Я тоже)
Чтобы не гуглить свойства, если вдруг забыли, вот вам классные шпаргалки:
— На русском языке
— На англ. языке
Главная фишка в том, что они интерактивные и очень наглядные.
Сохраняйте, 100% пригодится в работе)
Любите верстать с помощью флексов? Я тоже)
Чтобы не гуглить свойства, если вдруг забыли, вот вам классные шпаргалки:
— На русском языке
— На англ. языке
Главная фишка в том, что они интерактивные и очень наглядные.
Сохраняйте, 100% пригодится в работе)
👍5🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
🖼 Тег <picture> — адаптируем картинки
Он используется, когда для разных устройств или вариантов отображения нам нужны разные картинки.
Браузер читает каждый тег
Пример:
Очень классный тег, попробуйте, если еще не пробовали)
Он используется, когда для разных устройств или вариантов отображения нам нужны разные картинки.
Браузер читает каждый тег
<source> по порядку, если условия выполняются, то он берет картинку из атрибута srcset, а остальные теги <source> игнорируются. Если же ни одно из условий в тегах <source> не выполняются, то выводится картинка из тега <img>.Пример:
<picture>
<source srcset="1000x300.jpg" media="(min-width: 1000px)">
<source srcset="700x300.jpg" media="(min-width: 700px)">
<img src="300x300.jpg" alt="">
</picture>
Очень классный тег, попробуйте, если еще не пробовали)
🔥3👍2
📌 Путь фронтендера
Чтобы стать крутым фронтенд-разработчиком, нужно всегда быть в курсе новейших технологий и постоянно развиваться.
Ну, а чтобы было проще ориентироваться я предлагаю вам парочку дорожных карт. Новичкам будет полезно для уверенного старта, а фронтендерам на опыте подскажет, куда развиваться дальше.
— На русском языке
— На инглише
Там собраны все актуальные инструменты и технологии по мнению комьюнити.
Чтобы стать крутым фронтенд-разработчиком, нужно всегда быть в курсе новейших технологий и постоянно развиваться.
Ну, а чтобы было проще ориентироваться я предлагаю вам парочку дорожных карт. Новичкам будет полезно для уверенного старта, а фронтендерам на опыте подскажет, куда развиваться дальше.
— На русском языке
— На инглише
Там собраны все актуальные инструменты и технологии по мнению комьюнити.
👍2❤1🔥1
Модальное окно с помощью псевдокласса :target
Наверное на каждом третьем сайте сейчас юзают модальные окна. В них предлагают подписаться на рассылку, получить спец. предложение, связаться по форме обратной связи и т.п.
Давайте сегодня рассмотрим, как сделать простое модальное окно на CSS, без использования JS.
Для этих целей воспользуемся псевдоклассом
Код посмотреть можно в codepen.
Наверное на каждом третьем сайте сейчас юзают модальные окна. В них предлагают подписаться на рассылку, получить спец. предложение, связаться по форме обратной связи и т.п.
Давайте сегодня рассмотрим, как сделать простое модальное окно на CSS, без использования JS.
Для этих целей воспользуемся псевдоклассом
:target.Код посмотреть можно в codepen.
👍3
🐸 Flexbox Froggy
Давайте сегодня отдохнем с пользой, зарубимся в игру, а заодно прокачаем навыки работы с Flexbox)
В игре Flexbox Froggy вам нужно будет решать задачи, используя свойства Flexbox. Вы управляете лягушками, перемещая их таким образом, чтобы каждая лягушка оказалась на своем острове в зависимости от условий задачи.
Это позволяет визуально представить применение различных свойств Flexbox, таких как
Игра имеет несколько уровней сложности, начиная с основных концепций Flexbox и постепенно переходя к более сложным задачам.
Поиграть можно здесь — https://flexboxfroggy.com/#ru
Давайте сегодня отдохнем с пользой, зарубимся в игру, а заодно прокачаем навыки работы с Flexbox)
В игре Flexbox Froggy вам нужно будет решать задачи, используя свойства Flexbox. Вы управляете лягушками, перемещая их таким образом, чтобы каждая лягушка оказалась на своем острове в зависимости от условий задачи.
Это позволяет визуально представить применение различных свойств Flexbox, таких как
align-items, justify-content, flex-direction и другие. Игра имеет несколько уровней сложности, начиная с основных концепций Flexbox и постепенно переходя к более сложным задачам.
Поиграть можно здесь — https://flexboxfroggy.com/#ru
🔥6👏2👍1😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Плавная прокрутка с помощью scroll-behavior
Эту фишку часто используют на лендингах, для того, чтобы перенаправлять посетителя между разделами не просто прыжками от якоря к якорю, а красиво и плавно.
За плавность прокрутки отвечает свойство
Пример этого чуда в действии можно увидеть здесь:
https://codepen.io/frontbox/pen/pomKyQg
Эту фишку часто используют на лендингах, для того, чтобы перенаправлять посетителя между разделами не просто прыжками от якоря к якорю, а красиво и плавно.
За плавность прокрутки отвечает свойство
scroll-behavior со значением smooth:html {
scroll-behavior: smooth;
}Пример этого чуда в действии можно увидеть здесь:
https://codepen.io/frontbox/pen/pomKyQg
🔥3👍2
Ровняем блок по центру экрана
Тривиальная задача, с которой сталкивается каждый верстальщик. Это может быть необходимо, чтобы выровнять модальное окно, какой-то контент на первом экране лендинга и т.п.
Есть несколько способов, но давайте разберем самый простой — с помощью флексов.
Делаем родителя флекс-контейнером и задаём свойства для выравнивания по центру вертикальной и горизонтальной осей:
Полный код можно глянуть здесь.
Все просто, красиво и без костылей)
Тривиальная задача, с которой сталкивается каждый верстальщик. Это может быть необходимо, чтобы выровнять модальное окно, какой-то контент на первом экране лендинга и т.п.
Есть несколько способов, но давайте разберем самый простой — с помощью флексов.
Делаем родителя флекс-контейнером и задаём свойства для выравнивания по центру вертикальной и горизонтальной осей:
.container {
height: 100vh; /* это высота вьюпорта */
display: flex;
align-items: center;
justify-content: center;
}Полный код можно глянуть здесь.
Все просто, красиво и без костылей)
👍3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Простой zoom-эффект на CSS для изображения
Давайте в несколько строк, добавим интерактивности для сайта. Создадим эффект зума при наведении на картинку.
Пример работы можно глянуть на видео к этому посту.
А вот и сам код:
html:
css:
Как это работает:
— Контейнер
— При наведении курсора изображение увеличивается, тем самым создаётся необходимый эффект.
Давайте в несколько строк, добавим интерактивности для сайта. Создадим эффект зума при наведении на картинку.
Пример работы можно глянуть на видео к этому посту.
А вот и сам код:
html:
<div class="image-container">
<img src="img.jpg">
</div>
css:
.image-container {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
border-radius: 8px;
box-shadow: 3px 2px 13px rgba(0, 0, 0, 0.5);
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.image-container:hover img {
transform: scale(1.2);
}Как это работает:
— Контейнер
image-container имеет фиксированный размер, а изображение увеличивается внутри него, сохраняя свои пропорции;— При наведении курсора изображение увеличивается, тем самым создаётся необходимый эффект.
👍6🔥3