CSS3

CSS3 - это язык стилей которые применяются к html элементам. Следует помнить что еще не все селекторы могут использоватся без префиксов. 3 версия css принесла много долгожданных новинок, таких как закругленные углы, тени, градиенты, переходы или анимации, а также новые макеты, такие как многостолбцовые, гибкие поля или макеты сетки.

Вся структура css3 называется набором правил (но зачастую для краткости "правило" ). На рисунке представлены имена отдельных частей: Части css3 правила

Селектор (Selector) Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор.
Объявление (Declaration) Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.
Свойства (Properties) Способы, которыми вы можете стилизовать определенный HTML элемент (в данном случае, color является свойством для элементов < p >). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.
Значение свойства (Property value) Справа от свойства, после двоеточия, у нас есть значение свойства, который выбирает одно из множества возможных значений для данного свойства (существует множество значений color, помимо red).

Обратите внимание на важные части синтаксиса: Каждый набор правил (кроме селектора) должен быть обернут в фигурные скобки ({}). В каждом объявлении необходимо использовать двоеточие (:), чтобы отделить свойство от его значений. В каждом наборе правил вы должны использовать точку с запятой (;), чтобы отделить каждое объявление от следующего.

Смена стилей в зависимости от размера екрана

~~CSS3~~ 12 0 27-09-2019, 13:39

Сейчас без респонсивной верстки которая должна подстраиватся под разные экраны, включая мобильные никак не обойтись. Расмотрим все варианты - как можно сменить вид сайта в зависимости от размера устройства на котором он просматрывается.

Анимация стрелок

~~css3 примеры и описание их создания~~ 27 0 19-08-2019, 21:55

Пример анимации движения стрелки на чистом css

border-radius

~~CSS3~~ 30 0 19-08-2019, 11:15

Это краткая запись для четырёх свойств border-top-left-radius, border-top-right-radius, border-bottom-right-radius иborder-bottom-left-radius.

Примеры использования flexbox в css

~~Flexbox~~ 51 0 4-07-2019, 16:09

Примеры наиболее частого использованя flexbox в css. Просто так их не придумали и у флексов есть то чего невозможно сделать с помощью обычного css. У Флексов есть минус - в контейнере (display: flex;) не работает абсолютное позиционирование.!

Шрифтовые иконки плюсы и минусы

~~css3 примеры и описание их создания~~ 35 0 28-06-2019, 00:57

Шрифтовые иконки очень часто используют в оформлении сайтов и за их универсальности в шаблонах сайта.

Смайлики для Фейсбука

~~css3 примеры и описание их создания~~ 56 0 25-06-2019, 22:23

Чтобы вставить смайлик в пост фейсбука, нужно вручную набирать символы, которые после отправки сообщения или публикации превратятся в смайлик.

Основные элементы сетки Grid

~~Grid~~ 47 0 5-05-2019, 20:17

Grid - это мощная спецификация и в сочетании с другими частями CSS, такими как flexbox, может помочь вам создать макеты, которые ранее невозможно было построить в CSS. Все начинается с создания сетки в вашем grid контейнере.

css тени для текста в примерах

~~css3 примеры и описание их создания~~ 46 0 26-04-2019, 22:06

Cвойство CSS3 text-shadow, на первый взгляд очень простое, но если проявить немного фантазии, то можно сделать с текстом маленькое чудо.

flex-shrink - Коэффициент сжатия

~~Flexbox~~ 87 0 20-03-2019, 02:26

Свойство flex-shrink CSS устанавливает коэффициент сжатия flex-элемента. Если размер изгибаемых элементов больше, чем у гибкого контейнера, то элементы сжимаются, чтобы соответствовать размеру изгиба.

flex-basis - Начальный основной размер

~~Flexbox~~ 58 0 20-03-2019, 02:19

Свойство flex-basis устанавливает начальный основной размер flex-элемента до распределения свободного пространства в соответствии с коэффициентами гибкости. Для всех значений, кроме auto и content, базовый гибкий размер определяется так же, как width в горизонтальных режимах записи. Процентные значения определяются относительно размера