Категории раздела
Статьи по html [7]
Статьи по php [8]
Раскрутка сайта [9]
Базы данных [3]
Поисковые системы [6]
Статьи по css [9]
Мини-чат
Наш опрос
Общая оценка сайта
Всего ответов: 34
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Четверг, 28.03.2024, 20:46
Приветствую Вас Гость
Поиск
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Мой сайт
    Главная » Статьи » Статьи по css

    Прозрачность в CSS
    Рассмотрим сначала всевозможные эффекты прозрачности, которые будут видны только пользователям Internet Explorer.
    К примеру, есть у вас некая картинка, которая содержится в вашей html странице. Данная картинка без участия каких-либо графических пакетов, может быть видоизменена используя эффект прозрачности. Internet Explorer обладает самыми широкими возможностями в этой области. Рассмотрим все возможные примеры.


    Для началa pазберёмся, как правильно внедрить код css в html страницу, чтобы можно было наблюдать требуемый эффект. Если вы хотите применить эффект к некоторым определённым картинкам (на самом деле можно сделать прозрачными не только картинки, но и фон), то лучше всего внедрить стиль в тэг картинки.

    <img border="0" src="src/logo.png" width="100" height="97" style="filter:alpha(opacity=30);" />

    opacity – это и есть тот самый параметр который создаёт эффект прозрачности.
    В приведённом примере, который справедлив лишь для IE, opacity может принимать значения от 0 до 100. Если значение близко к нулю, то картинка максимально прозрачна, и наоборот при увеличение значения данного параметра картинка приобретает исходный вид.

    IE
    Итак для создания эффекта прозрачности в IE вы можете использовать следующие css коды:

    filter:alpha(opacity=30);
    /* синтаксис IE4.0*/
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    /* синтаксис IE5.5+ (является предпочтительным) */

    Более того при использовании IE можно получить красивые эффекты градиентного осветления. (в других браузерах не работает).

    filter:alpha(opacity=80, style=0);
    filter:alpha(opacity=80, style=1);
    filter:alpha(opacity=80, style=2);
    filter:alpha(opacity=80, style=3);

    В зависимости от параметра style можно добиться различных градиентных осветлений.

    Рассмотрим возможность осветления рисунка слева на право.

    filter: alpha(startx=0, style=1);
    filter: alpha(startx=20, style=1);
    filter: alpha(startx=60, style=1);
    filter: alpha(startx=100, style=1);

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

    Возможен ещё один способ осветления, но с более резкими границами.

    filter: alpha(finishx=0, style=1);
    filter: alpha(finishx=20, style=1);
    filter: alpha(finishx=60, style=1);
    filter: alpha(finishx=100, style=1);


    Как можно видеть границы настолько резкие, что часть картинки при этом не видно и вовсе.

    И наконец, пример правостороннего освещения.

    filter: alpha(opacity=0, finishopacity=10, style=1);
    filter: alpha(opacity=0, finishopacity=20, style=1);
    filter: alpha(opacity=0, finishopacity=60, style=1);
    filter: alpha(opacity=0, finishopacity=100, style=1);

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

    Opera
    Данный браузер к сожалению не поддерживает того же обилия, как IE, но кое что он всё таки может. Эффект прозрачности вы так же можете получить но при этом придётся использовать уже другой код css.

    opacity: 0.5;

    Данный код так же сойдёт и для Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9.
    В зависимости от значения opacity (min=0, max=1) можно наблюдать различную степень осветлённости. Если значение близко к нулю, то картинка максимально прозрачна, и, наоборот, при увеличение значения данного параметра картинка приобретает исходный вид.

    Konqueror 3.1, Safari 1.1

    Получение эффекта прозрачности в этих браузерах можно следующим путём.

    -khtml-opacity: 0.5;

    В зависимости от значения opacity (min=0, max=1) можно наблюдать различную степень осветлённости. Если значение близко к нулю, то картинка максимально прозрачна, и, наоборот, при увеличение значения данного параметра картинка приобретает исходный вид.

    Mozilla
    Как и opera, мозилла не слишком богата на эффекты. Получить прозрачность мы можем следующим образом.

    -moz-opacity: 0.5;

    В зависимости от значения -moz-opacity: (min=0, max=1) можно наблюдать различную степень осветлённости. Если значение близко к нулю, то картинка максимально прозрачна, и, наоборот, при увеличение значения данного параметра картинка приобретает исходный вид.

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

    style=
    "filter:alpha(opacity=50); /* IE 5.5+*/
    -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
    -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
    opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */ "

    Тем самым вы осуществите эффект прозрачности картинки на половину.
    Категория: Статьи по css | Добавил: stazis (15.05.2009)
    Просмотров: 1776 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Copyright MyCorp © 2024

    Сделать бесплатный сайт с uCoz