Поиск  
Always will be ready notify the world about expectations as easy as possible: job change page
Dec 28, 2022

CSS tips and tricks

Автор:
Artem Polishchuk
Источник:
Просмотров:
1868

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: '🟧';
}
Похожее
2 недели назад
Author: Dante J. Anjos
In this post I want to show how we can easily create a modal with vanilla JavaScript. It can have multiple open/close handlers thanks to querySelectorAll. First of all lets create the HTML structure for our modal. <div class="modal">  ...
месяц назад
Author: Anton Martyniuk
In this article you will learn how to map objects in .NET using various techniques and libraries. We’ll explore what is the best way to map objects in .NET in 2024. What is object mapping What is object mapping and...
May 13
Author: Dayanand Thombare
Creating functions that return multiple values in C# is an essential skill, especially when working with .NET Core applications. This article delves into various advanced strategies to return multiple values from functions, providing a deeper understanding of each approach with...
Oct 28
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...
Написать сообщение
Тип
Почта
Имя
*Сообщение