В CSS3, используя Box-Shadow и Border-Radius непосредственно на изображении, браузер не может хорошо отображаться. Однако, если вы используете изображение в качестве фонового изображения, добавленный браузер стиля может хорошо его отображать. Я объясню, как создать различные эффекты стиля изображения, используя Box-Shadow, Border-Radius и переход.
вопросПосмотрев на демонстрацию, мы заметили, что мы установили границу и встроенного ящика для первой строки изображения. Firefox производит границу изображения, но не делает встроенную коробку. Ни хромированные, ни сафари эффекты не оказываются.
. Нормальный IMG {
Граница: твердый 5px #000;
-Вебкит-грамотный радий: 20px;
-Моз-грамотный радий: 20px;
граница-радий: 20px;
-Webkit-box-shadow: вставка 0 1px 5px rgba (0,0,0, .5);
-Моз-бокс-тень: вставка 0 1px 5px rgba (0,0,0, .5);
Box-Shadow: вставка 0 1PX 5PX RGBA (0,0,0, .5);
}
Эффект Firefox :Chrome/Safari
Обходной путьДля того, чтобы граница-радиус и встроенные коробки работали должным образом, нам нужно преобразовать изображение в фоновое изображение.
Динамический методЧтобы выполнить эту работу динамически, нам нужно использовать jQuery, чтобы добавить фоновое изображение, чтобы обернуть каждое изображение. Следующий код JS добавляет обертку для каждого изображения, а путь фонового изображения - это путь изображения.
Код относительно прост, я не думаю, что есть необходимость объяснить это. Если вы не знаете, вы можете проверить API JQUERY напрямую.
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>
<script type = "text/javascript">
$ (document) .ready (function () {
$ ("img"). load (function () {
$ (this) .wrap (function () {
return '<<span style = "position: относительно; отображение: inline block; фон: url (' + $ (this) .attr ('src') + ') без повторного центра центра; /> ';
});
$ (this) .css ("непрозрачность", "0");
});
});
</script>
Выход
Приведенный выше код выведет следующие результаты:
<span style = "Положение: относительно; дисплей: встроенный блок; фон: url (image.jpg) Центр без повторного оборудования; ширина: 150px; высота: 150px;">
<img src = "image.jpg" style = "непрозрачность: 0;">
</span>
Круглая картинаДобавьте, что мы используем границу-радий для достижения эффекта круговых изображений, эффект заключается в следующем:
CSS:
.circle .image-wrap {
-Вебкит-грамотный радий: 50ем;
-Моз-грамотр-радиус: 50ем;
граница-радий: 50ем;
}
Карточный стильНиже приведено изображение в стиле карты, используя несколько встроенных коробки.
CSS:
.card .image-wrap {
-Webkit-box-shadow: вставка 0 0 1px rgba (0,0,0, .8), вставка 0 2px 0 rgba (255,255,255, .5), вставка 0 -1px 0 Rgba (0,0,0, .4);
-Моз-бокс-тень: вставка 0 0 1px rgba (0,0,0, .8), вставка 0 2px 0 rgba (255,255,255, .5), вставка 0 -1px 0 Rgba (0,0,0, .4);
Box -Shadow: вставка 0 0 1PX RGBA (0,0,0, .8), вставка 0 2PX 0 RGBA (255,255,255, .5), вставка 0 -1PX 0 RGBA (0,0,0, .4);
-Вебкит-грамотный радий: 20px;
-Моз-грамотный радий: 20px;
граница-радий: 20px;
}
Стиль помощиНиже приведен эффект рельефа.
CSS:
.embossed .image-wrap {
-Webkit -box -shadow: вставка 0 0 2px rgba (0,0,0, 0,8), вставка 0 2px 0 rgba (255,255,255, .5), вставка 0 -7px 0 Rgba (0,0,0, 0,6), вставка 0 -9px 0 Rgba (255,255,0,0,. 3);
-Моз -бокс -тень: вставка 0 0 2px rgba (0,0,0, .8), вставка 0 2px 0 rgba (255,255,255, .5), вставка 0 -7px 0 Rgba (0,0,0, 0,6), вставка 0 -9px 0 rgba (255,255,255,. 3);
Box -Shadow: вставка 0 0 2px rgba (0,0,0, .8), вставка 0 2px 0 rgba (255,255,255, .5), вставка 0 -7px 0 rgba (0,0,0, .6), вставка 0 -9px 0 Rgba (255,255,255, .3);
-Вебкит-грамотный радий: 20px;
-Моз-грамотный радий: 20px;
граница-радий: 20px;
}
Гибкий стиль облегченияПо сравнению со стилем тиснения, новый стиль добавляет атрибут размытия 1PX.
CSS:
.soft-embossed .image-wrap {
-Webkit -box -shadow: вставка 0 0 4px rgba (0,0,0,1), вставка 0 2px 1px rgba (255,255,255, .5), вставка 0 -9px 2px rgba (0,0,0, .6), INSET 0 -12px 2px Rgba (255555555555555555555555555555555555555555555555555555555555555555555 гг.
-Моз -бокс -тень: вставка 0 0 4px rgba (0,0,0,1), вставка 0 2px 1px rgba (255,255,255, .5), вставка 0 -9px 2px rgba (0,0,0,.
Box -Shadow: вставка 0 0 4px rgba (0,0,0,1), вставка 0 2px 1px rgba (255,255,255, .5), вставка 0 -9px 2px rgba (0,0,0,.
-Вебкит-грамотный радий: 20px;
-Моз-грамотный радий: 20px;
граница-радий: 20px;
}
Стиль вырезаИспользуйте встроенную коробку для достижения эффекта выреза.
CSS:
.cut-out .image-wrap {
-Webkit-box-shadow: 0 1px 0 rgba (255,255,255, .2), вставка 0 4px 5px rgba (0,0,0, 0,6), вставка 0 1px 0 rgba (0,0,0, .6);
-Мозо-бокс-тень: 0 1px 0 rgba (255,255,255, .2), вставка 0 4px 5px rgba (0,0,0, 0,6), вставка 0 1px 0 rgba (0,0,0, 0,6);
Box-Shadow: 0 1px 0 Rgba (255,255,255, .2), вставка 0 4px 5px rgba (0,0,0, .6), вставка 0 1px 0 rgba (0,0,0, 0,6);
-Вебкит-грамотный радий: 20px;
-Моз-грамотный радий: 20px;
граница-радий: 20px;
}
Деформация и сияниеВ этом примере мы добавляем атрибут перехода в упаковку изображения. Когда мышь проскользнут мимо, она изменится с округлого угла на круглую форму. Затем мы используем несколько ящиков для достижения светящегося эффекта.
CSS:
.morphing-glowing .image-wrap {
-Вебкит-трансляция: 1 с;
-Моз-трансляция: 1 с;
Переход: 1 с;
-Вебкит-грамотный радий: 20px;
-Моз-грамотный радий: 20px;
граница-радий: 20px;
}
.morphing-glowing .image-wrap: Hover {
-Webkit-box-shadow: 0 0 20px rgba (255,255,255, .6), вставка 0 0 20px rgba (255,255,255,1);
-Мозо-бокс-тень: 0 0 20px rgba (255,255,255, .6), вставка 0 0 20px rgba (255,255,255,1);
Box-Shadow: 0 0 20px rgba (255,255,255, .6), вставка 0 0 20px rgba (255,255,255,1);
-Вебкит-грамотный радий: 60 эм;
-Моз-грамотр-радиус: 60 эм;
граница радий: 60 эм;
}
Выделите эффектыЭффект выделения достигается путем добавления: после псевдокласса к элементу.
CSS:
.glossy .image-wrap {
-Webkit-box-shadow: вставка 0 -1px 0 rgba (0,0,0, .5);
-Моз-бокс-тень: вставка 0 -1px 0 rgba (0,0,0, .5);
Box -Shadow: вставка 0 -1px 0 rgba (0,0,0, .5);
-Вебкит-грамотный радий: 20px;
-Моз-грамотный радий: 20px;
граница-радий: 20px;
}
.glossy .image-wrap: после {
позиция: абсолютно;
содержание: ' ';
Ширина: 100%;
высота: 50%;
Верх: 0;
слева: 0;
-Вебкит-грамотный радий: 20px;
-Моз-грамотный радий: 20px;
граница-радий: 20px;
Справочная информация: -мозо-линейно-градиент (вверху, RGBA (255,255,255,0,7) 0%, RGBA (255,255,255, .1) 100%);
Фон: -Вет-градиент (линейный, левый верх, левый дно, цветовое стоп (0%, RGBA (255,255,255,0,7)), цветовой стоп (100%, RGBA (255,255,255, .1)));
Фон: линейный градиент (вверху, RGBA (255,255,255,0,7) 0%, RGBA (255,255,255, .1) 100%);
}
Эффект отраженияВ этом примере мы перемещаем выделение в нижнюю часть, чтобы достичь эффекта отражения.
CSS:
.reflection .image-wrap: после {
позиция: абсолютно;
содержание: ' ';
Ширина: 100%;
Высота: 30px;
Внизу: -31px;
слева: 0;
-Вебкит-графин-топ-левый радий: 20px;
-Вебкит-графин-вершина-правый-радиус: 20px;
-Моз-грамотр-радиус-topleft: 20px;
-Моз-грамотный-радиус-топрайт: 20px;
пограничная топ-лево-радий: 20px;
Прадис-граница-20px;
Справочная информация: -моз-линейно-градиент (вверху, RGBA (0,0,0, .3) 0%, RGBA (255,255,255,0) 100%);
Фон: -Ветбкит-градиент (линейный, левый верх, левый нижний, цветовой стоп (0%, RGBA (0,0,0, 0,3)), цветовой стоп (100%, RGBA (255,255,255,0)));
Фон: линейный градиент (вверху, RGBA (0,0,0, .3) 0%, RGBA (255,255,255,0) 100%);
}
.reflection .image-wrap: Hover {
позиция: относительно;
Верх: -8px;
}
Основные моменты и размышленияВ этом примере мы используем: до и: после объединения основных моментов и эффектов отражения.
CSS:
.glossy-Reflection .image-wrap {
-Webkit-box-shadow: вставка 0 -1px 0 rgba (0,0,0, .5), вставка 0 1px 0 rgba (255,255,255, .6);
-Мозо-бокс-тень: вставка 0 -1px 0 rgba (0,0,0, .5), вставка 0 1px 0 rgba (255,255,255, .6);
Box -Shadow: вставка 0 -1PX 0 RGBA (0,0,0, .5), вставка 0 1PX 0 RGBA (255,255,255, .6);
-Вебкит-трансляция: 1 с;
-Моз-трансляция: 1 с;
Переход: 1 с;
-Вебкит-грамотный радий: 20px;
-Моз-грамотный радий: 20px;
граница-радий: 20px;
}
.glossy-Reflection .image-wrap: до {
позиция: абсолютно;
содержание: ' ';
Ширина: 100%;
высота: 50%;
Верх: 0;
слева: 0;
-Вебкит-грамотный радий: 20px;
-Моз-грамотный радий: 20px;
граница-радий: 20px;
Справочная информация: -мозо-линейно-градиент (вверху, RGBA (255,255,255,0,7) 0%, RGBA (255,255,255, .1) 100%);
Фон: -Вет-градиент (линейный, левый верх, левый дно, цветовое стоп (0%, RGBA (255,255,255,0,7)), цветовой стоп (100%, RGBA (255,255,255, .1)));
Фон: линейный градиент (вверху, RGBA (255,255,255,0,7) 0%, RGBA (255,255,255, .1) 100%);
}
.glossy-Reflection .image-wrap: после {
позиция: абсолютно;
содержание: ' ';
Ширина: 100%;
Высота: 30px;
Внизу: -31px;
слева: 0;
-Вебкит-графин-топ-левый радий: 20px;
-Вебкит-графин-вершина-правый-радиус: 20px;
-Моз-грамотр-радиус-topleft: 20px;
-Моз-грамотный-радиус-топрайт: 20px;
пограничная топ-лево-радий: 20px;
Прадис-граница-20px;
Справочная информация: -моз-линейно-градиент (вверху, RGBA (230,230,230, .3) 0%, RGBA (230,230,230,0) 100%);
Фон: -вккит-градиент (линейный, левый верх, левый нижний, цветовой стоп (0%, RGBA (230,230,230, .3)), цветовой стоп (100%, RGBA (230,230,230,0)));
Фон: линейный градиент (вверху, RGBA (230,230,230, .3) 0%, RGBA (230,230,230,0) 100%);
}
Стиль лентыВ этом примере мы используем: после достижения эффекта ленты.
CSS:
.tape .image-wrap {
-Webkit-box-shadow: вставка 0 0 2px rgba (0,0,0, 0,7), вставка 0 2px 0 rgba (255,255,255, .3), вставка 0 -1px 0 rgba (0,0,0, .5), 0 1px 3px rgba (0,0,0, .4);
-Моз-бокс-тень: вставка 0 0 2px rgba (0,0,0, 0,7), вставка 0 2px 0 rgba (255,255,255, .3), вставка 0 -1px 0 rgba (0,0,0, .5), 0 1px 3px rgba (0,0,0, .4);
Box -Shadow: вставка 0 0 2px rgba (0,0,0, 0,7), вставка 0 2px 0 rgba (255,255,255, .3), вставка 0 -1px 0 rgba (0,0,0, .5), 0 1px 3px rgba (0,0,0, .4);
}
.tape .image-wrap: после {
позиция: абсолютно;
содержание: ' ';
Ширина: 60px;
Высота: 25px;
Верх: -10px;
Слева: 50%;
Полевая левая: -30px;
Граница: твердый 1PX RGBA (137,130,48, .2);
Справочная информация: -моз-линейно-градиент (вверху, RGBA (254,243,127, 0,6) 0%, RGBA (240,224,54, 0,6) 100%);
Фон: -Ветбкит-градиент (линейный, левый верх, левый нижний, цветовой стоп (0%, RGBA (254,243,127, .6)), цветовой стоп (100%, RGBA (240,224,54, .6)));
Фон: линейный градиент (Top, RGBA (254,243,127, 0,6) 0%, RGBA (240,224,54, 0,6) 100%);
-Webkit-box-shadow: вставка 0 1px 0 rgba (255,255,255, .3), 0 1px 0 rgba (0,0,0, .2);
}
Деформация и окраскаВ этом примере мы используем: после элемента для достижения эффекта радиального градиента, когда мышь проходит.
CSS:
.morphing-tinting .image-wrap {
позиция: относительно;
-Вебкит-трансляция: 1 с;
-Моз-трансляция: 1 с;
Переход: 1 с;
-Вебкит-грамотный радий: 20px;
-Моз-грамотный радий: 20px;
граница-радий: 20px;
}
.morphing-tinting .image-wrap: Hover {
-Вебкит-грамотный радий: 30ем;
-Моз-грамотр-радиус: 30ем;
граница радий: 30ем;
}
.morphing-tinting .image-wrap: после {
позиция: абсолютно;
содержание: ' ';
Ширина: 100%;
высота: 100%;
Верх: 0;
слева: 0;
-Вебкит-трансляция: 1 с;
-Моз-трансляция: 1 с;
Переход: 1 с;
-Вебкит-грамотный радий: 30ем;
-Моз-грамотр-радиус: 30ем;
граница радий: 30ем;
}
.morphing-tinting .image-wrap: Hover: после {
Предпосылки: -Вет -градиент (радиальное, 50% 50%, 40, 50% 50%, 80, от (rgba (0,0,0,0,0)), до (rgba (0,0,0,1)));
Фон: -моз-радиальный градиент (50% 50%, Circle, RGBA (0,0,0,0) 40PX, RGBA (0,0,0,0,1) 80PX);
}
С пернатым краем вокругМы также можем использовать радиальные градиенты для генерации масок для достижения эффекта перья.
CSS:
.feather .image-wrap {
позиция: относительно;
-Вебкит-грамотный радий: 30ем;
-Моз-грамотр-радиус: 30ем;
граница радий: 30ем;
}
.feather .image-wrap: после {
позиция: абсолютно;
содержание: ' ';
Ширина: 100%;
высота: 100%;
Верх: 0;
слева: 0;
Предпосылки: -Ветбкит -градиент (радиальное, 50% 50%, 50, 50% 50%, 70, от (RGBA (255,255,255,0)), до (RGBA (255,255,255,1)));
Фон: -моз-радиальный градиент (50% 50%, Circle, RGBA (255,255,255,0) 50px, RGBA (255,255,255,1) 70px);
}
Совместимость браузераЭта реализация хорошо работает в большинстве браузеров, которые поддерживают границу-радиус, бокс-тени: до и: после функций (таких как Chrome, Firefox и Safari). В браузерах, которые не поддерживают новые функции, будет отображаться только исходное изображение.
Создайте свою собственную реализацию
С помощью: до и: после псевдоклассов вы можете создать много стилей для изображений, и вы можете попытаться создать новые эффекты самостоятельно.