• Открыть меню блога
  • Главная
  • Статьи сайта
  • подбор цвета
  • Из CSS в SASS
  • 9 октрября 3:08
    Автор: mastweb Комментариев нет
    Делаем свой гамбургер меню, четыре вида

    Делаем свой гамбургер меню

    При верстке верхнего меню top-line, всегда требуется для маленьких экранов col-xs-12 делать значок открытия и закрытия меню в виде гамбургера.

    Рассмотрим четыре симпатичных примера hamburger menu.

    1). Гамбургер меню с плавным изменением полосок.

    Добавим див с классом class=toggle, внутри будет тег span.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • 6 октрября 9:18
    Автор: mastweb Комментариев нет
    Счетчик цифт для landing с эффектом размытия

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

    Сперва зададим html структуру из cекеции с идентификатором id=line.

    В контейнере будет четыре колонки col-md-3.

    Для средних мониторов и для маленьких две col-sm-6.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • 30 сентября 11:44
    Автор: mastweb Комментариев нет
    Указатель местоположения для карты и пульсирующая иконка телефона

    Указатель местоположения для карты

    У landing page часто внизу идет карта с указанием адреса.

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

    Каркас будет из дива с классом location-item с двумя span внутри.

    • Первый location-pointer.
    • Второй location-pulse.
    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • 28 сентября 10:41
    Автор: mastweb Комментариев нет
    Позиционирование элементов, основные свойства css

    Позиционирование элементов, основные свойства css

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

    Это преимущество в отличие от встроенной консоли кода.

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

    Видим, что предложение в теге div занимает всю ширину страницы, а ссылка не всю, только ширину размера текста.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • 27 сентября 8:01
    Автор: mastweb Один комментарий
    Три вида иконок социальных сетей 3d, изменяет размеры и с тенью

    3d иконка социальных сетей

    Верстка трех видов социальных иконок.

    Первая иконка 3d вида, при наведении мышкой поднимается вверх и меняет цвет.

    Сделаем каркас для иконки в html.

    Зададим секцию с идентификатором id=iconisometric, внутри будет контейнер со списком ul.

    Класс у списка зададим iconisometric-ul3.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • 27 сентября 10:02
    Автор: mastweb Комментариев нет
    Расставляем все элементы секции и делаем адаптивный дизайн

    Расставляем все элементы секции и делаем адаптивный дизайн

    Сверстаем секцию id=items с заголовком, тремя изображениями и двумя абзацами, расположим в одном container.

    В первой строке row будет 10 колонок col-sm-10, с отступом сбоку col-sm-offset-1.

    Вначале идет заголовок h2 и векторное изображение в теге picture.

    Этот тег сам определяет размер окна и подставляет нужный формат изображения.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • 25 сентября 10:41
    Автор: mastweb Комментариев нет
    Верстка секции с h1, изображением, которое движется и формом

    Верстка секции с h1, изображением, которое движется и формом

    Эта секция идет после меню сайта и шапки логотипа с телефоном.

    Секцию назовем id=main, Будет контейнер с тремя колонками col-md-4.

    В первой колонке с классом main-hdr, будет заголовок h1.

    Этот заголовок h1 должен состоять из трех основных ключевых слов, один заголовок можно разложить на три ключевых слова.

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

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • 23 сентября 3:27
    Автор: mastweb Комментариев нет
    Сделаем 3d эффект переворота изображения и куб на css

    Сделаем 3d эффект переворота изображения и куб на css

    Добавим код для переворачивающегося блока в 3d формате, первый блок в, котором будет анимация t3d, внутри блок с классом rotate, он и будет переворачиваться.

    У этого блока две стороны на первом плане будет изображение img на другой стороне текст txt, с дополнительным классом pd для отступов текста от краев блока.

    Внутри заголовок второго уровня и текст.

    Код в index.html.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • 22 сентября 8:26
    Автор: mastweb Комментариев нет
    Блок FAQ на bootstrap tabs и accordion

    Обязательный блок для идеального lendinga является faq ответы на вопросы, в котором рассмотрены все ключевые вопросы, которые интересуют покупателя.

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

    Структура будет состоять из секции с идентификатором #faq в одну колонку col-xs-12 с заголовком второго уровня с названием информация о товаре и двумя уточняющими предложениями.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • 21 сентября 8:46
    Автор: mastweb Комментариев нет
    Верстаем секцию тарифов с ценой price из трех колонок

    Верстаем секцию тарифов с ценой price из трех колонок

    Зададим три колонки для трех тарифов, например.

    В первом тарифе будет большая цена, потом поменьше и минимальная.

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

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

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ

Категории

  • ►Landing page (13)
  • ►SEO (6)
  • ►Web дизайн (5)
  • ►wordpress (3)
  • ▼Верстка (69)
    • flipclock красивый таймер обратного отсчета для акций на сайте
    • Fotorama плагин фотогалерея для сайта
    • livereload страниц в browsersync
    • preloader перед загрузкой страница сайта
    • Адаптивные плитки из картинок на сайте плагином masonry
    • Анимация кнопки и логотипа для lending
    • Блок FAQ на bootstrap tabs и accordion
    • Быстрая верстка в sublime text с плагином emmet
    • Верстаем блок список преимуществ
    • Верстаем секцию тарифов с ценой price из трех колонок
    • Верстаем форму обратной связи с выбором элементов
    • Верстка footer из четырех колонок с картой проезда
    • Верстка горизонтального верхнего меню
    • Верстка секции с h1, изображением, которое движется и формом
    • Всплывающая картинка плагином magnificPopup
    • Всплывающая форма обратной связи
    • Выпадающее меню dropdown-menu в bootstarp3
    • Делаем всплывающее окно при наведении вышки
    • Делаем выезжающее меню плагином mmenu в стиле hamburger
    • Делаем калькулятор для сайта
    • Делаем красивую таблицу html с записью данных в форму заказа
    • Делаем пагинацию pagination и хлебные крошки breadcrumb
    • Делаем свои векторные иконки для сайта icon pack
    • Делаем свой гамбургер меню, четыре вида
    • Для секции мои преимущества делаем анимацию css
    • Добавим в блок шапки красивую кнопку для заказа
    • Игра на javascript подробно.
    • Используем bower для установки новых пакетов
    • Как сделать генератор для закругления углов css
    • Как собрать готовый проект gulp build
    • Как установить gulp и плагины
    • Красивый переход фона для landing page между секциями
    • Красивый эффекты parallax для сайта
    • Настраиваем sublime text 3
    • Настраиваем препроцессор sass
    • Настройка open server для reload страниц в browsersynk
    • Настройка bootstrap carousel на примере
    • Основные gulp плагины
    • Основные теги html
    • Плавная навигация для лендинга и кнопка наверх
    • Плагин magnific popup для всплывающего окна формы
    • Плагин Owl carousel 2 все основные параметры карусели
    • Подбробно о bootstrap сетке в дизайне сайта и верстке
    • Подключаем шрифт font awesome иконки
    • Подсказка и всплывающее окно в bootstrap 3
    • Позиционирование элементов, основные свойства css
    • Прогресс бар обычный и progress-bar в bootstrap
    • Простой способ анимации блоков animate.css для сайта
    • Простой способ маски телефона и pattern input tel
    • Простой способ создания tabs на сайте
    • Расставляем все элементы секции и делаем адаптивный дизайн
    • Резиновый красивый слайдер на flex
    • Сверстаем секцию отзывов с плагином owlcarousel
    • Сделаем 3d эффект переворота изображения и куб на css
    • Сделаем красивую кнопку вверх для сайта
    • Сделаем неоновый, 3d, прозрачный и выпуклый текст
    • Секция выбора товара с модальным окном modal-sm подробнее
    • Синтаксис, псевдоклассы, иерархия и свойства css
    • Скрипт обратной связи для лендингов
    • Создаем красивую css анимацию иконки instagram
    • Создаем модальное окно bootstarp 3
    • Создание аккордеона для сайта
    • Счетчик цифт для landing с эффектом размытия
    • Три вида иконок социальных сетей 3d, изменяет размеры и с тенью
    • Указатель местоположения для карты и пульсирующая иконка телефона
    • Фиксируем меню сверху страницы и делаем плавный скролл до блока
    • Форма обратной связи в модальном окне плюс второй способ отправки почты через скрипт
    • Чистый gulp шаблон
    • Эффект 3d разворота евро буклета и изометрические карты
  • ►Магазин opencart (9)
  • градиент css генератор
  • Генератор тени box shadow
  • Генератор кнопки css онлайн
  • Генератор таблицы html
  • Генератор цвета HTML
  • css тень текста генератор
  • Цветовая схема онлайн
  • Скачать css background
  • Перевести из px в em css
  • html редактор онлайн

ПОПУЛЯРНЫЕ

  • Генератор таблицы html
  • Генератор цвета HTML
  • Настраиваем sublime text 3
  • градиент css генератор
  • Плагин Owl carousel 2 все основные параметры карусели

Заказать лендинг пейдж с высокой конверсией

Свежие комментарии

  • Роман к записи Перенос сайта на wordpress с хостинга на openserver, это простой backup сайта
  • mastweb к записи Перенос сайта на wordpress с хостинга на openserver, это простой backup сайта
  • Роман к записи Перенос сайта на wordpress с хостинга на openserver, это простой backup сайта
  • mastweb к записи Реклама яндекс директ для поиска
  • Ro к записи Как создать лендинг пейдж по модели aida

ТОП ШРИФТЫ для web и photoshop

Loading

sans шрифты Serif шрифты Округлые шрифты Печатные шрифты
1 2 3 … 7
sdelatlending.ru © 2017 Все права защищены. Использование материалов без согласия автора и прямой индексируемой гиперссылки на сайт запрещено.
Рейтинг@Mail.ru
homepage counter счетчик сайта

Яндекс.Метрика

  • Главная
  • Статьи сайта
  • подбор цвета
  • Из CSS в SASS