CSS

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

      CSS

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

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

      CSS

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

10 советов по CSS для WEB-разработчика

      CSS

Здравствуйте, уважаемые читатели XoZbloga! Спустя месяц отдыха, я приступаю к новому, так сказать сезону в работе. Постараюсь радовать Вас хорошими статьями и уроками 🙂 Как и в любом другом деле, в веб-разработке есть свои тонкости. И чтобы достичь желаемого результата необходимо знать их. В этой статье дам 10 советов, которые могут помочь Вам при разработке стилей CSS.

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

      CSS

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

Эффект с помощью CSS3 Transform 3D

      CSS

Здравствуйте, уважаемые читатели XoZbloga! Есть много способов, показать информацию о продукте. В этом уроке я собираюсь рассказать Вам, как можно сделать куб с информацией на гранях. Будет применен эффект, который основан на CSS3 Transform 3D. Эффект корректно работает в FF, Chrome и Safari, Opera и IE пока не поддерживают CSS Transform 3D.

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

      CSS

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

Создаем аккордеон для сайта

      CSS, HTML, jQuery

Здравствуйте, уважаемые читатели XoZbloga! В этой статье разберем 3 способа создания аккордеона для сайта:

  • с помощью jQuery;
  • с помощью CSS3;
  • с помощью HTML5.

Если Вы еще не сталкивались с таким элементом на сайте, то это обязательно произойдет рано или поздно. На самом деле очень простая концепция, которая требует небольшого скрипта для функционирования. Аккордеоны, как правило, используется для организации дополнительной информации. Вы можете использовать аккордеон как: