Возможно ли сделать свечение / тень с использованием частичной прозрачности в HTML / CSS?

Question

Ну, я думаю, это вопрос из двух частей.

Во-первых, как я могу сделать изображение частично прозрачным (я думаю, что вы можете сделать это с PNG, но не знаете как - у меня есть фотошоп, просто нужны инструкции?)

Во-вторых, как мне использовать это изображение в макете с помощью CSS? Я думаю, что мне нужен какой-то "PNG Hack"

Answer 1

1. Создание нового документа для фотошопа
2. Добавить новые слои и рисовать на них
3. Удалить слой с именем Фон
4. Файл> Сохранить для Web
5. Выберите 24-битный формат PNG.

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

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="my_trans_image.png", sizingMethod="crop");

И в вашей стандартной таблице стилей используйте его как любое другое изображение:

background-image: url(/path/to/my_trans_image.png);

Загрузите таблицу стилей с конкретными правилами IE6, например:

<!--[if lt IE 7]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" charset="utf-8" />
<![endif]-->

Это будет загружаться только в IE, и если версия меньше 7.

Последнее замечание: IE6 быстро исчезает. Если вам не нужно поддерживать IE6, тогда установка PNG в качестве фонового изображения в простом старом CSS будет работать во всех современных браузерах без особых проблем.

Answer 2

Типичное исправление IE PNG фактически приводит к сбою IE при определенных условиях. Если пользователь не настроил параметр реестра. Если вы не хотите, чтобы некоторые из ваших пользователей IE6 явно скрывали свои предпочтения, попробуйте вместо этого использовать VML для прозрачных изображений PNG. Raphael.js lib - хороший способ для достижения этой цели.

Answer 3

Чтобы ответить на ваш второй вопрос: если вы не возражаете против использования небольшого JavaScript, вы можете использовать png fix файл JavaScript, чтобы автоматически применить IE-специфический фильтр к вашим изображениям.

Answer 4

Простой вариант, который, вероятно, не будет работать для вас:

Браузеры Webkit (Safari, Chrome) могут использовать свойство -webkit-box-shadow CSS3. Firefox и IE (конечно) пока не поддерживают это (или имеют эквивалент для конкретного поставщика).

Другие варианты, которые у вас остались, многочисленны и широко освещаются в Интернете (поскольку каждый мужчина и его собака хотят использовать тени)

http://www.google.com/search?q=how+to+make+a+drop+shadow

Еще одна вещь, которую я хотел бы добавить: прежде чем вы начнете баловаться с прозрачными взломами PNG, вы должны подумать, сколько ваших пользователей все еще используют IE6, и насколько важно для вас сделать свой сайт красивым для тех, кто не обновляется за 8 лет.

Answer 5

Убедитесь, что ваше свечение / тень использует режим наложения «Нормальный». Другие режимы наложения, такие как «Умножение» или «Экран», действительно великолепны в Photoshop, но в Интернете выглядят не так, как ожидалось.

Если вам нужна поддержка IE6, вам понадобится какое-то исправление PNG. В этом посте перечислено несколько: Есть ли исправление JavaScript PNG для IE6, позволяющее позиционировать CSS-фон?

Мой личный фаворит: http://www.dillerdesign.com/experiment/DD_belatedPNG/

Answer 6

Ну, это идея - вам нужно создавать прозрачные PNG. Я обычно использую Paint.NET для такого рода вещей, но если вам удобнее пользоваться Photoshop, продолжайте. Все, что вам нужно, это иметь прозрачный фон на вашем изображении, а затем нанести на него несколько полупрозрачных темных пикселей, которые станут тенью.

Вы можете использовать изображения с CSS с помощью свойства background-image. То есть:

#myDiv
{
    background-image: url('myimage.png');
}

IE6 не поддерживает прозрачность PNG из коробки - Google для IE6 PNG взломать или просто поискать на этом сайте. Кроме того, имейте в виду, что , хотя IE7 поддерживает прозрачность PNG, он ужасно медленный , поэтому он практически неприменим для расширенных эффектов, таких как тени. Возможно, вы захотите иметь более простой резервный стиль для Internet Explorer.