Твит

Случалось ли такое, что необходимо написать какие-то пояснения к определенному слову, но места не хватает? Для этого применяются всплывающие подсказки, а работают они следующим образом: при наведении курсора на определенное слово или элемент на странице появляется всплывающая подсказка, в которой даются некоторые пояснения. Это очень удобно использовать, например, на форме регистрации, возможно вы уже видели такие подсказки, и в этом уроке я расскажу как создать такие подсказки на CSS3 без использования javascript.

Твит

Одним из обязательных элементов на сайте является форма поиска. Если у вас ее вдруг нету, то для того чтобы посетителям сайта было легче находить нужный материал, рекомендую ее добавить. А в этом уроке мы создадим красивую форму поиска на CSS3.

Пример формы поиска можно увидеть на сайте.Сперва необходимо создать каркас формы. Обычно простая форма поиска состоит из поля ввода и кнопки «Поиск» или «Искать»...

Твит

Таблицы — это удобный способ представить большое количество информации наиболее компактно. Например всевозможные рейтинги, прайс-листы, цены и так далее. Но важно то, что таблицы должны привлекать пользователя и быть удобными и приятными к просмотру. Поэтому мы сегодня рассмотрим создадим две симпатичные таблицы, а также я сделал видео об одном интересном сервисе.

Примеры таблиц можно увидеть на сайте.

Твит

Как вы уже, наверное, слышали CSS3 анимация является мощным инструментом, который позволяет создавать анимацию без необходимости применения дополнительных скриптов на странице. И в этом уроке с помощью использования анимации мы создадим симпатичное меню, которое не будет занимать много места на сайте. Обычно такое меню делают фиксированным справа. Когда страницу прокручиваешь — меню остается постоянно справа.

Твит

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

Пример оформления можно увидеть на сайте.

Mozilla поддерживает переходы псевдоэлементов, поэтому чтобы увидеть данный эффект используйте браузер Mozilla.

Твит

Меню на сайте является важнейшим элементом. Качественное и приятное меню должно присутствовать на любом ресурсе: блоге, сайте, форме... А также оно должно вписываться в общий дизайн сайта и гармонировать с ним. и этом уроке мы поговорим о том, как создать меню с помощью переходов используя псевдоэлементы :before и :after. Меню будет с легким приятным неоновым свечением!

Пример меню можно увидеть на сайте.

Твит

До нового года осталось меньше двух месяцев, и я считаю что уже необходимо готовить ваши сайты в этому событию. А начнем мы подготовку с шапки сайта, и в этом уроке мы создадим анимированную новогоднюю шапку на CSS3.

Пример анимации можно увидеть на сайте.Вы, наверное, уже знаете как создается анимация на CSS3. Она создается с помощью правила @keyframes. Но в уроке мы не будем использовать префиксы(-webkit, -moz, -ms), чтобы не писать много кода.

Твит

В этой статье мы создадим красивые цифровые часы, используя jQuery и немного CSS3, которые можно использовать у себя на сайте, а также для обратного отсчета, например, до нового года :) . Уже скоро можно будет ставить данные часики.

Пример часов можно увидеть на сайте. HTML разметка очень простая. Часы, минуты и секунды мы будем вставлять и элементы неупорядоченного списка. Смело можете применять их у себя на сайте.

Твит

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

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

Твит

Вкладки очень распространенный элемент в веб-дизайне, и зачастую он очень полезен. Ведь вкладки позволяют красиво и, главное, компактно оформить текст или комментарии, а также многое другое. Итак, в этом уроке мы собираемся реализовать несколько простых CSS3 вкладок при помощи радиокнопок и псевдоэлемента :checked.

Пример разных видов переходов вкладок можно увидеть на сайте. Возможно вам понравится прошлый урок, где мы также создавали красивые вкладки — Красивые анимированные вкладки на CSS.

Твит

Привет :) ! Сайт, блог, форум… Что же всех их объединяет? У всех присутствует навигация, с помощью которой пользователи перемещаются по соответствующему. Их существует огромное множество, но действительно оригинальных, по-настоящему креативных единицы!

Лучшие 3 меню получат:
Медаль за 1-е место

1 место. 200 рублей(6$)
Медаль за 2-е место

2 место. 120 рублей(3,5$)
Медаль за 3-е место

3 место. 70 рублей(2$)