Формошлёп

⚔️ normalize.css против reset.css

Сброс CSS и нормализация CSS — это два разных подхода к обнулению стилей веб-страницы.

👉 Reset.css (Сброс CSS) — это процесс обнуления стилей, чтобы убрать браузерные стили по умолчанию, которые могут отличаться от одного браузера к другому. Цель сброса CSS — создать «чистую» страницу, на которой все элементы имеют одинаковый вид в разных браузерах.

👉 Normalize.css (Нормализация CSS) — это процесс создания единообразных стилей для разных элементов, чтобы веб-страница выглядела одинаково во всех браузерах. В отличие от сброса CSS, нормализация CSS сохраняет некоторые стили по умолчанию браузера, но при этом пытается сделать их единообразными.

А что выбираете вы?

👍6❤1

589 views06:17

Открываем все ссылки на странице в новой вкладке

Иногда бывает необходимость сделать так, чтобы все ссылки на странице открывались в новой вкладке. Но запариваться и прописывать в каждой ссылке target="_blank" лень, че делать?

Выход оказался очень прост, достаточно в head прописать тег base с атрибутом target="_blank":

<head>  
    <base target="_blank">  
</head>

И все, теперь все ссылки, даже без атрибута target="_blank" будут открываться в новой вкладке.

Но че делать, если я захочу одну из ссылок на этой странице открывать не в новой вкладке, а в той же?

И для этого есть свой способ. Достаточно добавить для ссылки атрибут target="_self" и все, теперь все ссылки открываются в новой вкладке, кроме той куда вы добавили этот атрибут)

👍10🔥5❤2

589 views06:48

📇 Эффект набора текста Typing

Разберем эффект набора текста на пишущей машинке с помощью CSS, без JavaScript.

Мы будем использовать свойство animation и правило @keyframes.

Для того, чтобы анимация раскрывала наш текст буква за буквой (или по шагам), как это делает печатная машинка, нам нужно разделить анимацию с помощью CSS функции steps().

Код можно потестить здесь:
https://codepen.io/frontbox/pen/wvbeEZP

👍4

604 views06:48

Вес селекторов (специфичность)

Все CSS-селекторы имеют свой вес. Он определяет, как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.

Иногда, это может создавать трудности, когда свойство, объявленное ниже в коде, перекрывается тем, что объявлено выше, потому что селектор первого более специфичен (имеет больший вес).

Чтобы по-быстрому определять вес селекторов можно использовать калькуляторы.

Специально для вас собрал парочку самых интересных:

1️⃣ https://polypane.app/css-specificity-calculator/
2️⃣ https://specificity.keegan.st/

Пользуйтесь на здоровье)

🔥2👍1

533 views06:05

Автофокус на поле ввода (input)

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

Так сделано например в гугле, когда вы переходите в гугл, открывается форма с поиском и курсор уже мигает там где нужно вводить поисковый запрос.

Осуществляется эта штука просто изи, благодаря атрибуту autofocus:

<input type="text" name="name" autofocus>

Просто задаем нужному полю атрибут autofocus и все, вы великолепны)

👍7

541 views05:40

0:16

Волны на CSS, без использования JS

Я принес еще немного красоты для ваших сайтов.

На сегодня это волны, нафиг они нужны?

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

Как всегда, код можно пощупать здесь:
https://codepen.io/frontbox/pen/PovKeyG

👍3🔥1

551 views06:39

Минификация CSS и JavaScript

Минификация — это сокращение размера CSS и JS файлов за счёт удаления комментариев, разметки, переносов строк и прочего.

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

Чтобы не изобретать велосипед, я нашел для вас два годных сервиса которые это делают:

1️⃣ CSS Minifier
2️⃣ JS Minifier

Уменьшайте свои файлы и радуйте посетителей быстрой загрузкой)

🔥2❤1

554 viewsedited 06:44

0:09

💥Стилизуем элементы списка

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

Вроде те же списки в кружочках, но выглядит уже красиво.

Причем все это делается чисто через 1 единственный CSS-класс, что очень удобно.

Тестим код, как обычно в codepen.

👍2

543 views05:50

❌ Запрещаем выделять текст на странице

Если вам нужно сделать так, чтобы юзер не мог выделить текст на странице, то сделать это можно очень просто, с помощью свойства 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

549 views05:37

0:10

⭐️ Рейтинг со звездочками на CSS

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

Ну, а кому не нравятся SVG-иконки, то можно будет легко заменить их на шрифт типа FontAwesome.

Потыкать и забрать код можно здесь:
https://codepen.io/frontbox/pen/eYaGpqW

🔥8

630 views06:34

📏 Единицы измерения в CSS

Новички любят использовать в верстке только одну единицу измерения — пиксели. Если верстать что-то статичное, то норм, а вот если потом будет адаптив, будет очень больно.

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

Пиксели 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

568 views11:18

0:05

Стилизуем менюшку

Если хотите красиво оживить вертикальное меню, то предлагаю вам рассмотреть это решение.

Все довольно просто реализовано, используется только CSS, без JS.

Код можно найти здесь.

🔥4👍2

575 views06:41