Взгляд на CSS3 градиент (линейный и радиальный градиенты)

      CSS

Здравствуйте, уважаемые читатели XoZbloga! Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.

Изменяем полосы прокрутки браузеров WebKit

      CSS

Здравствуйте, уважаемые читатели XoZbloga! Internet Explorer был первым браузером, который позволил разработчикам произвести настройку отображения полос прокрутки. В то время многие пользовались изменением полос прокрутки (скроллбаров), но позже все это как-то сошло на нет. Второе дыхание, если можно так сказать, этому дает WebKit.

Самый простой способ сделать Lightbox эффект

      CSS

Здравствуйте, уважаемые читатели XoZbloga! У многих, хотя наверное у всех на сайтах есть плагин для создания lightbox эффекта, т.е. когда картинка открывается в полный размер, а остальной контент затемняется. Используя CSS3 можно максимально упростить создание такого эффекта. В данной статье, эффект реализован благодаря псевдоклассу :target.

Особенности адаптивной верстки

Здравствуйте, уважаемые читатели XoZbloga! Когда говорят об адаптивной верстке, то подразумевают шаблон, который подстраивается под любое разрешение экрана. Элементам контейнерам div присваивается относительная ширина, правильное позиционирование и тд. Но также не следует забывать о содержимом этих контейнеров. Да, текст подстроиться по ширине автоматически, но как же быть с изображениями, видео и аудио элементами на странице. Ведь если где-то, что-то вылезает за пределы или торчит не в том месте — это не совсем хорошо.

Шрифты для сайта с помощью CSS @font-face

      CSS

Здравствуйте, уважаемые читатели XoZbloga! Продолжаем серию статей о CSS. Сегодня речь пойдет о свойстве CSS@font-face. С помощью которого стандартные шрифты, можно заменить на более совершенные, пользовательские. Эти шрифты Вы можете выбрать в сети или создать самостоятельно. Также рассмотрим использование шрифтов с иконками. И в качестве дополнения, покажу еще несколько способов использования нестандартных шрифтов на сайте.

Вся правда о псевдоэлементах :before и :after

      CSS

Здравствуйте, уважаемые читатели XoZbloga! Рассмотрим сегодня псевдоэлементы, а именно разберемся с :before и :after. Что такое псевдоэлемент и как он отличается от псевдокласса? Как :before и :after реализованы в CSS? Вы наверняка видели их к примеру, в стилях уже готовых меню, но никогда не вдавались в подробности, для чего они нужны, а просто брали и использовали меню. Настало время расставить все по своим местам и научиться пользоваться псевдоэлементами самостоятельно.

Создаем адаптивное меню для сайта

      CSS

Здравствуйте, уважаемые читатели XoZbloga! Порой, одной из самых сложных частей при создании сайта является, проектирование и реализация навигации. Много времени уходит на выдумывание структуры и дизайна, последующую верстку меню и создание эффектов. Так же не мало важным является кроссбраузерность и возрастающая адаптивность к мобильным устройствам. Так вот, в этом уроке попытаемся, и создадим простенькое адаптивное меню для сайта. Использовать будем CSS3 медиа запросы и немного jQuery. Итак, давайте приступим.