Будьте в курсе последних событий, подпишитесь на обновления сайта

Уроки CSS

Уроки CSS предназначены  на тех, кто знает HTML. Здесь Вы найдете уроки о том как сделать Ваши сайты адаптивными, стильными, красивыми и добавить эффекты анимации и переходов на Ваши страницы.

Создание тем CSS

Здравствуйте! Я уже писал о создании  переменных в CSS. А  сегодня  хочу как  раз привести пример  использование этих самых  переменных. И как мне кажется самым  простым способом использования переменных в CSS может стать  создание тем.

создание тем в css с помощью переменных

Итак давайте рассмотрим на конкретном примере. Пусть дана такая страница.

Читать далее

Переменные в CSS

Здравствуйте! Я уже писал о препроцессорах Less и Sass. Так вот у них есть возможность использовать переменные в которых можно сохранять значения CSS свойств.  Но теперь эта возможность  появилась и в чистом CSS без всяких там препроцессоров. Вот о ней  я и хочу  рассказать в этой статье.

переменные в css

Хочу заметить, что хотя часто и используется термин «переменные» (css variables), но официально они называются custom properties (кастомные  свойства).

Читать далее

Все про grid. Наиболее полное руководство по css grid.

Здравствуйте! В этой статье я хотел бы обобщить все те свойства grid  layout,  которые были рассмотрены в предыдущих уроках по верстки на  grid.  Система grid  позволяет задавать направление элементам на странице сразу в 2-х направлениях в отличие от того же Flexboxa где можно задавать только в одном направлении.

css grid layout

Читать далее

Именованные grid-линии и функция repeat

Здравствуйте! Я уже  писал о именованных линиях в сетке grid.  А в этом уроке мне хотелось бы рассмотреть  более детально  функцию repeat в  грид верстке. С помощью этой функции repeat вы  можете размножить столбцы и строки, которые вы создаете  как раз между именованными grid-линиями:

Давайте как всегда рассмотрим на примере.

именованные грид линии и функция repeat

 

Читать далее

Как сделать макет страницы на Grid Layout

Здравствуйте! В этом завершающем уроке по верстке на грид  мне хотелось бы рассмотреть создание простейшего макета страницы  с помощью Grid Layout. Наш макет будет состоять из шапки, футера или подвала, области контента, панели навигации и боковой панели или сайдбара.

Давайте создадим вот такую страницу.

 

макет страницы на основе грид

 

Читать далее

Области грида

Здравствуйте! В этом уроке мы рассмотрим такое понятие как  области в Grid Layout. Эти области мы можем задавать c помощью вертикальных и горизонтальных линий, которые и будут задавать  границу этой области. Области могут включать несколько ячеек грида и особенно полезны при определении семантических отношений между элементами на странице.

 

Области грида

 

Читать далее

Именованные grid-линии в Grid Layout

Здравствуйте! В этом уроке речь пойдет о  именованных линиях в  Grid Layout. Дело в том, что  в гридах  мы можем дать для каждой линии грида, название, указав это название в  квадратных скобках, а затем это можно использовать для  позиционирования элементов по сетке грид. Давайте для примера, создадим  такую веб-страницу:

Именнованные линии в грид

 

 

Читать далее

Направление и порядок элементов в сетке grid

Здравствуйте! В этом уроке в продолжении темы Верстка на grid рассмотрим как в гридах можно менять направление и порядок расположения элементов. А именно свойства grid-auto-flow и order.

Свойство grid-auto-flow

В грид-контейнере  всегда  все элементы располагаются  горизонтально то есть в  ряд, а как тоько места в контейнере больше нет, то элементы переносятся соответственно на следующую строку. А вот с помощью свойства grid-auto-flow  можно изменить направление элементов. Собственно  свойство принимает 2 значения:

  • row:  это значение по умолчанию, элементы  могут располагаться горизонтально,  а как только  места уже не будет хватать  будут  переноситься на следующую строку
  • column: элементы будут  располагаться вертикально друг под другом,  а как только места в столбце не будет  хватать, то  элементы  будут переноситься  на следующий столбец

порядок и направление элементов в гриде

 

 

Читать далее

Наложение элементов grid

Здравствуйте! На прошлом уроке мы с Вами рассмотрели позиционирование элементов в сетке грид, а на этом рассмотрим такую особенность, которая возникает при позиционировании элементов, как  наложение элементов в гриде.

Изменяя положение элементов вы легко можете накладывать элементы друг на друга, при этом будут  создаваться  слои из элементов. Например, определим следующий грид-контейнер:

 

наложение элементов grid

Читать далее

Позиционирование элементов в Grid

Здравствуйте! В этом уроке рассмотрим как позиционируются элементы в грид-сетке. По сути грид-сетка  представляет из себя  набор ячеек, которые получаются  на пересечении столбцов и строк. А сами строки и столбцы образуются с помощью grid-линий:

 

Позиционирование элементов grid

Читать далее

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: