boxShadow - jQuery плагин для реализации box-shadow в IE
В комментариях к этой статье меня попросили написать плагин для jQuery, который бы делал возможным использование CSS3 свойства box-shadow в IE. Идея показалась мне интересной, к тому же для одного из моих проектов был нужен подобный функционал.Этот плагин похож на плагин textShadow - разница лишь в том, что в textShadow подложкой является текст, а в boxShadow для эффекта тени используется блок, размытый средствами IE.
К слову, в Internet Explorer есть фильтр, который создаёт тень от блока, но она выглядит слишком жёсткой и может быть направлена только в одну сторону, что нас совершенно не устраивает.
Итак, перейдём к плагину.
Так происходит вызов плагина:
$('.block').boxShadow('10px 10px #191919'); // без размытия тени
$('.block').boxShadow('10px 10px 15px #191919'); // с размытием
Параметры идут в следующем порядке – сдвиг по горизонтали, сдвиг по вертикали, размытие (опционально), цвет тени.Код плагина
$.fn.boxShadow = function(o){
if (!o) return; // если нет параметра - выходим
var str = o.split(' '), // делим введенную строку
x = parseInt(str[0]), // получаем отступ сверху
y = parseInt(str[1]), // и снизу
blur = 0, // значения по умолчанию
color = '';
if (str.length == 3) { // если было передано 3 параметра
color = str[2]; // третьим параметром будет цвет
} else { // иначе
blur = parseInt(str[2]); // третьим параметром будет размытие
color = str[3]; // а четвёртым цвет
}
return $(this).each(function(){ // для каждого элемента
var box = $(this), // находим блок, с которым будем работать
off = box.offset(); // вычисляем его координаты
box.css({position:'relative',zIndex:1}) // задаём свойства
.after('<div></div>') // вставляем блок, который будет исполнять роль тени
.next() // находим его
.css({ // добавляем ему следующие свойства
width:box.width() + parseInt(box.css('padding-left')) + parseInt(box.css('padding-right')), // устанавливаем ширину
height:box.height() + parseInt(box.css('padding-bottom')) + parseInt(box.css('padding-top')), // устанавливаем длину
position:'absolute', // абсолюное позиционирование
zIndex:0, // прячем под основной слой
backgroundColor:color, // устанавливаем цвет тени
left:off.left + x - blur + 'px', // сдвиг слева
top:off.top + y - blur + 'px'}); // сдвиг сверху
if (blur) box.next() // если есть размытие, находим тень
.css('filter','progid:DXImageTransform.Microsoft.Blur(pixelradius=' + blur + ', enabled="true")'); // и размываем её
});
};
Вот примеры блоков, тень в которых сделана через box-shadow в нормальных браузерах и через плагин boxShadow в IE.|
|
.block {
box-shadow:#a3a3a3 8px 8px;
-moz-box-shadow:#a3a3a3 8px 8px;
-webkit-box-shadow:#a3a3a3 8px 8px;
$('.block').boxShadow('8px 8px #a3a3a3');
|
|
|
.block {
box-shadow:#a3a3a3 8px 8px 15px;
-moz-box-shadow:#a3a3a3 8px 8px 15px;
-webkit-box-shadow:#a3a3a3 8px 8px 15px;
}
$('.block').boxShadow('8px 8px 15px #a3a3a3');
|
.block {
box-shadow:#a3a3a3 -8px -8px 15px;
-moz-box-shadow:#a3a3a3 -8px -8px 15px;
-webkit-box-shadow:#a3a3a3 -8px -8px 15px;
}
$('.block').boxShadow('-8px -8px 15px #a3a3a3');
| |
.block {
box-shadow:#a3a3a3 0 0 15px;
-moz-box-shadow:#a3a3a3 0 0 15px;
-webkit-box-shadow:#a3a3a3 0 0 15px;
}
$('.block').boxShadow('0 0 15px #a3a3a3');
|
Чтобы плагин срабатывал только в IE, его вызов мы сделаем следующим образом:
<!--[if IE]><script type="text/javascript" src="box-shadow.jquery.js"></script><![endif]-->Не забывая при этом добавить вызов плагина в конец файла box-shadow.jquery.js:
$(document).ready(function(){
/* Здесь будет вызов плагина */
})
А в следующей статье мы рассмотрим сразу два свойства CSS 3 – rgba и hsla.
И сделан плагин для людей, которые не особенно разбираются в тонкостях CSS. Им не нужно знать как вычислять отступы, как создавать дополнительные блоки с position:absolute и что такое z-index. Им нужно, чтобы можно было написать
.block { box-shadow:8px 8px 15px #a3a3a3; }и практически тоже самое в JS:$('.block').boxShadow('8px 8px 15px #a3a3a3');и не задумываться об остальном.Скачать её можно здесь: jquery.com
Если сюда ссылку выкладывать неудобно, можете написать мне на e-mail, он указан в правой части страницы.
Скачать её можно здесь: jquery.com
Я добавлю информацию об этом в пост.
Правда мне кажется, что в нём не хватает поддержки внутренней тени блока, то есть свойства inset.
Но свойство inset сложно в реализации, так как оно требует наложения блока с тенью сверху, а не снизу.
Вы можете отказаться от поддержки тени блока для IE, либо поискать решение, которое бы вас устроило.
Но увы, это невозможно.
Поскольку оба плагина работают на JS, то так или иначе они будут конфликтовать. Советую вам посмотреть в сторону box-shadow - recens.ru/css/css3_box_shadow.html
это чтобы срабатывало только в IE
у таблицы вид
в css прописано следующее:
.block{
-webkit-box-shadow: 0 0 20px #969696;
-moz-box-shadow: 0 0 20px #969696;
box-shadow: 0 0 20px #969696;}
$('.block').boxShadow('0 0 20px #969696');
И не работает! помогите!
я пытался даже изменить src:
потому что скачанный вариант так и называется.
Но оно и на остальных браузеров тоже влияет и конфликтует с ними.
А так на осле смотриться ОТЛИЧНО! )
html:
css:
.main {
box-shadow:#a3a3a3 0 0 15px;
-moz-box-shadow:#a3a3a3 0 0 15px;
-webkit-box-shadow:#a3a3a3 0 0 15px;
}
.shadow {
/*тут еще width и height добавить*/
background-color: #a3a3a3;
filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=15, enabled="true")
}
Я сделал так:
поставил jquery, залил этот скрипт. Заранее в этом скрипте прописал: $(document).ready(function(){ $('my-block').boxShadow('0 0 15px #a3a3a3'); })
---
Если правильно сделал, значит плагин туфта.
------
И сделан плагин для людей, которые не особенно разбираются в тонкостях CSS.
------
уважаемая если бы так оно и было вы бы показали что и куда вставлять. ваш пост рассчитан на профи и новичку точно не подойдет.
я знаю html уже лет 5. вставил все так как обычно это нужно сделать с jquery скриптами но нифига не работает чето.
Пользуюсь уже давно
Делает цсс3 - text-shadow и border-radius - это сам проверял
А еще в описании написано что применяется к:
* border-radius
* box-shadow
* border-image
* multiple background images
* linear-gradient as background image
ВСЕ РАБОТАЕТ!!!
для IE писать
$('.block').boxShadow('8px 8px 15px #a3a3a3');
для остальных браузеров в css
box-shadow:#888888 0 0 15px;
P.S. чтобы скопировать одну строку jQuery не надо 5лет знать html...
www.google.com/search?client=safari&rls=en&q=jquery&ie=UTF-8&oe=UTF-8
Когда меняешь масштаб страницы (Ctrl++ или Ctrl+-) блок, который и дает эффект тени, свои размеры не меняет! Обновление страницы помогает, данный блок свои размеры пересчитывает, и все встает на места, до следующего изменения масштаба )))