WebDesign Master
Курсы
Джедай вёрстки #7. Часть 5: Решаем проблемы с Mmenu. Продолжаем верстать
HTML и CSS

Джедай вёрстки #7. Часть 5: Решаем проблемы с Mmenu. Продолжаем верстать

Джедай вёрстки #7. Часть 5.

Всем привет, друзья! Это пятый урок из серии по адаптивной HTML вёрстке макета на реальном примере "Джедай вёрстки #7". В данном уроке мы решим некоторые проблемы Mmenu из прошлого выпуска и продолжим вёрстку шапки сайта.

Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Джедай вёрстки #7. Часть 5: Решаем проблемы с Mmenu. Продолжаем верстать - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

Референсы, используемые изображения, плагины, результат вёрстки, исходники XD/PSD и другие материалы проекта на странице: Референсы.

Дополнительные ссылки урока:

Гист кнопки: Button Sass Styles (Universal Starter).

Универсальный 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
	&::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

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

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

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

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

Я - фрилансер! Базовый курс для начинающих

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

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

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

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

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

  • Lazy Load Placeholder
  • Документация Gulp 4
  • Рабочее место разработчика
2021 © WebDesign Master