7 простых эффектов для текста с использованием CSS3

Сейчас после прочтения множества мануалов и уроков по CSS3, вы начинаете все больше использовать CSS3 в своих проектах. Все, что вам не хватает - это...
Сейчас после прочтения множества мануалов и уроков по CSS3, вы начинаете все больше использовать CSS3 в своих проектах. Все, что вам не хватает - это готовые примеры, готовые реализации. Именно этим мы сегодня займемся - изучим несколько простых, но при этом эффектных трюков по работе с текстом в CSS3. Все эти трюки настолько просто, что вы можете с легкостью скопировать приведенный код и использовать в своем проекте. Но не забывайте о том, что старые браузеры не будут поддерживать большинство из них. Так посоветуйте вашим пользователям обновить браузеры и лучше пусть это будут webkit браузеры ;) (далее…)

CSS3 для начинающих. Часть 6.1. Кнопки на CSS3

Очередная статья из цикла CSS3 для начинающих. Речь сегодня пойдет о кнопках. Мы привыкли, что кнопка - это набор картинок. Первая картинка создается для кнопки...
Очередная статья из цикла CSS3 для начинающих. Речь сегодня пойдет о кнопках. Мы привыкли, что кнопка - это набор картинок. Первая картинка создается для кнопки в спокойном состоянии, вторая для состояния когда курсор мыши наведен на кнопку и третья - при нажатии на кнопку. Таким образом для каждой кнопки приходиться рисовать 3 картинки. С развитием и внедрением CSS3 мы можем избавиться от всего этого и делать кнопки легко и непринужденно, используя только стили CSS. Сегодня мы займемся созданием простых кнопок разного размера и цвета. (далее…)

Панель трендов с помощью CSS и jQuery

Хочу сегодня поделиться с вами интересной задумкой. На многих англоязычных порталах, частенько присутствует так называемая панель трендов. Обычно это однострочная панель прилепленная к низу экрана,...
Хочу сегодня поделиться с вами интересной задумкой. На многих англоязычных порталах, частенько присутствует так называемая панель трендов. Обычно это однострочная панель прилепленная к низу экрана, на которой создатели портала анонсируют популярные статьи. Панель достаточно хорошо привлекает внимание и соответственно вы можете перенаправить трафик со всего сайта в нужное вам русло. Существует множество плагинов для Wordpress, которые позволяют сделать что-то подобное. Но нам всегда интересен чистый легкий код. Так же мы будем использовать свойство opacity для того, чтобы панель становилась ярче при наведении на нее курсора мыши. (далее…)

Зеркалирование изображения с помощью CSS3

Совсем недавно я писал о том, что в самое ближайшее время постараюсь рассказать о замечательно свойстве CSS3 box-reflect. Зеркалирование - это достаточно изящный трюк, который...
Совсем недавно я писал о том, что в самое ближайшее время постараюсь рассказать о замечательно свойстве CSS3 box-reflect. Зеркалирование - это достаточно изящный трюк, который прост в применении и очень эффектно смотрится. Есть несколько вариантов с помощью которых можно получить зеркальное изображение. Первый и самый простой - это редактирование изображения в графическом редакторе. Есть так же возможность сделать зеркалирование с помощью JavaScript или CANVAS. Но ребята из WebKit решили реализовать свою собственную идею - зеркалирование с помощью чистого CSS. (далее…)

6 сокращений в CSS, о которых должен знать каждый

Недавно появилось желание привести CSS файлы в порядок - избавиться от ненужного кода, использовать сокращения вместо описания. Таким образом мы можем уменьшить размер файлов css...
Недавно появилось желание привести CSS файлы в порядок - избавиться от ненужного кода, использовать сокращения вместо описания. Таким образом мы можем уменьшить размер файлов css и ускорить загрузку сайта в целом. Сегодня мы начнем с самых распространенных сокращений в CSS: фон (background), отступы (margin & padding), границы (border), шрифты (font), стили списков (list) и затемнение (transition). (далее…)

Эффекты при наведении. 5 готовых вариантов на CSS3

Порой возникает надобность сделать эффект при наведении курсора мыши на какой-либо элемент на вашем сайте. Сегодня я бы хотел поделиться готовыми вариантами - 5 довольно...
Порой возникает надобность сделать эффект при наведении курсора мыши на какой-либо элемент на вашем сайте. Сегодня я бы хотел поделиться готовыми вариантами - 5 довольно приятных на глаз эффектов. Эти эффекты позволять оживить ваш сайт, сделать его более динамичным. Самое приятное в представленных ниже эффектов - отсутствие JavaScript - мы сделаем все только с использованием CSS3. Про поддержку браузерами повторяться не хочется - Mozilla и webkit браузеры справятся отлично. А вот IE не совсем корректно будет отображать некоторые эффекты, хотя в последних версиях заметны улучшения. Итак, давайте посмотрим на 5 эффектов при наведении. (далее…)

Градиентная заливка с помощью CSS3

Хотел бы сегодня рассказать о том, как сделать градиентную заливку с помощью CSS3. Это позволит избавиться нам от использования фоновых изображений. Сегодня я расскажу об...
Хотел бы сегодня рассказать о том, как сделать градиентную заливку с помощью CSS3. Это позволит избавиться нам от использования фоновых изображений. Сегодня я расскажу об линейном градиенте. В самое ближайшее время постараюсь рассказать так же о радиальном. Итак, начнем. (далее…)

CSS3 для начинающих. Часть 5.2. Боксы на CSS3

И вновь продолжаем изучать CSS3 с циклом статей CSS3 для начинающих. Сегодня мы разберем создание так называемых боксов с помощью CSS3 без использования изображений. Можно...
И вновь продолжаем изучать CSS3 с циклом статей CSS3 для начинающих. Сегодня мы разберем создание так называемых боксов с помощью CSS3 без использования изображений. Можно с уверенностью сказать, что боксы которые мы сегодня сделаем прекрасно отображаются во всех браузерах за исключением IE. Поэтому если вы до сих используете Internet Explorer - смените браузер. Итак, перейдем к нашей статье. (далее…)

Вращающиеся лучи с помощью анимации CSS3 и JavaScript

Сегодня у нас очень интересный эксперимент. Мы будем заниматься созданием вращающихся лучей вокруг картинки. Работать все это будет с использованием анимации CSS3 и JavaScript. Код...
Сегодня у нас очень интересный эксперимент. Мы будем заниматься созданием вращающихся лучей вокруг картинки. Работать все это будет с использованием анимации CSS3 и JavaScript. Код довольно-таки простой, но эффект сможет поразить любого! Итак приступим. (далее…)

CSS3 для начинающих. Часть 5.1. Drop-shadow — простые примеры

Хотя сегодня и первомай, продолжаем цикл статей CSS3 для начинающих. Жаль, что погода не задалась - к обеду пошел дождь и выезд на шашлыки отложили....
Хотя сегодня и первомай, продолжаем цикл статей CSS3 для начинающих. Жаль, что погода не задалась - к обеду пошел дождь и выезд на шашлыки отложили. Но ничего. Вместо этого у нас появилась возможность продолжить знакомство с CSS3. Речь пойдет о drop-shadow - свойство CSS3 позволяющее создавать различные тени, без использования изображений. На данный момент поддержка реализована в следующих версиях браузеров: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+. (далее…)