Опубликовано автор в категориях Верстальщику.

css3-vs-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 поддерживают эту функцию.

css3-border-radius

Для того, чтобы реализовать этот пример используйте следующий 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-rounded-corners

jQuery плагин создает закругленные углы для ваших объектов в DOM, используя элемент canvas. Протестировано в IE7 и FF3.

Вы можете изменять следующие параметры:

radio — (int) радиуса размера углов
inColor — (color) цвет внутри элемента
outColor — (color) цвет за пределами элемента
borderSize — (int) ширина границы
borderColor — (color) цвет границы

jQuery Corners

jquery-corners

Этот плагин jQuery будет легко создавать красивые закругленные углы без изображений и лишних элементов разметки.

2. Border Image — изображение в границе блока

Еще одной интересной новой особенностью бордера в CSS3 является свойство border-image. Border-image, позволяет использовать картинку в качестве границы элемента. Каждая сторона изображения соответствует стороне HTML объекта.

css3-border-image

В настоящее время 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-border-image

jQuery.borderImage является кросс-браузерным вариантом, частичной реализации свойства border-image в CSS3. Этот плагин может создать такой же эффект, как border-image, создавая девять слоев с изображением один за одним, а затем располагает их соответствующим образом в фоне элемента.

3. Множественный фон

CSS3 позволяет применять несколько изображений в качестве фона одного элемента. Чтобы сделать это, вам нужно разделить фоновые изображения запятыми, например:

css3-multiple-background

Для того, чтобы реализовать этот пример используйте следующий 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.

CSS Multiple Backgrounds / Background Layering with jQuery

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>
jquery7-multiple-background

Код выше демонстрирует расположение слоев, и использование нескольких спрайтов классической видео игры Super Mario Bros 3.

4. Box Shadow и Text Shadow — тень для контейнера и текста

Основная цель этого свойства состоит в том, чтобы предоставить дизайнерам и CSS кодерам простой способ отображения тени позади текста или бокса. Синтаксис выглядит примерно так:

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

Опять же, это свойство не поддерживается в Firefox (до версии 3.1) и IE, так что мы должны найти способ сделать это с помощью jQuery.

Drop Shadow

jquery-text-shadow

Этот плагин создает мягкие тени позади элементов страницы, включая текст и прозрачные изображения. В настройках вы можете указать параметры горизонтального и вертикального смещения, степень размытия, прозрачность и цвет.

Text-shadow in Internet Explorer

text-chadow-in-ie

Text-shadow для Internet Explorer добавляет эффект тени для текста в Internet Explorer. Вы можете легко активировать его с помощью textShadow ();.

5. Непрозрачность и прозрачность

До недавних пор непрозрачность была наиболее применяемой особенностью CSS3. Непрозрачность — opacity определяет насколько прозрачным будет элемент на странице. Элемент с непрозрачностью 1.0 будет полностью непрозрачным (видимым), а элемент с непрозрачностью 0.0 будет противоположен ему, невидимым. Любое значение между граничными будет определять насколько прозрачным будет элемент. Посмотрите интересную статью на Zen Elements, в которой подробно описано это свойство.

css3-opacyti

В приведенном на картинке примере используется следующий 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

jquery-opacity

Этот плагин позволяет вам определить градиентную заливку для элемента. Вы можете задать направление градиента (справа налево или вверх-вниз) и его непрозрачность.

P.S.

Хотите скачать музыку?

Куда вложить деньги? Вопрос!

EPDM мембраны RubberCover

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

  1. Костя

    Функция множественных фонов через заднее место реализована, а давайте еще кроме CSS и JS будем еще столько же HTML писать… Какая разница, ведь приведенный выше JS только усложняет задачу, ведь не только в CSS, но и в JS приходится присваивать конкретному блоку отдельные слои.

    Бредятина.

    Ответить

Оставить комментарий

  • (не будет показан)