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

      CSS

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

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

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

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

      CSS

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

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

      CSS

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

Генератор кнопок на CSS3 для WordPress (плагин)

Здравствуйте, уважаемые читатели XoZbloga! Сегодня я познакомлю Вас с плагином для WordPress — MaxButtons. Это плагин, который позволяет создавать пользовательские кнопки на CSS3 практически без знания CSS. Вы создаете кнопки с помощью конструктора и используете короткий код (shortcode) для вставки кнопок, где угодно. Это отличная новость для тех кто не разбираете в CSS, но хочет использовать уникальные и красивые кнопки на своем блоге. Поэтому в этом небольшом уроке я покажу Вам, как с помощью MaxButtons создаются кнопки для WordPress блога.

Создание анимационного листинга элементов на CSS3

      CSS

Здравствуйте, уважаемые читатели XoZbloga! После двух недель молчания, я снова в деле. Итак, сегодня я хотел бы показать Вам как с помощью только CSS3, можно сделать анимационный листинг элементов (элементов списка ul) с возможностью выбрать в каком виде будет находиться список. Чтобы пользователю было удобнее выбирать вид списка, возможные варианты предоставлены картинками. По нажатию на каждую кнопку, элементы преобразуется в определенный стиль расположения данных. Да что об этом говорить, лучше один раз увидеть.

CSS слайдер изображений с эскизами

      CSS

Здравствуйте, уважаемые читатели XoZbloga! Сегодня разберем на практическом примере использование CSS3 transitions, которое позволяет изменить свойство CSS плавно и в течение некоторого времени. А именно на примере создания простого слайдера изображений с эскизами. Благодаря CSS3 можно добиться следующего равновесия — кода минимум, а действий максимум.