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

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

Круговая диаграмма на SVG и CSS

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

Я предлагаю вам решение на основе SVG и простой математической формулы для расчета длины окружности ))) Читать далее

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

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

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

Плавная прокрутка страницы до нужного элемента

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

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

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

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

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

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

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

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

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

JQuery: всплывающее окно (попап-окно) для landing page и не только…

Актуальна тема landing page сегодня, да? Предлагаю вам еще один очень важный атрибут для приземляющей страницы: всплывающее (попап) окно. Оно используется в основном для всплывающих форм заказа товара (услуги) или обратного звонка. Ну, или в любых других случаях. Читать далее

Фиксированное меню при прокрутке, скролле страницы

Нужно было найти простой скрипт, который бы фиксировал блок (меню) при прокрутке страницы. Просмотрев с десяток скриптов, нашел то, что мне нужно. Вот и предлагаю.

Естественно, не обойдемся без jQuery (куда ж без него, любимого). Читать далее

Удаление содержимого текстового поля по клику

Давно ничего не писал, прошу прощения, занят. Вот решил черкнуть пару строк о текстовых полях и их содержимом. Часто попадаются такие поля ввода (имя, e-mail и др.), в которых должно быть некое содержимое, которое бы убиралось при клике на этом поле. Читать далее