Архив метки: CSS3

Создаем анимированную иконку скролла

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

Обычно такая иконка нужна для достаточно длинной страницы, при загрузке которой пользователь видит только одну красивую секцию высотой на всю высоту клиентского экрана (либо слайдер на всю высоту). Внизу такой секции вы, наверняка, видели нечто подобное. Иконка выглядит в виде мышки с анимированным элементом, который имитирует скролл. Читать далее

Сайт ресторана Halipapa в Юрмале

Совсем недавно запустили сайт ресторана грузинской кухни Halipapa в Латвии. Сайт на трех языках.

Использовали Bootstrap, Parallax.js, jQuery Validate для валидации форм, маленькие ништяки вроде bootstrap-timepicker и jQuery-ui datepicker. Читать далее

Иконка мобильного меню на чистом javascript (без jQuery)

В предыдущей статье я рассказывал о том, какую иконку-гамбургер для меню на мобильных устройствах я использую. Там я использовал jQuery для ее оживления, но сказал, что можно обойтись и без этой сторонней библиотеки.

В этой статье я покажу один из способов, как все сделать на чистом javascript. Кода получится чуть больше, но зато мы сможем убрать загрузку лишнего файла и лишний запрос к серверу. В итоге мы улучшим производительность, связанную с нашим мобильным меню. Читать далее

Моя иконка-гамбургер для мобильных меню

Сейчас существует очень много различных гамбургер-иконок для менюшек на мобильных девайсах. Я чаще всего использую такую: это простой элемент без изображений с двумя псевдоэлементами. Вся эта красота украшается бордюрами и позиционируется так, как нам надо. Читать далее

Респонсив таблицы на CSS и дата-атрибутах

Предположим, есть задача: адаптировать таблицу с данными под мобильное устройство. Таблица длинная и с обычным горизонтальным скроллом клиент не согласен. Что делать в таком случае?

Есть очень простой и элегантный способ сделать таблицу адаптивной с помощью простых манипуляций. Все, что нам надо — добавить дата-атрибут каждой ячейке. Читать далее

Простенький шаблон лендинг страницы с анимацией

Практиковался как-то в освоении некоторых технологий (animate.css, wow.js, bootstrap, google maps api). Шаблон нашел где-то на сайте бесплатных psd-шаблонов. Он мне понравился, и я решил его забацать. Это я потом уже узнал, сколько их сверстано на просторах Инета. Ну, добавлю еще и свою версию. В чем-то упрощенную, в чем-то дополненную.

Предлагаю вам посмотреть, что у меня получилось.

CSS анимация при скролле (скроллинге, прокручивании) страницы

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

Кастомизация, стилизация checkbox

Вчера делал имплементацию дизайна для одного клиента, так вот, в дизайне был кастомный чекбокс (думаю, не нужно объяснять, что это такое). Порылся в Тырнете, нашел простой способ это сделать. Читать далее