Реализуем hover-эффект над картинкой с помощью CSS3
Один из посетителей нашего сайта решил повторить эффект, который реализован на одной из страниц нашего сайта. Он заключается в том, что при наведении курсора мыши на изображение, картинка трансформируется и в нижней части изображения появляется подпись.
В этом уроке будет показано как при помощи CSS можно добиться такого же hover эффекта. Кроме того, будет рассказано как можно настроить анимацию под себя.
Размещаем адаптивную Google-карту на своем сайте
Как известно, размещение карты Google на своем сайте довольно простая задача. Однако, по-умолчанию, карта не адаптируется под размер экрана.
reGrid.js - инструмент для показа сетки на веб-странице
Уже в течении нескольких лет техника верстки сайтов при помощи сетки пользуется популярностью у разработчиков. В сети существует большое количество CSS-библиотек (Grid Systems) для работы с сеткой. Стоит заметить, что эта методика включена в Bootstrap, который на мой взгляд является одним из самых популярных CSS-фреймворков (если не сказать, что самым популярным).
Использование сетки в процессе верстки сайтов дает разработчику ряд преимуществ: увеличивается скорость разработки, верстать становится легче за счет четкого позиционирования элементов. Размещая элементы макета по сетке, вы сразу замечаете, что страница становится более аккуратной, блоки выглядят пропорционально, имеют одинаковые отступы. Конечно же, при использовании этой методики существуют и свои маленькие недостатки: например, в код добавляются дополнительные элементы разметки. Эти недостатки незначительны, поэтому их можно считать особенностями этого подхода.
В этой заметке мне хотелось бы познакомить читателя с одним хорошим инструментом для проверки промежуточных результатов работы, которую необходимо делать, чтобы не отклоняться от границ, устанавливаемых сеткой.
Размещаем видео на сайт в качестве фона HTML-элемента
На современных сайтах иногда можно встретить следующий эффект: фоном какого-нибудь элемента (например, шапки) является видеоролик. Выглядит это эффектно и пока не стало обыденным явлением, потому что встречается нечасто и никому не надоело. Может быть вы тоже захотите реализовать такую возможность на своем сайте. В этой статье я постараюсь осветить один из способов применения видео для фона сайта.
Plyr - простой и доступный HTML5 плеер
HTML5 плеер Plyr — простое и удобное средство для размещения видео- и аудио- материалов на страницах вашего сайта. Предлагаю вниманию читателей небольшую заметку об этом удобном инструменте, который может быть вам полезен при работе над вашими проектами.