Search  
Always will be ready notify the world about expectations as easy as possible: job change page
Dec 28, 2022

CSS tips and tricks

Author:
Artem Polishchuk
Source:
Views:
1458

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: '🟧';
}
Similar
Jun 10
Author: Dayanand Thombare
LINQ (Language Integrated Query) has revolutionized the way we interact with data in C#. It offers a consistent, readable, and concise way to manipulate collections, databases, XML, and more. However, the beauty and ease of LINQ can sometimes mask performance...
Feb 26, 2023
Author: Ian Segers
Error handling with Async/Await in JS This will be a small article, based on some issues I picked up during code reviews and discussions with other developers. This article is rather focused on the novice JS developers. A Simple Try...
Jun 6
Author: Dayanand Thombare
The Deadlock Dilemma 🔒 In the world of multithreaded programming, deadlocks lurk like silent assassins, waiting to strike when you least expect it. A deadlock occurs when two or more threads become entangled in a vicious cycle, each holding a...
Jun 3
Author: Dayanand Thombare
Introduction Delegates are a fundamental concept in C# that allow you to treat methods as objects. They provide a way to define a type that represents a reference to a method, enabling you to encapsulate and pass around methods as...
Send message
Email
Your name
*Message


© 1999–2024 WebDynamics
1980–... Sergey Drozdov
Area of interests: .NET Framework | .NET Core | C# | ASP.NET | Windows Forms | WPF | HTML5 | CSS3 | jQuery | AJAX | Angular | React | MS SQL Server | Transact-SQL | ADO.NET | Entity Framework | IIS | OOP | OOA | OOD | WCF | WPF | MSMQ | MVC | MVP | MVVM | Design Patterns | Enterprise Architecture | Scrum | Kanban