CSS

CSS

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

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

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

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

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

 

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

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

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

 

 

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

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

 

 

Здравствуйте! Продолжаем  разбиратться с  версткой на гридах. Итак из прошлых уроков  вы уже знаете как создавать строки и столбцы в грид как задавать размеры грид-элементам, а из этого урока вы узнаете как задавать интервалы между строками и столбцами в грид-сетке.   Итак для  задания интервалов  между столбцами и строками используются свойства grid-column-gap и grid-row-gap.

Отступы между строк истолбцов gris layout

 

Здравствуйте! Продолжаем разбираться с версткой на основе Grid Layout. И в этом уроке в продолжении урока по строкам и столбцам grid разберем как задавать размеры строкам и столбцам в  сетке grid. Размеры можно задавть как фиксироваными, так и автоматическими. А сейчас давайте разбираться по порядку.

Размеры строк и столбцов в Grid

Здравствуйте! Продолжаем изучать новую технологию верстки с помощью Grid Layout. На прошлом уроке мы с вами разбирались со столбцами и строками в grid, а теперь поговорим о таком вопросе как повторение строк и столбцов и как все это можно оптимизировать. Дело в том, что когда у вас много строк и столбцов и вы хотите задать для них одинаковые размеры, то совсем необязательно прописывать все эти размеры. Достаточно написать один размер, а затем с помощью специальной функции repeat() повторить эти размеры. Итак  давайте разбираться.

Повторение строк и столбуов и функция grid

 

 Здравствуйте! Продолжаем разбираться  с версткой на grid  layout. Из прошлого урока вы узнали что такое Grid Layout.  А сегодня мы с вами разберем свойства grid-template-columns и grid-template-rows. Grid Layout  создает своеобразную сетку, состоящую  из строк и столбцов, на пересечении оных есть ячейки.  А вот как раз  для установки строк и столбцов в грид применяются такие  свойства CSS3:

  • grid-template-columns: управляет столбцами

  • grid-template-rows: управляет строками

Строки и столбцы в Grid Layout

Здравствуйте! Этой статьей я начинаю цикл материалов посвященных Grid Layout. В этой статье я расскажу что такое Grid Layout и Grid Container. Grid Layout  это такой модуль CSS3, который позволяет выстраивать элементы на странице сеткой или таблицей. Также как и модуль  Flexbox Grid Layout позволяет  задавать положение элементов, только в отличие от флекса он может сразу поизиционировать элемент в 2-х осях как по вертикали так и по горизонтали в отличие от флексбокса, который может только в какой-то одной оси об остальных отличиях флксбокса и грида читайте здесь.

Ну а спецификацию на модуль Grid Layout можно почитать на сайте www.w3.org/TR/css-grid-1/.

Что такое grid layout

 

Здравствуйте! В этой статье я решил провести сравнение двух популярных технологий для верстки сайтов CSS Grid и Flexbox. Ещё не так давно  макет для всех страниц HTML верстался с помощью таблиц, float и других свойств CSS, которые не очень хорошо подходят для стилизации сложных веб-страниц.

Затем появился Flexbox — режим вёрстки, который был специально разработан для создания надёжных адаптивных страниц. Flexbox упростил правильное выравнивание элементов и их содержимого и теперь является предпочтительной системой CSS для большинства веб-разработчиков.

Но теперь у нас есть новый претендент на титул за звание «лучшей системы для вёрстки макетов HTML» (название титула ещё в процессе разработки»). Это CSS Grid и в ближайшее время эта система будет доступна в браузерах Firefox 52 и Chrome 57, а вскоре, как я надеюсь, и в других браузерах.

Базовый макет

Чтобы понять, каково это — создавать макеты на каждой системе, мы сделаем одну и ту же HTML-страницу дважды — один раз с помощью Flexbox, а затем на CSS Grid. Вы можете скачать оба проекта отсюда.

Уменьшенный макет веб-страницы

Дизайн довольно простой — он состоит из выровненного по центру контейнера, внутри которого у нас есть шапка, основной раздел, боковая панель и подвал. Вот главные «испытания», которые мы должны провести, сохраняя CSS и HTML по возможности чистыми:

  1. Разместить четыре основных раздела макета.
  2. Сделать страницу адаптивной (боковая панель опускается ниже основного содержимого на маленьких экранах).
  3. Выровнять содержимое шапки — навигация слева, кнопка справа.

Как вы можете видеть, ради сравнения мы оставили всё максимально простым. Начнём с первого испытания.

Здравствуйте! В этой статье я хотел бы рассказать о такой полезной функции в css как calc(). Эта функция позволяет производить арифметические вычисления над элементами страницы причем может работать как с абсолютными так и с отностельными размерами CSS. То есть если ширина элемента задана в процентах, то можно от процентов отнять пиксели и наоборот.

Страница 1 из 8