Фоновые линии
Добавим линии в верстку сайта. Это разбавит однородный фон, а также придаст стройности разным блокам контента. 6 секторов Разделение фона линиями на 6 секторов. 12 секторов Тот же самый принцип, Читать далее »
Необычное оформление элементов форм
В данной статье будут собираться различные интересные решения по оформлению элементов форм. Radio в виде переключателей Верстка: Стили: div с классом radios и обертка каждого пункта в div с классом Читать далее »
Slanted CSS
Различные решения связанные так или иначе со скошенными линиями (при помощью CSS). 2-х цветный backgound Этого же эффекта можно добиться и градиентом: Правда в первом случае линия перехода между цветами Читать далее »
Мини-корзина сбоку
Ранее описывал функционал мини-корзины в Header’е, теперь реализуем данное решение в виде боковой кнопки, если нужно разгрузить шапку, либо интернет-магазин добавился после создания основной верстки сайта, либо нужно внедрить ИМ Читать далее »
Блоки с эффектом наведения
Несложное, но визуально интересное решение на чистом CSS: пункты-блоки с эффектом анимации. Пример: Поставка товаров из Китая Поиск товаров в Китае Поиск производителей в Китае Логистика поставок из Китая Рекламно-сувенирная Читать далее »
Сайтбар
Вспомогательная панель или сайтбар довольно удобная штука. В нее мы можем поместить множество необходимых модулей и виджетов по функционалу сайта: от формы поиска до ленты Instagram. Сайтбар размещен справа либо Читать далее »
Галерея Masonry в процентах
Я более досконально изучил принцип работы галереи Masonry. Теперь с уверенностью могу сказать, что это отличная штука. В одной изранних статей была далеко не полная и не точная информация. Галерею Читать далее »
Эффекты с текстом
В данном посте приведены различные эффекты с текстом. Мигающий текст скрипт Повторяющийся эффект animate Делаем любой эффект animate повторяющимся на объекте (тексте) Буквица на чистейшем CSS Если предположить что основной Читать далее »
Эффект ряби
Эффект ряби привлечет внимание и поможет увеличить кликабельность элемента сайта: кнопки, области и т.д. Сделаем кнопку как в сервисе Call Hunter. Чистый эффект ряби Сам эффект ряби создан на чистом Читать далее »
Slider v.2
Доработал Slider v.1 добавив в него несколько функций: отдельный тип записей — слайды, ссылка со слайда. Сам скрипт слайдера остался прежним. Тип записей Слайды add_action( 'init', 'register_post_type_slide' ); function register_post_type_slide() Читать далее »
Верстка типовых блоков
Находим оптимальные решения верстки типовых блоков, т.е. конструкций которыми на различных сайтах приходиться пользоваться часто. Изображение текст Очень часто используется связка «изображение + текст»: списки статей, перечисление преимуществ, опции, достопримечательности Читать далее »
FlexBlock. Современная верстка
Верстка сайтов постоянно эволюционирует: от табличной верстки к верстке div с float (frame), далее промежуточный этап верстка diplay:inline-block. Так или иначе суть верстки — модульная сетка. Современный CSS дает нам Читать далее »
Создаем анимацию Scroll Down
Для лэндингов часто используют анимацию в виде стрелки или колесика мышки, чтобы показать что можно (нужно) листать ниже. Создадим подобную анимацию с помощью css и jquery. Анимация колесика мышки Создадим Читать далее »
Легкая верстка блоков
Представим, что нам нужно упорядочить записи плиткой, т.е. слева направо сверху вниз. При этом, чтобы записи в каждом ряду были выровнены по левому и правому краям. Сделаем максимально простым способом. Читать далее »
Material Design
Material Design — дизайн программного обеспечения и приложений операционной системы Android от компании Google. Впервые представлен на конференции Google I/O 25 июня 2014 года. Идея дизайна заключается в приложениях, которые Читать далее »
Фон — видео
Очень эффектно, для главной страницы, смотрится фон из видео. Рассмотрим основные моменты данной «фишки». Добавление видеофона в вёрстку CSS стили, адаптация под размер области, с наложением пиксельной сетки поверх видео Читать далее »
Фиксированное меню 2.0
Продолжая работать над совершенствованием фиксированного меню, нашел следующее решение. Верстка фиксируемого блока <div id="stick_menu" class="default"> В отличие от предыдущей версии меню, перед блоком ставить ничего не нужно. Стили для фиксированного Читать далее »
Slider v.1
Реализуем простой в настройке, функциональный слайдер с навигацией и двумя эффектами перехода (затухание и перелистывание). Подключение слайдера Подключаем скрипт (если слайдер нужен на главной странице, то подключаем локально в шаблоне Читать далее »
Плавающий боковой блок
Иногда бывает нужно чтобы какой-либо боковой блок пролистывался вместе с основным контентом. При этом, этот блок будет будет следовать с небольшой задержкой привлекая дополнительно внимание. Ставим его перед выводом основного Читать далее »
Имитация формы Jivosite
Я попытаюсь сделать имитацию популярной формы обратной связи Jivosite, но без функционала чата. Бывают ситуации когда непосредственно чат не нужен. Форма обратной связи Код верстки <div id="jivosite"> <div id="jivosite-btn"><i class="fa Читать далее »
Мобильное меню типа mmenu
Адаптируем меню под мобильную версию сайта. При этом необходимо учитывать особенности небольших экранов и конфигурировать под них структуру и стили меню. Функционал mmenu.js Подключаем стили и скрипты: <link rel="stylesheet" href="http://opttour.ru/wp-content/themes/tester/jquery.mmenu.css" Читать далее »
