Поиск  
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
Источник:
Просмотров:
1867

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: '🟧';
}
Похожее
Jul 12
Author: Emmanuel Uchenna
Choosing between React and Svelte Over the past few years, there has been a constant explosion of new JavaScript libraries and frameworks - all promising to solve the complexities of building fast and efficient user interfaces (UIs) while maintaining a...
Jun 13
Author: Dayanand Thombare
Creating background services in .NET Core is a powerful way to perform long-running, background tasks that are independent of user interaction. These tasks can range from data processing, sending batch emails, to file I/O operations — all critical for today’s...
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">  ...
Nov 5, 2020
Quick Summary: - Frontend frameworks are the pioneer blocks of the software development process. But there are so many options to choose when it comes to building visually appealing apps that rank high on user experience. To help you out,...
Написать сообщение
Тип
Почта
Имя
*Сообщение