CSS новые возможности 2023

� аспутывая мир CSS: основы, включение, использование и препроцессоры

Введение.

CSS (Cascading Style Sheets) — это стилевой язык, используемый для визуального оформления HTML-страниц. CSS в настоящее время находится на вершине популярности и обеспечивает веб-дизайнерам и разработчикам безграничные возможности для создания уникальных и красивых веб-страниц.

Каскадные таблицы стилей (CSS) — это мощный язык, управляющий визуальным представлением элементов HTML на веб-странице. Как начинающий веб-разработчик или дизайнер, понимание того, что такое CSS и как его эффективно использовать, имеет решающее значение для создания визуально привлекательных и удобных веб-сайтов. В этом увлекательном руководстве мы рассмотрим темы, которые необходимо изучить в CSS, как включить CSS в HTML, для чего используется CSS и роль препроцессоров в CSS.

CSS — это: основа стиля веб-страницы CSS — это язык таблиц стилей, определяющий макет, цвета, шрифты и общий вид веб-страницы. Отделяя структуру контента (HTML) от его представления (CSS), разработчики могут создавать более организованный и удобный для сопровождения код, а дизайнеры могут раскрыть свой творческий потенциал и дизайнерское мастерство.

Основные темы для изучения в CSS: Чтобы начать свое путешествие по CSS, важно изучить следующие основные концепции:

• Селекторы: они нацелены на определенные элементы HTML для применения стилей.
• Свойства и значения. Свойства определяют аспекты элемента, который вы хотите стилизовать, а значения определяют, как должны выглядеть эти аспекты.
• Единицы: такие единицы, как пиксели, ems и проценты, определяют размеры и расстояние между элементами.
• Псевдоклассы и псевдоэлементы: они позволяют стилизовать определенные состояния или части элемента.
• Медиа-запросы. Медиа-запросы позволяют создавать адаптивный дизайн, который адаптируется к различным устройствам и размерам экрана.

Что нового в CSS в 2023 году

Некоторые новые функции в CSS, которые уже доступны для использования.

font-size: clamp(1rem, 2vw, 1.5rem);

backdrop-filter: blur(3px);

backdrop-filter: none;

backdrop-filter: url(commonfilters.svg#filter);

backdrop-filter: brightness(50%);
backdrop-filter: contrast(40%);
backdrop-filter: sepia(80%);
backdrop-filter: saturate(70%);
backdrop-filter: drop-shadow(3px 4px 15px blue);
backdrop-filter: invert(90%);
backdrop-filter: opacity(30%);
backdrop-filter: grayscale(20%);
backdrop-filter: hue-rotate(140deg);

backdrop-filter: url(filters.svg#filter) blur(5px) saturate(120%);

backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert-layer;
backdrop-filter: unset;
backdrop-filter: revert;

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;

gap: calc(10% + 20px);

scroll-snap-type: y mandatory;
scroll-snap-align: start;

aspect-ratio: 16/9;

:root { 
	--main-color: darkgreen; 
	--left-padding: 10px; 
}

a {
    color: var(--main-color);
	padding: var(--left-padding);
}

/* Без :is() */
h1.title, h2.title, h3.title {
	font-family: 'Roboto', sans-serif;
}

/* С использованием :is() */
:is(h1, h2, h3).title {
	font-family: 'Roboto', sans-serif;
}

/* Без :where() */
h1.title.red, h2.title.red, h3.title.red {
	color: red;
}

/* С использованием :where() */
:where(h1, h2, h3).title.red {
	color: red;
}

form:focus-within {
	border-color: blue;
}

img {
	object-fit: cover;
}

Как включить CSS в HTML

• Встроенный CSS(inline): применяйте стили непосредственно к элементу HTML с помощью атрибута стиля(style=»…»). Однако этот метод не рекомендуется из-за отсутствия возможности повторного использования и обслуживания.
• Внутренний CSS: включите CSS в теги в разделе HTML . Этот метод подходит для небольших проектов или одностраничных сайтов.
• Внешний CSS: создайте отдельный файл style.css и свяжите его с вашим HTML-документом с помощью тега . Это предпочтительный метод для крупных проектов, поскольку он способствует организации кода и удобству сопровождения.

Для чего используется CSS

• CSS используется для: Настройка внешнего вида веб-страницы: CSS позволяет создавать уникальные и визуально привлекательные веб-сайты, соответствующие фирменному стилю вашего бренда.
• Улучшение взаимодействия с пользователем: CSS помогает улучшить читабельность, удобство использования и доступность веб-сайта.
• Создание адаптивного дизайна. С помощью CSS вы можете создавать веб-сайты, которые легко адаптируются к различным устройствам и размерам экрана.

Препроцессоры CSS

1. � Улучшение рабочего процесса CSS Препроцессоры CSS, такие как Sass, Less и Stylus, представляют собой языки сценариев, расширяющие возможности CSS. В них представлены такие функции, как переменные, вложенность и примеси, позволяющие писать более организованный, удобный и эффективный код CSS. Препроцессоры компилируют в стандартный код CSS, делая его совместимым с веб-браузерами. Компилировать можно с помощью GULP и WebPack.

В этом разделе мы предоставим примеры кода CSS, соответствующие концепциям, обсуждавшимся в предыдущем ответе.

Селекторы, свойства и значения:

/* Target an HTML element (e.g., paragraphs) */
p {
  color: blue;  /* Set the text color to blue */
  font-size: 16px;  /* Set the font size to 16 pixels */
}

/* Target an element with a specific class (e.g., .highlight) */
.highlight {
  background-color: yellow;  /* Set the background color to yellow */
}

/* Target an element with a specific ID (e.g., #main-heading) */
#main-heading {
  font-family: Arial, sans-serif;  /* Set the font family to Arial */
}

Единицы измерения:

/* Set the width, height, and margin using different units */
.container {
  width: 80%;  /* Percentage of the parent element's width */
  height: 200px;  /* Fixed height in pixels */
  margin: 1em auto;  /* Top/bottom margin in ems, left/right margin auto-centered */
}

Псевдоклассы и псевдоэлементы:

/* Style an anchor tag when hovered */
a:hover {
  text-decoration: underline;  /* Add underline on hover */
}

/* Style the first letter of a paragraph */
p::first-letter {
  font-size: 24px;  /* Set the font size of the first letter to 24 pixels */
  font-weight: bold;  /* Make the first letter bold */
}

Медиа запросы

/* Default styles for mobile devices */
body {
  font-size: 14px;  /* Set the font size to 14 pixels */
  margin: 0.5em;  /* Set the margin to 0.5 ems */
}

/* Styles for larger screens (e.g., tablets and desktops) */
@media screen and (min-width: 768px) {
  body {
    font-size: 16px;  /* Increase the font size to 16 pixels */
    margin: 2em;  /* Increase the margin to 2 ems */
  }
}

Препроцессоры CSS (пример Sass):

/* Declare a variable */
$primary-color: blue;

/* Use the variable in a selector */
.container {
  background-color: $primary-color;

  /* Nest a selector */
  p {
    color: darken($primary-color, 20%);  /* Use a built-in Sass function */

    /* Apply a mixin (reusable style block) */
    @include transition(color 0.3s ease-in);
  }
}

Примеры крутых анимаций на CSS

1. 1. Анимация загрузки на CSS
2. 2. Эффект параллакса на CSS
3. 3. Анимированный текст на CSS
4. 4. Анимированные кнопки на CSS
5. 5. Анимация градиента на CSS
6. 6. Анимация морской волны на CSS
7. 7. Анимация иконок социальных сетей на CSS
8. 8. Анимация переходов между страницами на CSS
9. 9. Анимированное меню на CSS
10. 10. Анимация переключения слайдов на CSS

Заключение