CSS: створює біле світіння навколо зображення

79

Як я можу створити біле світіння як межу зображення невідомого розміру?

— тамір
джерело

138

Використовуйте простий CSS3 (не підтримується в IE <9)

img
{
    box-shadow: 0px 0px 5px #fff;
}

Це дозволить виділити біле світіння навколо кожного зображення у вашому документі, використовуйте більш конкретні селектори, щоб вибрати, які зображення ви хочете, щоб сяяли навколо. Ви можете змінити колір, звичайно :)

Якщо вас турбують користувачі, які не мають найновіших версій своїх браузерів, скористайтеся цим:

img
{
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0px 0px 5px #fff;
}

Для IE ви можете використовувати фільтр світіння (не впевнений, які браузери його підтримують)

img
{
    filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
}

Пограйте з налаштуваннями, щоб побачити, що вам підходить :)

— Кайл
джерело

Я думаю, що це підтримує лише IE 9+, просто додайте: <meta http-equiv="X-UA-Compatible" content="IE=9" />щоб зробити сторінку в IE9 та IE10 як версія IE9

— Крістіан Марк

5

Зверніть увагу, що фільтр має неочікувану поведінку в декількох елементах. Застосуйте його до набору полів і дивуйтеся. Крім того, він може просочуватися до дочірніх елементів. І він покаже попередження ActiveX для сторінки із страшною жовтою смугою. Просто уникайте цього. додати плоску світло-сіру тінь для IE і закінчити.

— gcb

Не працює з прозорими зображеннями. Як круглий логотип png.

— Сантош Кумар,

@SantoshKumar, ні, ні, бо box-shadow не може знати, де знаходяться непрозорі пікселі png. Це впливає лише на елементи HTML, сам елемент <img>, а не на вміст.

— Кайл

1

@Kyle drop-shadow може хоч :)

— Брендіто

9

@tamir; Ви можете це зробити за допомогою властивості css3.

img{
-webkit-box-shadow: 0px 0px 3px 5px #f2e1f2;
-moz-box-shadow: 0px 0px 3px 5px #f2e1f2;
box-shadow: 0px 0px 3px 5px #f2e1f2; 
}

перевірте скрипку http://jsfiddle.net/XUC5q/1/ і ви можете генерувати звідси http://css3generator.com/

Якщо вам це потрібно для роботи в старих версіях IE, ви можете використовувати CSS3 PIE для емуляції тіні вікна в цих браузерах, і ви можете використовувати, filterяк сказав Кайл так

filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5')

Ви можете створити свій фільтр тут http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

— пісок
джерело

Вам більше не потрібні префікси moz і webkit, останні версії цих браузерів підтримують box-shadowяк є :)

— Кайл

@kyle; я знаю, але це не працює над попередньою версією до бета-версії Mozilla.

— пісок

2

@Kyle - а якщо ви хочете підтримати користувачів старих версій? (таких ще є)

— Spudley

1

@kyle; можливо вам доведеться оновити свою відповідь, тому що є дуже багато людей, які не оновлювали там mozilla.

— пісок,

7

Працює як шарм!

.imageClass {
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

Вуаля! Це воно! Очевидно, це не спрацює, тобто, але кого це цікавить ...

— Хенк
джерело

2

Проголосовано проти; -webkit-filter не є властивістю CSS, і в будь-якому випадку буде підтримувати лише браузери webkit - вам було б краще також додати не префіксну версію та, можливо, префікси -moz-, -ms- та -o-, слід mozilla, Microsoft або Opera (поки поки Opera 12 все ще в обігу ...)

— Algy Taylor

Прихильний. Нестандартне майно не робить його марним. Бувають випадки використання, коли вам не потрібно підтримувати нічого, крім webkit. Ця відповідь мені допомогла, і ефект -webkit-filter виглядає в моєму випадку більш підходящим, ніж box-shadow.

— Антон Єбрак,

Це найкраща відповідь, тому що вона відтінить вміст, а не контейнер

— smedasn

3

Залежить від того, якими є ваші цільові браузери. У нових - це так просто, як :

   -moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
        box-shadow: 0 0 5px #fff;

Для старих браузерів вам доведеться застосувати обхідні шляхи, наприклад, на основі цього прикладу , але вам, швидше за все, знадобляться додаткові розмітки.

— Болдевін
джерело

2

пізно на вечірку тут; однак просто хотів додати трохи зайвого задоволення ..

box-shadow: 0px 0px 5px rgba(0,0,0,.3);
padding:7px;

дасть вам приємний вигляд підбитий в образі. Доповнення дасть вам змодельовану білу межу (або будь-яку межу, яку ви встановили). rgba просто дозволяє вам визначитися з певним кольором; 0,0,0 - чорний. Ви можете так само легко використовувати будь-який інший колір RGB.

Сподіваюся, це комусь допомагає!

— Петрогад
джерело

0

Ви можете використовувати CSS3 для створення такого ефекту, але тоді ви побачите його лише в сучасних браузерах, що підтримують тінь вікна, якщо ви не використовуєте полізаповнення, як CSS3PIE . Так, наприклад, ви можете зробити щось подібне: http://jsfiddle.net/cany2/

— кінакута
джерело