Архив рубрики: HMTL & CSS

В этой рубрике буду публиковать посты о верстке шаблонов

Дальнейшие планы

Для начала, видимо, стоит извиниться, что хрен знает сколько времени не было новых материалов в бложике. Каюсь, виноват…

Вот в первой неделе мая прокатимся с другом по Карпатам (в Словакии) на велах, и сразу начну исправляться. Читать далее

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

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

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

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

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

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

Счетчик обратного отсчета v.2

В предыдущей статье про счетчик обратного отсчета для landing page все выглядело слегка туманно. Основной проблемой был сброс и отсчет заново при каждом обновлении страницы. Некоторые даже ругались, что этот счетчик обманывает клиентов.

В данной статье предлагаю вам другой скрипт счетчика обратного отсчета для ваших лендингов и не только ))

Читать далее

Как использовать Gulp?

Сейчас расплодилось очень много всяких модных инструментов, которые помогают нам выполнять свою работу. Одним из таких инструментов есть Gulp JS (gulpjs.com). Это простой надежный и удобный помощник, который за вас выполнит много монотонной грязной работы.

В данной зарисовке речь пойдет о его настройке под некоторые нужды. Я не стану углубляться, что такое Gulp JS, что он может делать для вас (для этого понадобилось бы очень много времени и букв). Я расскажу на своем примере, что именно он мне помог сделать в последнем проекте. Читать далее

Ловим конец ресайза окна

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

Позиция курсора мыши в элементе

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

Читать далее

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

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

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

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

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

Стилизация, кастомизация checkbox. Часть 2. Под iOS.

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

В данной статье я предлагаю один из методов стилизации чекбоксов как в операционной системе iOS. Без JavaScript. Только на CSS. Читать далее