Джедай вёрстки #7. Часть 5.
Всем привет, друзья! Это пятый урок из серии по адаптивной HTML вёрстке макета на реальном примере "Джедай вёрстки #7". В данном уроке мы решим некоторые проблемы Mmenu из прошлого выпуска и продолжим вёрстку шапки сайта.
Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Референсы, используемые изображения, плагины, результат вёрстки, исходники 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
Другие уроки по теме «HTML и CSS»
- Адаптивная вёрстка галереи без JS. HTML + CSS target. Работа с изображениями (Retina img)
- Адаптивная HTML вёрстка вертикального таймлайна
- Bootstrap 4. Сетка. Подробное руководство
- CSS Grid: адаптивная верстка реального макета
- CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство
- CSS анимация для самых маленьких