css3

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

      CSS

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

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

      CSS

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

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

      CSS, HTML, jQuery

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

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

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

Кнопки социальных сетей на CSS3

      CSS

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

HTML5 и CSS3 генераторы

      Полезное

Здравствуйте, уважаемые читатели XoZbloga! А Вы пользуетесь генераторами CSS3 или HTML5? Если нет, то может стоит попробовать 🙂 Просто представьте, можно отказаться от ручного описания стилей для кнопок, углов в блоках, теней, градиентов если кто использует и так далее, так же HTML5. Зачем писать один и тот же код каждый раз при создании нового проекта, когда можно «забить» параметры в окошечки нажать кнопочку и получить готовый исходный код, а если надо то и пофиксить его!

Эффект на Google Chrome Extension с помощью CSS3, jQuery и MooTools

      CSS, jQuery, MooTools

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

Фотогалерея для сайта с использованием HTML5 Canvas

      CSS, HTML, jQuery

Здравствуйте уважаемые читатели XoZblogа! В этом уроке мы создадим фотогалерею для сайта с использованием HTML5 Canvas и CSS3. Смотрите демо-версию, чтобы оценить эффект при наведении на изображение. Оттенки серой «копии» основного изображения создаются с помощью Canvas, а также с CSS3 для плавного изменения «копии» на основное изображение. Советую также ознакомиться с уроком Галерея изображений на jQuery. Коротко о том, что такое Canvas. Спецификация HTML5 включает множество новых тегов, одним из которых является canvas.