Индикатор прокрутки страницы на CSS и JavaScript

Индикатор прокрутки страницы

Привет. На сайтах иногда используют так называемые индикаторы прокрутки страницы. Это когда начинаешь прокручивать страницу вниз, а сверху отображается прогресс прокрутки, то есть на сколько вы прокрутили. Это привлекает внимание внимание пользователя и дает ему некоторую информацию по ориентации на странице. Другими словами — хорошо видно сколько пролистал и сколько еще осталось. Но в первую…

Чекбоксы и радиокнопки картинками на CSS

Чекбоксы картинками

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

Кастомные чекбоксы. Стилизация через CSS (Custom checkboxes)

custom-checkbox

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

Как менять CSS стили в зависимости от времени суток

CSS по времени суток

Всем привет. Вы наверняка видели на некоторых сайтах такую интересную фишку, если зайти днем, то фон и элементы дизайна в светлом стиле, а если вечером или ночью, то в темном. И еще бывает приветственная надпись, типа: Добрый вечер, добрый день или доброе утро. То есть CSS стили автоматически меняются в зависимости от времени суток. Это…

Определение мобильных устройств при помощи Mobile Detect php

mobiledetect php

Приветствую вас. Продолжаем исследовать возможности языка PHP и сейчас познакомимся с небольшой библиотекой, с помощью которой можно определять мобильные устройства пользователей на сайте. При чем определить можно даже марку телефона. Для чего это нужно? С большой уверенностью могу сказать, что подобные технологии используются в рекламных системах, в частности таргетированной рекламе. Это позволяет делать более персонализированные…

Как сделать всплывающее окно на сайте

Всплывающее окно на сайте

Я вас приветствую! Разговор пойдет о том, как сделать всплывающее окно на сайте, оно же Popup. Он может быть на WordPress, Joomla или просто HTML страничка. У меня уже есть несколько публикаций на тему создания модальных окон, но эта инструкция не будет лишней, так как мы затронем некоторые нюансы, о которых раньше не было упомянуто….

Анимация бургер меню на CSS и JavaScript

burger menu css

Всем привет. В этой статье вы узнаете как сделать бургер меню на CSS. Отрисуем саму иконку и добавим ей анимацию при нажатии. JS нужен будет для того, чтобы вызвать какое-то событие по клику, к примеру показать/скрыть меню на сайте. Вот как это выглядит: Демо Приступим. В разметке создадим блок, в который поместим пустой элемент спан,…

Как написать CSS правила только для IE

Пишем стили для IE

Всем привет. Если при верстке сайтов с использованием современных инструментов, таких, как Flexbox или Grid, вы получаете огромное удовольствие от того, насколько классно страница выглядит в современных браузерх. Но попробуйте открыть ее в IE 8 и вы поймете, на сколько все печально. Здесь мы разберем как написать CSS стили только для Internet Explorer. Надеюсь, что…

Прелоадер для сайта на CSS и jQuery

preloader-css

Привет, ребята! В этом материале вы узнаете как сделать прелоадер для сайта с использованием CSS и jQuery. Он нужен в тех случаях, когда скорость загрузки вашего сайта оставляет желать лучшего. Мы не будем заморачиваться с GIF картинками, а напишем preloader на чистом CSS. И реализуем вариант, который применяется на Яндекс метрике при загрузке данных с…

Необычные CSS тени для блоков

css-shadow

Привет, ребята. Про CSS тени уже есть на блоге материал, но мы идем дальше и будем делать не совсем обычные и стандартные эффекты, а разберем как сделать тень блока в css при помощи псевдоклассов before и after. На сегодняшний день у всех этих свойств довольно сильная поддержка браузерами, поэтому можно смело применять в своих проектах. Для…