Реализация 5 свойств CSS3 для большинства браузеров, используя функционал jQuery

Перевод, оригинал статьи:
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.

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>

1

h3 { text-shadow: 2px 2px 2px #333; }

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; }