CSS3

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

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

13 Май, 2011 | Рубрики: CSS3 Читать статью

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

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

12 Май, 2011 | Рубрики: CSS3 Читать статью

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

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

12 Май, 2011 | Рубрики: CSS3, JavaScript Читать статью

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

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

10 Май, 2011 | Рубрики: CSS3 Читать статью

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

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

10 Май, 2011 | Рубрики: CSS3 Читать статью

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

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

06 Май, 2011 | Рубрики: CSS3 Читать статью

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

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

05 Май, 2011 | Рубрики: CSS3 Читать статью

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

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

04 Май, 2011 | Рубрики: CSS3 Читать статью

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

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

02 Май, 2011 | Рубрики: 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+.

01 Май, 2011 | Рубрики: CSS3 Читать статью