Перевод, оригинал статьи:
5 CSS3 Techniques For Major Browsers using the Power of jQuery
CSS3 на сегодняшний день дает нам много новых функций и возможностей: text-shadow — тень для тектса, box-sizing — изменение размеров бокса пользователем, opacity — прозрачность, multiple backgrounds — множественные фоны, border-radius — скроенные углы у блока, border-image — картинка в границе блока и т.д. …
CSS3 предлагает очень гибкие решения и дает возможность реализовать сложные визуальные эффекты более простым способом. Но не все браузеры на сегодня поддерживают CSS3, и для тех, которые делать это не умеют есть библиотеки типа мощного jQuery или более простые специализированные эффекты на JavaScript.
В данной статье описаны 5 CSS3-приемов, которые помогут вам реализовать впечатляющие дизайн-эффекты на вашем сайте, и показано как достичь такого же результата, используя jQuery для браузеров, которые не совместимы с основными функциями CSS3.
1. Border Radius — блоки с закругленными углами
W3C предложил очень интересные варианты для рендеринга границ в CSS3, одним из которых является border-radius. Это CSS3 свойство позволяет создавать блоки с закругленными углами. Mozila/Firefox и Safari 3 поддерживают эту функцию.
Для того, чтобы реализовать этот пример используйте следующий CSS код:
1 2 3 4 5 6 7 8 9 10 | #rounded-box { -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-rightright-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-rightright-radius: 15px; } |
Ниже вы найдете jQuery решение и плагины, которые позволят вам создать закругленные углы без использования картинок и CSS3.
jQuery Canvas Rounded Corners
jQuery плагин создает закругленные углы для ваших объектов в DOM, используя элемент canvas. Протестировано в IE7 и FF3.
Вы можете изменять следующие параметры:
radio — (int) радиуса размера углов
inColor — (color) цвет внутри элемента
outColor — (color) цвет за пределами элемента
borderSize — (int) ширина границы
borderColor — (color) цвет границы
jQuery Corners
Этот плагин jQuery будет легко создавать красивые закругленные углы без изображений и лишних элементов разметки.
2. Border Image — изображение в границе блока
Еще одной интересной новой особенностью бордера в CSS3 является свойство border-image. Border-image, позволяет использовать картинку в качестве границы элемента. Каждая сторона изображения соответствует стороне HTML объекта.
В настоящее время border-image поддерживается только в альфе Firefox3.1 и последних релизах Safari и Chrome. Ниже вы найдете мощное jQuery решение, которое позволит вам реализовать эту возможность для работы в: Firefox 2.x, Firefox 3, Firefox 3.1, Safari 3.x, Chrome 1.0, Opera 9.x, Opera 10 и IE7.
jquery.borderImage.js
jQuery.borderImage является кросс-браузерным вариантом, частичной реализации свойства border-image в CSS3. Этот плагин может создать такой же эффект, как border-image, создавая девять слоев с изображением один за одним, а затем располагает их соответствующим образом в фоне элемента.
3. Множественный фон
CSS3 позволяет применять несколько изображений в качестве фона одного элемента. Чтобы сделать это, вам нужно разделить фоновые изображения запятыми, например:
Для того, чтобы реализовать этот пример используйте следующий CSS код:
1 2 3 4 5 6 | #multiple-background-box { background: url(top-bg.gif) top left no-repeat, url(bottombottom-bg.gif) bottombottom left no-repeat, url(middle-bg.gif) left repeat-y; padding: 20px; } |
Так как на сегодняшний день это свойство поддерживается всего лишь несколькими браузерами, то для реализации множественного фона вам нужно использовать несколько вложенных блоков. Это увеличивает количество кода и не всегда оправдано и эффективно. Решение заключается в том, чтобы использовать jQuery с плагином Background Layers.
Background Layers плагин не раздувает XHTML, нужно просто добавить несколько строк JavaScript, чтобы реализовать эффект с минимальным количеством лишних элементов. Эта концепция сходна с использованием слоев в Photoshop, одно фоновое изображение накладывается на другое.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript" src="/includes/jquery.background_layers.js"></script> <script type="text/javascript"> $(function(){ $('.marioBox').add_layer("#A4D3FF"); $('.marioBox').add_layer("url('/images/mario_floor.gif') no-repeat bottom"); $('.marioBox').add_layer("url('/images/mario_bush.gif') no-repeat 10px 167px"); $('.marioBox').add_layer("url('/images/mario_pipe.gif') no-repeat 180px 183px"); $('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 90px 93px"); $('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 180px 53px"); $('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 20px 73px"); $('.marioBox').add_layer("url('/images/goomba.gif') no-repeat 70px 214px"); $('.marioBox').add_layer("url('/images/mario.gif') no-repeat 180px 156px"); }); </script> <div class="marioBox" style="height: 248px; width: 248px;"></div> |
Код выше демонстрирует расположение слоев, и использование нескольких спрайтов классической видео игры Super Mario Bros 3.
4. Box Shadow и Text Shadow — тень для контейнера и текста
Основная цель этого свойства состоит в том, чтобы предоставить дизайнерам и CSS кодерам простой способ отображения тени позади текста или бокса. Синтаксис выглядит примерно так:
1 | h3 { text-shadow: 2px 2px 2px #333; } |
Опять же, это свойство не поддерживается в Firefox (до версии 3.1) и IE, так что мы должны найти способ сделать это с помощью jQuery.
Drop Shadow
Этот плагин создает мягкие тени позади элементов страницы, включая текст и прозрачные изображения. В настройках вы можете указать параметры горизонтального и вертикального смещения, степень размытия, прозрачность и цвет.
Text-shadow in Internet Explorer
Text-shadow для Internet Explorer добавляет эффект тени для текста в Internet Explorer. Вы можете легко активировать его с помощью textShadow ();.
5. Непрозрачность и прозрачность
До недавних пор непрозрачность была наиболее применяемой особенностью CSS3. Непрозрачность — opacity определяет насколько прозрачным будет элемент на странице. Элемент с непрозрачностью 1.0 будет полностью непрозрачным (видимым), а элемент с непрозрачностью 0.0 будет противоположен ему, невидимым. Любое значение между граничными будет определять насколько прозрачным будет элемент. Посмотрите интересную статью на Zen Elements, в которой подробно описано это свойство.
В приведенном на картинке примере используется следующий CSS:
1 2 3 4 5 | div.L1 { background:#036; opacity:0.2; width:575px; height:20px; } div.L2 { background:#036; opacity:0.4; width:575px; height:20px; } div.L3 { background:#036; opacity:0.6; width:575px; height:20px; } div.L4 { background:#036; opacity:0.8; width:575px; height:20px; } div.L5 { background:#036; opacity:1.0; width:575px; height:20px; } |
Element gradient
Этот плагин позволяет вам определить градиентную заливку для элемента. Вы можете задать направление градиента (справа налево или вверх-вниз) и его непрозрачность.
P.S.
Хотите скачать музыку?
Куда вложить деньги? Вопрос!
gps
Спасибо за статью оч поленая…
андрей
+1 спасибо 🙂
Oleg
Спасибо! 🙂
Костя
Функция множественных фонов через заднее место реализована, а давайте еще кроме CSS и JS будем еще столько же HTML писать… Какая разница, ведь приведенный выше JS только усложняет задачу, ведь не только в CSS, но и в JS приходится присваивать конкретному блоку отдельные слои.
Бредятина.