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

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: '🟧';
}
Похожее
Apr 29, 2023
Author: Joel Olawanle
JavaScript is a versatile programming language that allows developers to create dynamic and interactive web applications. One common task in web development is to refresh or reload a web page, either to update its content or to trigger certain actions.In...
Mar 15
Author: SQL Fundamentals
Mastering SQL with practical examplesSQL is a powerful tool for managing and manipulating data in relational databases. While basic SQL queries are essential, mastering advanced SQL queries empowers data professionals to extract complex insights and perform sophisticated data transformations. In...
May 16, 2022
Author: Hussein NM
In this article, I will show the most performant way to write queries for a collection of objects in .Net Core. The article discusses the common methods of LINQ and their comparison. After reading this article, you may have to...
Mar 22
Author: Dayanand Thombare
IntroductionDelegates 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 parameters,...
Написать сообщение
Почта
Имя
*Сообщение


© 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