С помощью CSS-магии мы можем создавать красивые типографические эффекты и забыть о использовании изображений, в большинстве случаев. В этой статье мы создадим ряд симпатичных примеров веб-типографики, используя плагин jQuery — lettering.js, а также различные приемы CSS. В некоторых примерах мы также добавим переходы при наведении курсора мыши, чтобы сделать их немного более интерактивным.
Сегодня я хочу познакомить вас с замечательными примерами hover-эффектов от Mary Lou. Многим понравились её примеры с hover-эффектами для меню и на этот раз она решила порадовать нас не менее замечательными примерами для круглых элементов. Поскольку сейчас у нас есть возможность использовать свойство border-radius, мы можем создавать круглые формы, и они все чаще появляются в качестве элементов дизайна на веб-сайтах. Один из вариантов использования, который мне более всего нравится, это круглые миниатюры, которые выглядят гораздо интереснее, чем обычные, прямоугольные. И сейчас мы собираемся создать несколько необычных эффектов при наведении на такие элементы!
Если вы не знаете, что такое кассета, то вы, вероятно, родились в эпоху хай-тэк, эпоху, которая, несомненно, является интересной и новаторской. Но если же вы имеете представление, что такое аудио-кассеты, то скорее всего вы принадлежите к старшему поколению, динозаврам, которые знают, что объединяет карандаш и аудио-кассету. :)
Сегодня мы хотим показать вам, как создать эффект lightbox, используя только CSS. Идея заключается в создании нескольких миниатюр, при клике по которым показывается соответствующее большое изображение. Используя CSS переходы и анимацию, мы можем сделать появление большого изображения различными симпатичными способами.
С помощью псевдо-класса :target, мы сможем показывать изображения и переходить по ним.
Всё ближе долгожданные новогодние и рождественские праздники и самое время подготовить подарки и поздравления. А как известно, самый лучший подарок — это подарок сделанный своими руками. :) Поэтому сегодня мы создадим новогоднюю анимированную открытку при помощи CSS3. Создание такой открытки займет у вас всего лишь несколько минут, так как для него мы будем использовать только несколько фоновых картинок и CSS3 анимацию.
В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.
Мощь CSS3 огромна и в этом уроке вы сможете увидеть, как использовать его креативно. Мы собираемся создать несколько эффектов при наведении курсора мыши с помощью CSS3 transitions. При наведении курсора на эскиз будет показываться описание миниатюр, с использованием различных стилей в каждом примере.
Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.
В данной статье я хотел бы показать вам некоторые приёмы создания эффектов при помощи CSS3 на примере меню. Идея заключается в простой композиции элементов: иконки, основного названия и вторичного названия, которое будет анимировано при наведении курсора, используя только CSS-переходы и CSS-анимацию. Мы рассмотрим несколько различных эффектов для элементов.
Спецификация HTML5 предоставляет нам несколько новых типов полей, атрибутов и других полезных функций для форм. Одна из наиболее интересных функций — это валидация формы со стороны браузера.
К сожалению еще не все браузеры поддерживают эти возможности и поэтому мы попытались сосредоточиться на использовании этих возможностей в Firefox 4.
Почему валидация формы со стороны браузера?
Идея валидации формы в HTML5 состоит в том, чтобы отказаться от использования JavaScript при проверке содержания полей: действительно ли этот адрес электронной почты допустим? заполнено ли это поле? соответствуют ли пароли? Раньше в большинстве случаев для этих целей использовался JavaScript. Вы можете написать свой собственный javascript-код или воспользоваться javascript-библиотекой, но это всегда будет повторной, скучной и подверженной ошибкам задачей. С формами, проверенными браузером, Вы больше не должны заботиться о этих задачах, достаточно записать простой HTML.
Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.
JS Charts является бесплатным JavaScript-генератором графиков и схем, который требует минимум знаний программирования. С JS Charts рисование диаграмм становится простой и легкой задачей. Он не требует никаких дополнительных плагинов и серверных модулей. Просто подключите скрипты, подготовьте данные для схемы в XML или массиве JavaScript и ваша таблица готова.
Плагин jQuery Alert Dialogs призван заменить основную функциональность стандартных предупреждений JavaScript, alert(), confirm(), и prompt() функций. Они полностью настраиваются с помощью CSS (это позволит выглядеть вашему сайту гораздо более привлекательно). И вы также можете настроить пользовательский заголовок для каждого диалогового окна.
Эти методы моделируют обычные модальные диалоговые окна. Они автоматически изменяют свое положение при изменении окна браузера. Если включить jQuery UI Draggable плагин, то окна можно перемещать, перетаскивая их за заголовки. В отличие от стандартных JavaScript функций, вы можете использовать HTML в сообщении. Например, чтобы задать переход на новую строку, вы можете использовать либо \n, либо < br / >.
CSS tooltips очень популярны в современном веб дизайне, и вопреки широко распространенному мнению их довольно легко создать, особенно с помощью различных популярных javascript-framework-ов.
Вы, конечно, можете использовать стандартный плагин, но чтобы сделать простой tooltips, Вам достаточно написать всего 10 строк кода jQuery и CSS.
Итак, приступим. Прежде всего обратите внимание на структуру этого tooltips: это обыкновенная ссылка, которая будет выглядеть примерно так:
В этом примере я покажу как создать «эффект аккордеона», который можно использовать как для меню, так и для любых других целей. Раньше для этих целей использовался Flash, но теперь можно воспользоваться и jQuery.
Чтобы использовать jQuery на Вашем сайте, Вы сначала должны загрузить последнюю версию этой javascript-библиотеки, а затем подключить ее к Вашей странице.
jTruncate — это плагин для jQuery, который позволяет легко прятать лишний текст на вашей веб-странице.
Этот плагин будет полезен для страниц перегруженных различной информацией.
jTruncate вызывается точно также как и большинство плагинов для jQuery.
jQuery sIFR Plugin является аддоном для jQuery, который позволяет легко заменять текст на веб-странице на flash-текст (sIFR).
Как это работает?
Вы вызываете javascript-функцию, которая заменяет текст на веб-странице на sIFR (Scalable Inman Flash Replacement) текст, используя возможности jQuery расширенные jQuery Flash плагином. jQuery находит текст, который Вы хотите заменить. Затем, jQuery sIFR Plugin преобразовывает текст — меняет размер, цвет, шрифт и пр. jQuery sIFR Plugin полностью конфигурируем, и Вы можете настроить отображение текста не хуже чем при помощи CSS.
