CSS

CSS

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

 

Здравствуйте! Продолжаем  разбиратться с  версткой на гридах. Итак из прошлых уроков  вы уже знаете как создавать строки и столбцы в грид как задавать размеры грид-элементам, а из этого урока вы узнаете как задавать интервалы между строками и столбцами в грид-сетке.   Итак для  задания интервалов  между столбцами и строками используются свойства 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. То есть если ширина элемента задана в процентах, то можно от процентов отнять пиксели и наоборот.

Здравствуйте! В этой статье мы поговорим о том, как сделать видео в качестве заднего фона для вашего сайта на HTML5. Тут все очень просто нужно создать тег <video> и с помощью стилей делаем его фоном как отдельного элемента так и всего <body>. Но давайте обо всем по порядку.

Как сделать видео фоном для сайта

Здравствуйте! В прошлой статье я писал о препроцессоре SASS. Сегодня я расскажу немного о другом препроцессоре - LESS. В принципе эти препроцессоры похожи но имеют несколько отличий, что связано с наименованием переменных.

Что такое LESS?

LESS относительно новый препроцессор, ему около 4 лет. Его часто сравнивают с SASS, более старым препроцессором. Как и LESS, так и SASS, имеют свои корни в языке программирования Ruby, но в настоящее время используются гораздо шире. LESS теперь основан на Javascript.

Люди, использующие LESS, могут создать заранее определенный набор цветов для своего сайта. Они могут определить особый стиль один раз и затем многократно использовать его везде, где необходимо.

Здравствуйте! После того как мы рассмотрели работу с программой Koala, которая нужна для компиляции кода на препроцессорах SASS и LESS. Разберем как работать с препроцессором SASS.

Препроцессинг

Написание CSS само по себе весело, но когда таблица стилей становится огромной, то становится и сложно её обслуживать. И вот в таком случае нам поможет препроцессор. Sass позволяет использовать функции недоступные в самом CSS, например, переменные, вложенности, миксины, наследование и другие приятные вещи, возвращающие удобство написания CSS.

Как только Вы начинаете пользоваться Sass, препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS-файл, который Вы сможете использовать на любом сайте.

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