Как стать автором
Обновить
84
0
webmasters_by @webmasters_by

Пользователь

Отправить сообщение

Креативное использование веб-шрифтов

Время на прочтение 14 мин
Количество просмотров 33K

С помощью CSS-магии мы можем создавать красивые типографические эффекты и забыть о использовании изображений, в большинстве случаев. В этой статье мы создадим ряд симпатичных примеров веб-типографики, используя плагин jQuery — lettering.js, а также различные приемы CSS. В некоторых примерах мы также добавим переходы при наведении курсора мыши, чтобы сделать их немного более интерактивным.
Читать дальше →
Всего голосов 100: ↑94 и ↓6 +88
Комментарии 27

Hover-эффекты для круглых элементов с использованием CSS Transitions

Время на прочтение 14 мин
Количество просмотров 33K

Сегодня я хочу познакомить вас с замечательными примерами hover-эффектов от Mary Lou. Многим понравились её примеры с hover-эффектами для меню и на этот раз она решила порадовать нас не менее замечательными примерами для круглых элементов. Поскольку сейчас у нас есть возможность использовать свойство border-radius, мы можем создавать круглые формы, и они все чаще появляются в качестве элементов дизайна на веб-сайтах. Один из вариантов использования, который мне более всего нравится, это круглые миниатюры, которые выглядят гораздо интереснее, чем обычные, прямоугольные. И сейчас мы собираемся создать несколько необычных эффектов при наведении на такие элементы!
Читать дальше →
Всего голосов 74: ↑69 и ↓5 +64
Комментарии 23

Создаем кассетный магнитофон при помощи HTML5 Audio

Время на прочтение 2 мин
Количество просмотров 18K


Если вы не знаете, что такое кассета, то вы, вероятно, родились в эпоху хай-тэк, эпоху, которая, несомненно, является интересной и новаторской. Но если же вы имеете представление, что такое аудио-кассеты, то скорее всего вы принадлежите к старшему поколению, динозаврам, которые знают, что объединяет карандаш и аудио-кассету. :)
Читать дальше →
Всего голосов 128: ↑120 и ↓8 +112
Комментарии 99

Создаем эффект lightbox при помощи CSS3

Время на прочтение 5 мин
Количество просмотров 30K

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

С помощью псевдо-класса :target, мы сможем показывать изображения и переходить по ним.

Красивые изображения, используемые в демо-примерах, от Joanna Kustra, они используются на условиях лицензии Attribution-NonCommercial 3.0 Unported Creative Commons License.
Читать дальше →
Всего голосов 47: ↑40 и ↓7 +33
Комментарии 19

Создаем новогоднюю открытку при помощи CSS3

Время на прочтение 4 мин
Количество просмотров 13K


Всё ближе долгожданные новогодние и рождественские праздники и самое время подготовить подарки и поздравления. А как известно, самый лучший подарок — это подарок сделанный своими руками. :) Поэтому сегодня мы создадим новогоднюю анимированную открытку при помощи CSS3. Создание такой открытки займет у вас всего лишь несколько минут, так как для него мы будем использовать только несколько фоновых картинок и CSS3 анимацию.
Читать дальше →
Всего голосов 58: ↑49 и ↓9 +40
Комментарии 43

Создаем анимированные кнопки при помощи CSS3

Время на прочтение 11 мин
Количество просмотров 55K


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

В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.

Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

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

Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.
Читать дальше →
Всего голосов 215: ↑207 и ↓8 +199
Комментарии 40

Создаем оригинальные hover-эффекты при помощи CSS3

Время на прочтение 10 мин
Количество просмотров 107K


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

Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.
Читать дальше →
Всего голосов 198: ↑186 и ↓12 +174
Комментарии 47

Анимация меню при помощи CSS3

Время на прочтение 8 мин
Количество просмотров 37K


В данной статье я хотел бы показать вам некоторые приёмы создания эффектов при помощи CSS3 на примере меню. Идея заключается в простой композиции элементов: иконки, основного названия и вторичного названия, которое будет анимировано при наведении курсора, используя только CSS-переходы и CSS-анимацию. Мы рассмотрим несколько различных эффектов для элементов.
Читать дальше →
Всего голосов 195: ↑188 и ↓7 +181
Комментарии 49

Валидация формы в Firefox 4, используя возможности HTML5

Время на прочтение 5 мин
Количество просмотров 5.8K
Спецификация HTML5 предоставляет нам несколько новых типов полей, атрибутов и других полезных функций для форм. Одна из наиболее интересных функций — это валидация формы со стороны браузера.

К сожалению еще не все браузеры поддерживают эти возможности и поэтому мы попытались сосредоточиться на использовании этих возможностей в Firefox 4.


Почему валидация формы со стороны браузера?


Идея валидации формы в HTML5 состоит в том, чтобы отказаться от использования JavaScript при проверке содержания полей: действительно ли этот адрес электронной почты допустим? заполнено ли это поле? соответствуют ли пароли? Раньше в большинстве случаев для этих целей использовался JavaScript. Вы можете написать свой собственный javascript-код или воспользоваться javascript-библиотекой, но это всегда будет повторной, скучной и подверженной ошибкам задачей. С формами, проверенными браузером, Вы больше не должны заботиться о этих задачах, достаточно записать простой HTML.
Читать дальше →
Всего голосов 59: ↑54 и ↓5 +49
Комментарии 42

Создаем закруглённые уголки с помощью CSS 3

Время на прочтение 3 мин
Количество просмотров 80K
image

Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.
Читать дальше →
Всего голосов 81: ↑58 и ↓23 +35
Комментарии 87

JS Charts — генератор графиков и схем.

Время на прочтение 1 мин
Количество просмотров 15K
image
JS Charts является бесплатным JavaScript-генератором графиков и схем, который требует минимум знаний программирования. С JS Charts рисование диаграмм становится простой и легкой задачей. Он не требует никаких дополнительных плагинов и серверных модулей. Просто подключите скрипты, подготовьте данные для схемы в XML или массиве JavaScript и ваша таблица готова.
Читать дальше →
Всего голосов 71: ↑66 и ↓5 +61
Комментарии 33

jQuery Alert Dialogs — замена стандартным функциям Alert(), Confirm() и Prompt()

Время на прочтение 2 мин
Количество просмотров 38K
image
Плагин jQuery Alert Dialogs призван заменить основную функциональность стандартных предупреждений JavaScript, alert(), confirm(), и prompt() функций. Они полностью настраиваются с помощью CSS (это позволит выглядеть вашему сайту гораздо более привлекательно). И вы также можете настроить пользовательский заголовок для каждого диалогового окна.

Эти методы моделируют обычные модальные диалоговые окна. Они автоматически изменяют свое положение при изменении окна браузера. Если включить jQuery UI Draggable плагин, то окна можно перемещать, перетаскивая их за заголовки. В отличие от стандартных JavaScript функций, вы можете использовать HTML в сообщении. Например, чтобы задать переход на новую строку, вы можете использовать либо \n, либо < br / >.
Читать дальше →
Всего голосов 59: ↑52 и ↓7 +45
Комментарии 46

Создаем простой tooltips с помощью CSS и jQuery

Время на прочтение 4 мин
Количество просмотров 70K
CSS tooltips очень популярны в современном веб дизайне, и вопреки широко распространенному мнению их довольно легко создать, особенно с помощью различных популярных javascript-framework-ов.

Вы, конечно, можете использовать стандартный плагин, но чтобы сделать простой tooltips, Вам достаточно написать всего 10 строк кода jQuery и CSS.
image
Итак, приступим. Прежде всего обратите внимание на структуру этого tooltips: это обыкновенная ссылка, которая будет выглядеть примерно так:
Читать дальше →
Всего голосов 57: ↑52 и ↓5 +47
Комментарии 40

jQuery Horizontal Accordion — «играем» на аккордеоне

Время на прочтение 2 мин
Количество просмотров 1.6K
В этом примере я покажу как создать «эффект аккордеона», который можно использовать как для меню, так и для любых других целей. Раньше для этих целей использовался Flash, но теперь можно воспользоваться и jQuery.

image

Чтобы использовать jQuery на Вашем сайте, Вы сначала должны загрузить последнюю версию этой javascript-библиотеки, а затем подключить ее к Вашей странице.
Читать дальше →
Всего голосов 18: ↑13 и ↓5 +8
Комментарии 11

jTruncate — прячем все лишнее.

Время на прочтение 1 мин
Количество просмотров 3.6K
jTruncate — это плагин для jQuery, который позволяет легко прятать лишний текст на вашей веб-странице.
Этот плагин будет полезен для страниц перегруженных различной информацией.
image
jTruncate вызывается точно также как и большинство плагинов для jQuery.

$().ready(function() {
$('#example1').jTruncate();
});

Читать дальше →
Всего голосов 44: ↑32 и ↓12 +20
Комментарии 24

jQuery sIFR Plugin — создаем flash-текст

Время на прочтение 1 мин
Количество просмотров 1.7K
jQuery sIFR Plugin является аддоном для jQuery, который позволяет легко заменять текст на веб-странице на flash-текст (sIFR).

image

Как это работает?
Вы вызываете javascript-функцию, которая заменяет текст на веб-странице на sIFR (Scalable Inman Flash Replacement) текст, используя возможности jQuery расширенные jQuery Flash плагином. jQuery находит текст, который Вы хотите заменить. Затем, jQuery sIFR Plugin преобразовывает текст — меняет размер, цвет, шрифт и пр. jQuery sIFR Plugin полностью конфигурируем, и Вы можете настроить отображение текста не хуже чем при помощи CSS.
Читать дальше →
Всего голосов 41: ↑34 и ↓7 +27
Комментарии 40

Информация

В рейтинге
Не участвует
Откуда
Минск, Минская обл., Беларусь
Дата рождения
Зарегистрирован
Активность