WebDesign Master
CSS Grid: адаптивная верстка реального макета
HTML и CSS

CSS Grid: адаптивная верстка реального макета

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

Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
CSS Grid: адаптивная верстка реального макета - Видеоурок
Смотреть урок на YouTube
Создание интернет-магазина от А до Я

Результат HTML вёрстки: Смотреть

Полезные материалы и референсы:

  • Рефересны, исходники: Скачать
  • Урок «Gulp для самых маленьких»
  • Урок «CSS Grid: Новый взгляд на адаптивную верстку сайтов»
  • Стартер для вёрстки данного примера: https://github.com/agragregra/Simple-Gulp-Start

Код кнопки из урока (button.sass):

.button
	display: inline-block
	border: none
	color: #fff
	text-decoration: none
	background-color: $accent
	padding: 15px 45px
	font-size: 13px
	text-transform: uppercase
	font-weight: 600
	letter-spacing: 3px
	border-radius: 2px
	text-align: center
	position: relative
	outline: none
	transition: background-color .1s ease
	cursor: pointer
	&::after
		transition: background-color .2s ease
		position: absolute
		content: ''
		height: 4px
		bottom: 0
		width: 100%
		background-color: darken($accent, 50%)
		opacity: .18
		border-bottom-left-radius: 2px
		border-bottom-right-radius: 2px
		left: 0
	&:focus, &:hover
		text-decoration: none
		color: #fff
	&:hover
		background-color: lighten($accent, 5%)
		&::after
			opacity: .22
	&:active
		background-color: darken($accent, 5%)
		&::after
			opacity: .32

Премиум уроки от WebDesign Master

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Создание контентного сайта

Создание контентного сайта на Jekyll от А до Я

Фриланс для начинающих

Я - фрилансер! - Руководство успешного фрилансера

Другие уроки по теме «HTML и CSS»

  • Адаптивная вёрстка галереи без JS. CSS target. Работа с изображениями - Retina img. HTML сниппеты #5
  • Адаптивная верстка вертикального таймлайна. HTML Сниппеты #4
  • Bootstrap 4. Сетка. Подробное руководство
  • CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство
  • CSS анимация для самых маленьких

Разделы сайта:

  • HTML и CSS
  • Веб-дизайн
  • Инструменты
  • Оффтоп
  • MODx
  • WordPress
  • jQuery
  • Адаптивный веб-дизайн
  • Создание иконок
  • Обработка изображений
  • Иллюстрации и Инфографика
  • Интерфейсы UI/UX
  • Прототипирование
  • JavaScript
  • Хостинг

Полезные ресурсы:

  • Lazy Load Placeholder
2019 © WebDesign Master