Хотите начать 2018 год с новой профессией?

Реклама

В августе стартует профессия Фронтенд-разработчик для тех, кто серьёзно настроен стать профессионалом в сжатые сроки и взять максимум от обучения!

Профессия «Фронтенд-разработчик» это:

  • три проекта в портфолио;
  • больше работы с наставниками;
  • дополнительное время для работы над проектами;
  • специальные тестовые задания на трудоустройство.

Программа будет идти с 7 августа по 27 декабря и состоит из трёх ступеней:

  • базовый HTML и CSS;
  • продвинутый HTML и CSS;
  • базовый JavaScript.

Позаботься о своей будущей профессии летом и уже зимой станешь востребованным фронтенд-разработчиком. Регистрируйся сейчас, количество мест ограничено.

Структурные элементы страницы

Набор структурных элементов HTML5 вызывает массу вопросов у начинающих верстальщиков. Чем отличается <article> и <section>? В каком случае надо писать <main>, а в каком <article>? Что ставить в <aside>? Можно ли добавлять <section> в <footer>? В общем, вместо того, чтобы облегчить работу и упростить код, эти элементы только запутали. Казалось бы, есть спецификация HTML, к ней и надо обращаться по спорным вопросам. Но беда в том, что тексты спецификации можно трактовать по разному, поэтому на форумах часто происходят словесные баталии, каждый отстаивает свою противоположную позицию.

На деле, какой элемент применять в том или ином случае должен решать сам верстальщик, исходя из содержимого веб-страницы. Потому что речь идёт о структурных элементах, которые определяют структуру документа, а она для каждого сайта может быть своей. Вот типовые блоки любого сайта:

  • «шапка»;
  • «подвал»;
  • навигация;
  • статья;
  • боковая панель;
  • раздел.

«Шапка»

Как правило, располагается вверху веб-страницы, содержит название сайта, главное меню, поисковую форму.

«Подвал»

Обычно располагается в самом низу веб-страницы, в подвале пишут копирайты, ставят иконки соцсетей, форму подписки, дублируют навигацию.

Навигация

Это главное меню сайта, ссылки для перехода к основным разделам сайта.

Статья

Простыня текста с названием, содержимым, датой публикацией, именем автора.

Боковая панель

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

Раздел

Раздел — это основная структурная единица при делении сайта на блоки. В основном, раздел содержит заголовок и содержимое, но может обходиться и без заголовка как, к примеру, с рекламным блоком.

Примерно определили, из чего состоит любой сайт и теперь вспомним, какие элементы для них есть в HTML5:

  • <main>
  • <header>
  • <footer>
  • <section>
  • <nav>
  • <article>
  • <aside>

<main>

Это элемент, внутри которого располагается уникальное главное содержимое веб-страницы. Есть ряд правил касательно применения <main>:

<main> в коде должен быть в единственном экземпляре;
<main> не должен включать повторяющиеся от страницы к странице элементы, вроде логотипа, названия сайта, баннеров и др;
<main> не влияет на схему документа;
<main> нельзя вставлять внутрь <article>, <aside>, <footer>, <header> или <nav>.

В основном применяется как обёртка для статьи с заголовком, именем автора, датой публикации, комментариями.

<header>

Используется для «шапки» сайта, преимущественно. Но этим роль не ограничивается из-за того, что в коде может быть несколько элементов <header>. Так что его можно вставлять как заголовки разделов, например, статьи.

<footer>

Применяется для «подвала». Как и в случае с <header> это может быть «подвал» сайта или «подвал» статьи.

<section>

Раздел документа или иными словами, содержимое, группированное по какому-либо принципу. <section> является типовым элементом для разбиения содержимого веб-страницы на тематические блоки. Фактически, другие элементы, вроде <nav>, <article>, <aside>, являются частными случаями <section>.

<nav>

Применяется для навигации по сайту и содержит ссылки для перехода на другие веб-страницы. <nav> используется не для всех блоков ссылок, а только для наиболее важных, такой блок, как правило, на странице один. Даже если у вас навигация дублируется внизу страницы, в <nav> добавляется только первый, более важный блок.

<article>

Законченная единица содержимого, такая как запись блога, сообщение форума, статья, комментарий пользователя.

<aside>

Это раздел веб-страницы, который косвенно связан с основным её содержимым. Может использоваться для следующих вещей: боковая панель, врезка, цитата, ссылки, информация об авторе, реклама и др. <aside> располагается не обязательно сбоку, к примеру, статьи, но и внутри, сверху, снизу, в общем, там, где это продиктовано содержимым.

Заметьте, что везде мы делаем акцент на содержимом и уже исходя из него выбираем какой элемент подойдёт. Если нужно сделать декоративный блок чисто для дизайнерских целей, то воспользуйтесь элементом <div>.

В следующий раз рассмотрим, как эти элементы применять на практике.

Изучаем флексбоксы — механизм раскладки современного верстальщика

Реклама

Флексбоксы — это система раскладки блоков в CSS, которая в отличие от таблиц, флоатов и инлайн-блоков предназначена именно для этого. С помощью них действительно удобно управлять колонками и блоками в своей вёрстке.

Хотите узнать как работают флекбоксы и как их применять на практике? HTML Academy открывает доступ к платным курсам про флекбоксы для всех желающих до 28 июня 2017 года:

Пройдя эти онлайн-курсы, вы научитесь:

  • выравнивать и переносить флекс-элементы;
  • управлять их размерами и отступами;
  • применять коэффициенты растяжения и сжатия;
  • создавать «гибкие» раскладки и элементы интерфейса.

Можно ли оборачивать ссылкой блок?

В HTML4 ответ на этот вопрос однозначный — внутрь ссылки можно вставлять только текстовые элементы и картинки. И для простых ситуаций с этим никаких проблем нет — если нам нужно, к примеру, сделать заголовок ссылкой, то <a> мы добавляем внутрь <h1>, но никак не наоборот.

<h1><a href="1.html">Заголовок</a></h1>

При этом надо помнить, что область ссылки ограничена размером текста. <h1> элемент блочный, он занимает всю ширину области просмотра, а ссылка строчная, её размер определяется размером содержимого. Так что щелчок не по тексту, а просто по этой строке ничего не даст. Для данного примера это может и не принципиально, а вот для какого-нибудь меню, где пункты меню визуально больше текста, важно. Поэтому мы модифицируем стиль ссылки, чтобы она занимала всё пространство внутри блока.

a {
  display: block;
}

Вот теперь размер ссылки равен размеру блока и щелчок по любому месту блока воспринимается как переход по ссылке.

В более сложных и распространённых ситуациях блок представляет собой комбинацию заголовка, картинки и подписи к ней. Вспомните любой интернет-магазин с витриной товаров и вы поймёте, насколько популярны блоки, которые одновременно являются ссылками, ведь они должны вести на описание товара. Код HTML может быть примерно таким.

<div class="stock">
  <div class="stock-img">
    <a href="/stock/gimnasticheskiy-myach">
      <img src="/images/stock/thumb/fitbol.jpg" width="150" height="150" alt="">
    </a>
  </div>
  <div class="stock-title">
    <a href="/stock/gimnasticheskiy-myach">Гимнастический мяч</a>
  </div>
</div>

Таким образом, каждую часть нашего блока (картинку и название) мы оборачиваем одной и той же ссылкой и в стилях ставим ей свойство display со значением block. Тогда весь блок целиком визуально будет представлять собой одну ссылку, хотя на деле это набор ссылок.

Всё это относилось к HTML4, и на наше счастье в HTML5 ситуация поменялась. При этом, все описанные приёмы остались с нами, но и добавилось кое-что новое. Теперь мы можем внутрь ссылки вставлять блоки целиком. Вот как преобразуется наш код с учётом новых правил HTML5 и его новых элементов.

<a href="/stock/gimnasticheskiy-myach">
  <figure class="stock">
    <img src="/images/stock/thumb/fitbol.jpg" width="150" height="150">
    <figcaption>Гимнастический мяч</figcaption>
  </figure>
</a>

Код теперь выглядит нагляднее и проще.

Ещё на эту тему вы можете посмотреть видео, в котором раскрываются другие аспекты на тему ссылок и блоков.

Таблицы

Постепенно расширяю самоучитель HTML на сайте webref.ru, добавляя в него отсутствующие моменты. Не хватало таблиц — вот вам таблицы. Как и с остальными материалами самоучителя, это не просто текст, а ещё набор заданий для проверки знаний, плюс небольшая практика с автоматической проверкой кода. Наслаждайтесь!

Бесплатные онлайн-курсы для изучения HTML и CSS

Реклама

Изучить с нуля HTML и CSS легко в HTML Academy.

Инструктор Кекс станет проводником в мир вёрстки, вместе вы научитесь:

  • создавать структуру документа и подключать стили и скрипты;
  • правильно размечать документ, используя теги;
  • использовать текстовые поля, выпадающие списки, кнопки и другие элементы форм;
  • оформлять вёрстку с помощью CSS;
  • позиционировать элементы и создавать декоративные эффекты.

19 бесплатных разделов, включающих 400 интерактивных заданий и более 27 испытаний. После прохождения вы сможете сверстать свой первый сайт.

Начните свой путь к профессии мечты сейчас.

Блочные и строчные элементы

На webref.ru появился новый небольшой курс Блочные и строчные элементы. Рассказывается про блочные, строчные и строчно-блочные элементы с примерами их использования. В каждом уроке есть вопросы для проверки, в конце можно проверить знания через систему тестирования.

Курс не для новичков, предполагается, что вы уже знакомы с HTML и CSS.

Самоучитель HTML

На сайте webref.ru стал доступен самоучитель HTML. Более 50 вопросов для проверки, несколько десятков интерактивных упражнений на закрепление материала, почти два десятка практических заданий по редактированию кода.

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

Простейший способ создания адаптивной шапки

Оригинал: tutorialzine.com/2016/02/quick-tip-easiest-way-to-make-responsive-headers/
Перевод: Влад Мержевич

Создание симпатичной и адаптивной «шапки» сайта — процесс всегда непростой. Для этого приходилось использовать float или другие сложные трюки и даже вручную настраивать значения пикселей. Но всё это позади!

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

Техника

В нашем демонстрационном примере мы построили шапку, которая разделена на три части с типичным для шапки содержимым внутри:

  • Левая часть — логотип компании.
  • Средняя часть — разные ссылки.
  • Правая часть — кнопка.

Ниже вы можете ознакомиться с упрощённой версией кода.

В первой вкладке располагается HTML, в котором мы группируем части через отдельные теги <div>. Это упрощает применение правил CSS и в целом порождает более организованный код.

В другой вкладке находится CSS, который буквально парой строк выполняет всю работу по нахождению нужных мест для каждой части.

Нажмите кнопку «Выполнить», чтобы открыть демонстрацию. Вы можете протестировать адаптивность, изменяя размеры фрейма.

<header>
	<div class="header-left">Логотип</div>
	<div class="header-center">
		<ul>
			<li><a href="#">Продукция</a></li>
			<li><a href="#">Цены</a></li>
			<li><a href="#">Блог</a></li>
		</ul>
	</div>
	<div class="header-right"><button>Купить</button></div>
</header>
header{
	/* Включаем режим Flexbox. */
	display: flex; 
	
	/* Распределяем элементы внутри шапки */
	justify-content: space-between;

	/* Выравниваем элементы вертикально по центру. */
	align-items: center;
}
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Простейший способ создания адаптивной шапки</title>
<link href='https://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet'>

<style>
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font: normal 16px sans-serif;
	padding: 0 10%;
	background: #eee;
}

body .container{
	max-width:1200px;
	margin:0 auto;
}

/*	Header	*/

header{
	/* Включаем режим Flexbox. */
	display: flex; 
	/* Распределяем элементы внутри шапки */
	justify-content: space-between;
	/* Выравниваем элементы вертикально по центру. */
	align-items: center;

	padding: 40px 100px;
	color: #fff;
	background-color: #488EAD;
}

.header-left{
	font: normal 28px 'Fugaz One', cursive;
}

.header-left span{
	color: #EAD314;
}

.header-center ul{
	list-style: none;
}

.header-center ul li{
	display: inline-block;
	margin: 0 15px;
}

.header-center ul li a{
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	font-weight: bold;
}

.header-right button{
    color: #fff;
    cursor: pointer;
    font-weight: 800;
    text-transform: uppercase;
    padding: 12px 30px;
    border: 2px solid #FFFFFF;
    border-radius: 4px;
    background-color: transparent;
}

.header-right button:hover {
    background-color: rgba(255,255,255,0.1);
}

/* Основное содержимое */

.main-content{
	padding: 60px 100px;
	background-color: #fff;
    line-height: 1.5;
    color: #444;
}

.main-content h2{
	margin-bottom: 38px;
}

.main-content p{
	margin: 30px 0;
}


.main-content .placeholder{
	margin: 40px 0;
	height:380px;
	background-color: #e3e3e3;
}


/* Медиа-запросы */

@media (max-width: 1200px){
	header{
		padding: 40px 60px;
	}

	.main-content{
		padding: 100px 60px;
	}

	body {
	    padding: 0 5%;
	}
}

@media (max-width: 1000px){
	header{
		/* Меняем оси шапки, делая её вертикальной. */
		flex-direction: column;
		/* Выравниваем элементы шапки с начала (по левому краю). */
		align-items: flex-start;
	}

	header > div{
		margin: 12px 0;
	}

	.header-center ul li{
		margin: 0 15px 0 0;
	}

}

@media (max-width: 600px){
	body {
	    padding: 0 10px;
	}

	.header-left{
		margin-top:0;
	}

	header {
	    padding: 30px;
	}

	.main-content{
		padding:30px;
	}
}


</style>
</head>
<body>

<div class="container">
	
	<header>
		<div class="header-left"><span>Cool</span>Logo</div>
		<div class="header-center">
			<ul>
				<li><a href="#">Продукция</a></li>
				<li><a href="#">Цены</a></li>
				<li><a href="#">Блог</a></li>
			</ul>
		</div>
		<div class="header-right"><button>Купить</button></div>
	</header>

	<section class="main-content">
		<h2>Шапка с тремя выравниваемыми частями</h2>
		<p>Используя возможности Flexbox, логотип, ссылки и кнопка в нашей шапке остаются в обозначенных местах, независимо от размера экрана. Свойство <strong style="white-space: nowrap;">justify-content</strong> предлагает чистый подход и позволяет без проблем выровнять раздел шапки. Не нужны никакие float, margin или безумные расчёты ширины.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at congue urna, pellentesque faucibus justo. Integer a lorem a mauris suscipit congue luctus ut quam. Mauris pellentesque pellentesque mattis. In sed mi dignissim, faucibus elit at, rutrum odio. Mauris et velit magna. Maecenas iaculis eget sapien eu gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum a egestas magna. Aenean tellus elit, aliquet at lacinia at, accumsan eget neque. Maecenas rutrum risus quis sem scelerisque sagittis. Quisque sit amet turpis lorem. </p>
		<div class="placeholder"></div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at congue urna, pellentesque faucibus justo. Integer a lorem a mauris suscipit congue luctus ut quam. Mauris pellentesque pellentesque mattis. In sed mi dignissim, faucibus elit at, rutrum odio. Mauris et velit magna. Maecenas iaculis eget sapien eu gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum a egestas magna. Aenean tellus elit, aliquet at lacinia at, accumsan eget neque. Maecenas rutrum risus quis sem scelerisque sagittis. Quisque sit amet turpis lorem. </p>
	</section>

</div>

</body>
</html>

Полная адаптивность

Трюк со space-between всегда будет следить за выравниванием, даже когда меняется размер экрана. Однако когда область просмотра становится слишком маленькой для горизонтальной шапки, мы можем сделать её вертикальной, изменив свойство flex-direction в медиа-запросе.

@media (max-width: 1000px){
  header{
    /* Меняем оси шапки, делая её вертикальной. */
    flex-direction: column;
  
    /* Выравнивание элементов шапки с начала (по левому краю). */
    align-items: flex-start;
  }
}

Выводы

Подведём итог нашего краткого руководства! Надеемся, что вы сочли его полезным и сразу начнёте его применять. В настоящее время Flexbox довольно хорошо поддерживается браузерами, так что если ваши пользователи не предпочитают IE, то эта техника может применяться без всякого вреда.

Чтобы узнать больше о Flexbox и об используемых нами свойствах CSS, ознакомьтесь со следующими ссылками:

CSS Grid и Flexbox: сравнение на практике

Оригинал: http://tutorialzine.com/2017/03/css-grid-vs-flexbox/
Перевод: Влад Мержевич

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

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

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

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

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

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

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

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

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

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

Испытание 1. Размещение разделов страницы

Решение на Flexbox

Добавляем display: flex к контейнеру и задаём направление дочерних элементов по вертикали. Это позиционирует все разделы друг под другом.

.container {
  display: flex;
  flex-direction: column;
}

Теперь нам нужно сделать так, чтобы основной раздел и боковая панель располагались рядом. Поскольку flex-контейнеры обычно однонаправлены, нам нужно добавить дополнительный элемент.

<header></header>
<div class="main-and-sidebar-wrapper">
  <section class="main"></section>
  <aside class="sidebar"></aside>
</div>
<footer></footer>

Затем мы устанавливаем этому элементу display: flex и flex-direction с противоположным направлением.

.main-and-sidebar-wrapper {
  display: flex;
  flex-direction: row;
}

Последний шаг — задать размеры основного раздела и боковой панели. Мы хотим, чтобы основное содержимое было в три раза шире боковой панели, что несложно сделать с помощью flex или процентов.

.main {
  flex: 3;
  margin-right: 60px;
}
.sidebar {
  flex: 1;
}

Как вы можете видеть, Flexbox сделал всё хорошо, но нам кроме этого понадобилось довольно много свойств CSS плюс дополнительный элемент HTML. Давайте посмотрим, как будет работать CSS Grid.

Решение на CSS Grid

Существует несколько вариантов использования CSS Grid, но мы воспользуемся синтаксисом grid-template-areas, как наиболее подходящего для наших целей.

Сперва мы определим четыре grid-area, по одному на каждый раздел страницы:

<header></header>
<!-- Обратите внимание, что в этот раз нет дополнительных элементов -->
<section class="main"></section>
<aside class="sidebar"></aside>
<footer></footer>
header {
  grid-area: header;
}
.main {
  grid-area: main;
}
.sidebar {
  grid-area: sidebar;
}
footer {
  grid-area: footer;
}

Теперь мы можем настроить нашу сетку и определить расположение каждой области. Вначале код может показаться довольно сложным, но как только вы познакомитесь с системой сетки, он становится проще для понимания.

.container {
  display: grid;
  
  /* Определяем размер и число колонок нашей сетки. 
     Единица fr работает подобно Flexbox:
     колонки делят свободное пространство в строке согласно их значениям.
     У нас будет две колонки — первая в три раза больше второй. */
  grid-template-columns: 3fr 1fr;
  
  /* Связываем сделанные ранее области с местами в сетке.
     Первая строка — шапка.
     Вторая строка делится между основным разделом и боковой панелью.
     Последняя строка — подвал. */
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";

  /* Интервал между ячейками сетки будет 60 пикселей */
  grid-gap: 60px;
}

Вот и всё! Наш макет теперь будет соответствовать указанной выше структуре и мы его настроили так, что нам не придётся иметь дело с margin или padding.

Испытание 2. Делаем страницу адаптивной

Решение на Flexbox

Выполнение этого шага строго связано с предыдущим. Для решения на Flexbox нам придётся изменить flex-direction и отрегулировать margin.

@media (max-width: 600px) {
  .main-and-sidebar-wrapper {
    flex-direction: column;
  }
  
  .main {
    margin-right: 0;
    margin-bottom: 60px;
  }
}

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

Решение на CSS Grid

Поскольку мы уже определили grid-areas, нам просто нужно переопределить их порядок в медиа-запросе. Мы можем использовать ту же настройку колонок.

@media (max-width: 600px) {
  .container {
    /* Выравнивание областей сетки для мобильного макета */
    grid-template-areas: 
      "header header"
      "main main"
      "sidebar sidebar"
      "footer footer";
  }
}

Или можем переопределить весь макет с нуля, если считаем, что это решение чище.

@media (max-width: 600px) {
  .container {
  /* Переделываем сетку в одноколоночный макет */
  grid-template-columns: 1fr;
  grid-template-areas: 
    "header"
    "main"
    "sidebar"
    "footer";
  }
}

Испытание 3. Выравнивание компонентов шапки

Наша шапка включает некоторые ссылки навигации и кнопку. Мы хотим, чтобы навигация была слева, а кнопка справа. Ссылки внутри навигации должны быть выровнены относительно друг друга.

Решение на Flexbox

<header>
  <nav>
    <li><a href="#"><h1>Logo</h1></a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </nav>
  <button>Button</button>
</header>

Мы уже делали похожий макет на Flexbox в одной из наших старых статей — Простейший способ создания адаптивной шапки. Техника довольно простая:

header {
  display: flex;
  justify-content: space-between;
}

Теперь список навигации и кнопка выровнены правильно. Осталось только разместить пункты внутри <nav> по горизонтали. Проще это сделать с помощью display: inline-block, но поскольку мы собираемся целиком использовать Flexbox, применим решение только для него:

header nav {
  display: flex;
  align-items: baseline;
}

Только две строки! Совсем неплохо. Давайте посмотрим, как с этим справится CSS Grid.

Решение на CSS Grid

Чтобы разделить навигацию и кнопку, мы должны добавить display: grid к header и настроить двухколоночную сетку. Нам также понадобятся две дополнительные строки в CSS, чтобы позиционировать всё на соответствующих границах.

header{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
header nav {
  justify-self: start;
}
header button {
  justify-self: end;
}

Что касается ссылок в одну строку внутри навигации, у нас не получилось сделать это корректно с CSS Grid. Вот как выглядит наша лучшая попытка:

Ссылки строчные, но они не могут быть выровнены правильно, поскольку не существует варианта baseline, как у align-items. Мы также должны определить ещё одну вложенную сетку.

header nav {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: end; 
}

Понятно, что CSS Grid не справилась с этой частью макета, но это и не удивительно — основное внимание уделяется выравниванию контейнеров, а не содержимому внутри них. Эта система не для нанесения последних штрихов.

Выводы

Если вы прочитали статью целиком (а это отличная работа!), выводы не должны вас удивить. На деле нет лучшей системы — и Flexbox и CSS Grid хороши по своему и должны использоваться совместно, а не как альтернатива друг другу.

Для тех из вас, кто перепрыгнул непосредственно к выводам этой статьи (не волнуйтесь, мы тоже так делаем), вот краткий итог сравнения:

  • CSS Grid отлично подходит для создания большой картины. Эта система облегчает управление макетом страницы и даже может иметь дело с нестандартным и асимметричным дизайном.
  • Flexbox отлично подходит для выравнивания содержимого внутри элементов. Используйте эту систему для размещения мелких деталей дизайна.
  • Используйте CSS Grid для двумерных макетов (строк И колонок).
  • Flexbox лучше работает только в одном измерении (со строками ИЛИ с колонками).
  • Нет причин применять только CSS Grid или только Flexbox. Изучайте их и используйте совместно.

Создайте дизайн вашего первого сайта уже сегодня

Реклама

Прямо сейчас забирайте БЕСПЛАТНО практический пошаговый видеокурс по созданию дизайна лендинга.

Проходите всего по одному короткому уроку в день, и за ближайшие 8 дней вы получите дизайн современного лендинга.

Посмотрите бесплатные видеоуроки

Начинаем работать с CSS-счётчиками

Оригинал: scotch.io/tutorials/getting-started-with-css-counters
Перевод: Влад Мержевич

Для веб-разработчиков правильное представление информации стоит на первом месте. Одним из способов соответственного отображения информации — обозначить иерархию, отвечая на вопрос «что идёт первым?».

Верный путь для обозначения иерархии — через нумерацию объектов. Кроме нумерованного списка в CSS нет другого элемента, который позволяет нам увеличивать порядок. Если бы мы хотели отобразить числа, то должны были сделать некоторую подготовку. Слежение за индексом, его автоинкремент и др. Что-то вроде этого.

PHP

<ul class="numbered-list">
  <?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
  <li class="numbered-list__item">
  <span class="numbered-list__counter">
  <?php echo $i ?>
  </span>
  <!-- Остальная разметка -->
  </li>
  <?php endfor ?>
</ul>

Это хорошо до определённой степени, но здесь имеются свои ограничения. Что, если мы хотим использовать буквы, римские цифры, греческие символы и др. Реализация чего-либо потребует использования пользовательских библиотек.

К счастью, в CSS мы можем реализовать подобные вещи, не прилагая особых усилий.

Сброс и инкремент счётчика

Прежде чем делать счётчики на CSS, вы должны знать, что счётчик включает в себя две вещи: сброс и инкремент. Сброс — это то, где мы сбрасываем счётчик или даём ему начальную точку. Инкремент фактически увеличивает счётчик. Давайте быстро набросаем нашу разметку.

Всё, что нам нужно — это базовая, но простая для понимания разметка. В нашем CSS-файле нужно определить сброс и инкремент.

HTML

<ul class="numbered-list">
  <li class="numbered-list__item">
  <span class="numbered-list__counter"></span>
  <span class="numbered-list__text">Minion ipsum</span>
  </li>
</ul>

Установим <li class="numbered-list"></li> в качестве точки сброса. Для этого мы просто делаем следующее.

CSS

.numbered-list {
  counter-reset: counter-name;
}

Замечание: counter-name может быть произвольным.

Поскольку мы установили нашу точку сброса, то должны сообщить <span class="numbered-list__counter"></ span> увеличивать его значение. Для этого мы используем следующее.

CSS

.numbered-list__counter {
  counter-increment: counter-name;
}

Обращаясь к указанной выше точке сброса, мы говорим счётчику через counter-increment начинать считать. В таком виде наш пример пока не работает.

Поскольку счётчик является генерируемым контентом, вроде :before и :after, нам нужно вставлять счётчики с помощью свойства content в :after, либо в :before. Кроме того, CSS-функция counter позволяет идеально сбросить значение счётчика.

CSS

.numbered-list__counter:before {
  counter-increment: counter-name;
  content: counter(counter-name);
}

Примечание. Я опустил стиль содержимого, чтобы свести наш CSS к минимуму.

Смещение индекса инкремента

counter-increment также может принимать положительное или отрицательное значение для изменения шага инкремента.

CSS

counter-increment: counter-name 2;
/* counter-increment: counter-name +2; */

Это увеличит инкремент на множитель 2. Чтобы поменять инкремент на обратный, вы можете использовать отрицательное значение, что уменьшит значение индекса на указанный множитель.

CSS

counter-increment: counter-name -2;

Изменение начальной точки счётчика

Передача целого числа после объявления counter-reset говорит браузеру изменить смещение начального значения.

CSS

.numbered-list {
  counter-reset: counter-name 2;
}

Задав значение равным 2, мы начинаем счётчик с 3, вроде этого. Вы также должны знать, что значение counter-reset по умолчанию равно 0.

Обратная нумерация

Обратная нумерация использует отрицательный индекс для counter-increment. Но это также может привести к сложностям, потому что если список генерируется динамически, пользователь должен найти способ отслеживать индекс.

Сам видел, что люди делают нечто вроде этого.

PHP

<ul class="numbered-list" style="counter-reset: name {{{PHP1}}};">
  <?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
  <li class="numbered-list__item">
  <span class="numbered-list__counter">
  <?php echo $i ?>
  </span>
  <!-- Остальная разметка -->
  </li>
  <?php endfor ?>
</ul>

Счётчик сбрасывается строчно через генерацию в PHP значения counter-reset. В CSS-файле мы можем затем установить отрицательное значение для counter-increment.

Использование других форматов

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

Если вы являетесь поклонником римских цифр (как я), то для использования римских цифр всё, что вам нужно сделать, это просто передать второй параметр (lower-roman) в функцию counter.

CSS

content: content(counter-name, lower-roman);

Другие варианты включают: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha.

Поддержка браузерами

Как говорится, «одна картинка стоит тысячи слов». Этот график от CanIUse иллюстрирует, насколько широко поддерживаются счётчики в CSS. Они хорошо поддерживаются в Internet Explorer и Safari, что говорит о многом. Поэтому вам не стоит беспокоиться об использовании счётчиков, они массово поддерживаются браузерами.

Лично я считаю, что CSS-счётчики — это круто. Некоторым людям подсчёт с помощью CSS кажется непонятным и они продолжают использовать имеющийся у них метод.

Меняющееся гамбургер меню на CSS

Оригинал: scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css
Перевод: Влад Мержевич

Недавно я обнаружил эту потрясающую картинку на dribbble.com от Виталия Рубцова и не мог удержаться от желания её реализовать.

В этом уроке я расскажу, как сделать такое с помощью одного CSS, без какого-либо использования JavaScript. Итак, мы увидим некоторые трюки CSS (и SCSS), которые позволят нам добиться почти такой же плавной анимации, как и этот анимированный gif.

Вот пример того, что мы будем делать:

Разметка

Начнём со структуры HTML, которую мы будем использовать. Смотри комментарии для лучшего понимания.

HTML

<div class="container">
 <!-- Этот чекбокс даст нам поведение переключателя, 
  он будет скрыт, но работать -->
 <input id="toggle" type="checkbox">
 <!-- ВАЖНО: любой элемент, который мы хотим модифицировать при изменении 
  состояния чекбокса, является «братским» элементом для чекбокса -->
 <!-- Эта метка привязана к чекбоксу и будет содержать переключение «кнопок» -->
 <label class="toggle-container" for="toggle">
 <!-- Если меню открыто, то здесь будет иконка «X», 
  в противном случае просто иконка гамбургера -->
  <span class="button button-toggle"></span>
 </label>
 <!-- Навигация -->
 <nav class="nav">
  <a class="nav-item" href="">Управление</a>
  <a class="nav-item" href="">История</a>
  <a class="nav-item" href="">Статистика</a>
  <a class="nav-item" href="">Настройки</a>
 </nav>
</div>

Начальные стили SCSS

Теперь добавим некоторые базовые стили, чтобы получить желаемый внешний вид. Код довольно простой.

SCSS

/* Базовые стили */
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
}
body {
  font-family: sans-serif;
  background-color: #F6C390;
}
a {
  text-decoration: none;
}
.container {
  position: relative;
  margin: 35px auto 0;
  width: 300px;
  height: 534px;
  background-color: #533557;
  overflow: hidden;
}

Работа переключателя

Прежде чем приступать к созданию остальной части интерфейса, добавим работу переключателя, чтобы легко переходить от одного состояния к другому.

Нужный нам HTML уже на месте. А стиль, который заставляет его работать, примерно такой:

SCSS

// Прячем чекбокс
#toggle {
  display: none;
}

// Стили для «открытого» состояния, когда чекбокс выбран
#toggle:checked {
// Любой элемент, стиль которого вам нужно изменить при открытии меню, идёт здесь с  селектором ~
  // Стили для открытия навигационного меню, к примеру
  & ~ .nav {
  }
}

Создание закрытого состояния

Чтобы сделать закрытое состояние, нам нужно преобразовать пункты меню в линии, чтобы получить иконку гамбургера. Есть несколько путей для получения такой трансформации. Мы решили сделать это следующим образом:

И вот код, который это реализует.

SCSS

$transition-duration: 0.5s;
// Отображение пунктов навигации в виде линий, составляющих иконку гамбургера
.nav-item {
  position: relative;
  display: inline-block;
  float: left;
  clear: both;
  color: transparent;
  font-size: 14px;
  letter-spacing: -6.2px;
  height: 7px;
  line-height: 7px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleY(0.2);
  transition: $transition-duration, opacity 1s;

  // Добавление ширины для первой линии
  &:nth-child(1) {
    letter-spacing: -8px;
  }

  // Добавление ширины для второй линии
  &:nth-child(2) {
    letter-spacing: -7px;
  }

  // Настройки для элементов, начиная с четвёртого
  &:nth-child(n + 4) {
    letter-spacing: -8px;
    margin-top: -7px;
    opacity: 0;
  }

  // Получение линий для иконки гамбургера
  &:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #EC7263;
    transform: translateY(-50%) scaleY(5);
    transition: $transition-duration;
  }
}

Обратите внимание, что здесь мы разместили только основные стили для пунктов навигации, который наиболее важны. Вы можете найти полный код на Github.

Создание открытого меню

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

SCSS

$transition-duration: 0.5s;
#toggle:checked {

  // Открываем
  & ~ .nav {
    // Восстанавливаем пункты навигации из «линий» в иконке меню
    .nav-item {
      color: #EC7263;
      letter-spacing: 0;
      height: 40px;
      line-height: 40px;
      margin-top: 0;
      opacity: 1;
      transform: scaleY(1);
      transition: $transition-duration, opacity 0.1s;
  
      // Скрываем линии
      &:before {
        opacity: 0;
      }
    }
  }
}

Магия в мелочах

Если мы посмотрим ближе на gif, то увидим, что все пункты меню перемещаются не одновременно, а в шахматном порядке. Мы можем сделать такое и в CSS! В принципе нам нужно выбрать каждый элемент (с помощью :nth-child) и задать постепенное повышение значения transition-delay. Это, безусловно, повторяющаяся работа. А что если у нас будет больше элементов? Не волнуйтесь, мы можем сделать всё лучше, используя немного магии SCSS:

SCSS

$items: 4;
$transition-delay: 0.05s;

.nav-item {
  // Задаём задержку для пунктов навигации при закрытии
  @for $i from 1 through $items {
    &:nth-child(#{$i}) {
      $delay: ($i - 1) * $transition-delay;
      transition-delay: $delay;
      &:before {
        transition-delay: $delay;
      }
    }
  }
}

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

Обратите внимание, что с помощью этого кода мы получим желаемое пошаговое поведение для анимации закрытия. Нам нужно вычислить $delay, немного отличающийся для анимации открытия, чтобы получить обратно ступенчатый переход. Вроде этого:

SCSS

$delay: ($items - $i) * $transition-delay;

Вывод

Вот мы и закончили с нашим причудливым меню! Мы также включили некоторые фиктивные элементы как в анимированном gif, и вы можете увидеть финальную демонстрацию здесь.

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

Вы можете найти полный код в хранилище Github, а также поиграть с кодом напрямую на Codepen.

Надеемся, этот урок оказался вам по душе и вы сочли его полезным!

Хотите за ближайшие 6 дней изучить азы адаптивной верстки в HTML5 и CSS3?

Реклама

Прямо сейчас забирайте БЕСПЛАТНО пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3.

Проходите всего по одному короткому уроку в день, и за ближайшие 6 дней вы освоите азы HTML5 и CSS3, без которых не стоит и мечтать о карьере веб-мастера или верстальщика.

Посмотрите бесплатные видеоуроки

Хватит мечтать, начинайте кодить

Реклама

Программистом быть классно. Во-первых, это интересно, во-вторых, прибыльно, в-третьих, научиться кодить может каждый. Коду всё равно, какое у вас образование, его не волнует ваш возраст. От вас требуется только желание изучать новое и работать, работать, работать. Готовы? Тогда добро пожаловать на новый курс GeekBrains для начинающих программистов.

Страницы