Сдвигающийся плейсхолдер

Замена атрибута placeholder тегом label и последующая манипуляция им

Данное решение выполнено через псевдокласс :placeholder-shown, который отображает текст подсказки, заданной атрибутом placeholder.

Читать далее

Бесконечный коридор на JS

Фоновый эффект с бесконечным проходом через коридор, реализованный на WebGL

Размер канваса с эффектом задается его контейнером через CSS

Читать далее

Слайдер с меняющимися фото на CSS

Слайдер с меняющимися фотографиями и их описанием на чистом CSS

Слайдер выполнен без применения скриптов с использованием СSS-свойства animation

Читать далее

Блок-секция для лицензий

Оформление блок-секции для лицензий, сертификатов или других вертикальных фотографий на CSS

Данное решение не является универсальным и рассчитано для четырех фотографий. При изменении их количества или размеров нужно будет корректировать стили.

Читать далее

Отложенная загрузка Яндекс карты и виджета ВК

Отложенная загрузка скриптов на примере Яндекс Карты и виджета группы ВКонтакте

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

В этой теме рассмотрено подключение таким образом Яндекс карты и виджета группы ВКонтакте

Читать далее

Сценические волны на JS

Фоновый эффект, создающий сценические волны в заданном блоке.

Эффект основан на WebGL, а скрипт, реализующий его, занимает всего 18кб без сжатия.

Читать далее

Плюс и минус для поля input

Создание и оформление кнопок плюс и минус для поля <input>

Небольшой скрипт на jQuery, который при нажатии на соотвествующую кнопку, прибавляет и отнимает единичку в текстовом поле.

Также в этой теме есть несколько вариантов оформления этих кнопок.

Читать далее

Аккордеон на CSS

Вариант создания аккордеона на чистом CSS

2 примера создания аккордена без использования скриптов.

Один работает с использованием радиокнопок <input type="radio" /> , а другой с флажками <input type="checkbox" />

Читать далее