RU EN

CSS tips and tricks

Автор:
Artem Polishchuk
Источник:
Просмотров:
2492
CSS tips and tricks favorites 0

print media queries

Вы можете стилизировать версию вашего сайта для печати с помощью media query:

@media print {
  * {
    background-color: transparent;
    color: #000 ;
    box-shadow: none;
    text-shadow: none;
  }
}

gradient text

Gradient text

h1 {
  background-image: linear-gradient(to right, #C6FFDD, #FBD786, #f7797d);
  background-clip: text;
  color: transparent;
}

Улучшаем media defaults

Когда пишите css reset файлик, добавьте настройки для мультимедийных файлов:

img, picture, video, svg {
  max-width: 100%;
  object-fit: contain;  /* preserve a nice aspect-ratio */
}

column count

Создаем column лейауты с помощью column-count.

column-count

p {
  column-count: 3;
  column-gap: 5rem;          
  column-rule: 1px solid salmon; /* border between columns */
}

Центрирование элемента с positioning

Если вы не знакомы с grid или flex, это способ центрировать div по вертикали и горизонтали:

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

List с автоматическим добавлением запятой

List с автоматическим добавлением запятой

li:not(:last-child)::after {
  content: ',';
}

smooth scrolling

Smooth scrolling

Это все делается одной строчкой:

html {
  scroll-behavior: smooth;
}

hyphens

hyphens

Испойлуйте этот параметр, чтобы установить настройки переноса строки. 

first letter

Этот псевдо-элемент позволяет стилизировать первую букву, например:

h1::first-letter {
   color: #ff8A00;
}

accent color

С помощью этой настройки устанавливайте цвет для стандартных элементов форм в отличии от стандартного.

Accent color

Background для текста в виде изображения

Background для текста в виде картинки

h1 {
  background-image: url('illustration.webp');
  background-clip: text;
  color: transparent;
}

Стилизация плейсхолдера

Используйте псевдоэлемент для стилизации плейсхолдеров.

::placeholder {
  font-size: 1.5em;
  letter-spacing: 2px;
  color: green;
  text-shadow: 1px 1px 1px black;
}

Анимация цвета

Анимация цвета

button {
  animation: colors 1s linear infinite;
}

@keyframes colors {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

Центрирование с margin

.parent {
  display: flex;  /* display: grid; also works */
}

.child {
  margin: auto;
}

Функция clamp

Функция clamp

Используйте функцию для адаптивной и плавной типографики.

h1 {
  font-size: clamp(5.25rem,8vw,8rem);
}

Стилизация при выделении контента

Стилизация при выделении контента

::selection {
  color: coral;
}

decimal leading zero

Decimal leading zero

li {
  list-style-type: decimal-leading-zero;
}

Центрирование элемента с flex

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Кастомный курсор

Кастомный курсор

caret color

Вы можете настроить цвет каретки ввода текста, используя:

input {
  caret-color: coral;
}

only child

:only-child находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и :first-child:last-child или :nth-child(1):nth-last-child(1), но с меньшей специфичностью.

Only child

li:only-child {
  color: lightgrey;
}

Центрирование в гриде

.parent {
  display: grid;
  place-items: center;
}

text indent

Text indent

text indent позволяет нам делать отступ в первой строке текста, мы также можем использовать отрицательные значения.

p {
  text-indent: 5rem;
}

list-style-type

list-style-type

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

li {
    list-style-type: '🟧';
}
Похожее
Dec 12, 2024
This article will guide you through creating a Contacts Manager application in React, styled with Bootstrap and enhanced with Font Awesome icons. The application will allow you to add, edit, and delete contacts using modal dialogs. Approach: Create a new...
Mar 11, 2024
Author: Zafer Ayan Zafer Ayan
The Fetch vs Axios debate has been going on for years and recently it has come up again. I will talk about the disadvantages of using the Fetch API directly instead of using a network library like Axios. First of...
Oct 28, 2024
Author: MD Julakadar MD Julakadar
Entity Framework Core (EF Core) is an incredibly powerful ORM that simplifies data access by abstracting much of the complexity of database interactions. However, this convenience can sometimes lead to performance bottlenecks if not used wisely. In this article, we’ll...
Feb 26, 2023
Author: Vitalii Shevchuk
Achieve Typescript mastery with a 21-steps guide, that takes you from Padawan to Obi-Wan. Content Intro Best Practice 1: Strict Type Checking Best Practice 2: Type Inference Best Practice 3: Linters Best Practice 4: Interfaces Best Practice 5: Type Aliases...
Написать сообщение
Тип
Почта
Имя
*Сообщение