Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Уроки CSS arrow Уроки web-программирования. CSS (HTML): Фильтры. Alpha.
18.04.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
Уроки web-программирования. CSS (HTML): Фильтры. Alpha. Печать E-mail
Автор megabax   
10.07.2011 г.
Урок 13. Управление шрифтами в CSS New Page 1

Уроки web-программирования. CSS (HTML): Фильтры. Alpha.

Все статьи по CSS.

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

Вот как выглядит первая картинка:

Уроки web-программирования. CSS (HTML): Фильтры. Alpha.

А вот так вторая:

Уроки web-программирования. CSS (HTML): Фильтры. Alpha.

Для начала мы попробуем наложить одну картинку на другую при помощи фильтра прозрачности Alpha:

<html>

    <HEAD>

        <STYLE TYPE="text/css">

            <!--

                .cl1 {

                    filter:alpha(opacity=0, finishopacity=100, style=1,startX=10, startY=10, finishX=100, finishY=100))

                }

                div {

                    position:absolute;

                }

            -->

        </STYLE>

    </HEAD>

    <BODY>

        <div>

            <img src="2.jpg">

        </div>

        <div>

            <img src="1.jpg" class="cl1">

        </div>

    </BODY>

</html>

 

В результате открытия такой файла в браузере вы увидите вот эту картинку:

Уроки web-программирования. CSS (HTML): Фильтры. Alpha.

Иными словами, у нас картинки наложились друг на друга. Каким образом мы этого достигли? Во первых, сделали позиционирование блоков div абсолютным:

                div {

                    position:absolute;

                }

 

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

Теперь немного подробнее о самом фильтра Alpha. Начнем с параметра opacity. Это начальный уровень прозрачности. finishpacity - конечный уровень прозрачности. Тоесть мы можем сделать картинку частично прозрачной, при чем прозрачность заполнит картинку градиентно, начиная с opacity и кончая finishpacity. Сделаем, например, opacity=30 и вот что мы увидим:

Уроки web-программирования. CSS (HTML): Фильтры. Alpha.

Следующий параметр style. Он определяет стиль заполнения градиента прозрачности. 0 - uniform, 1 - liner, 2- radial, 3 - rectangular. Вот как, например, выглядит радиальный градиент:

Уроки web-программирования. CSS (HTML): Фильтры. Alpha.

Параметры startX, startY, finishX, finishY определяют начальные и конечные координаты для градиентного совмещения картинок методом liner (style=1).  Поставим, например, startX=70,  startY=70 и вот что увидим:

 

Уроки web-программирования. CSS (HTML): Фильтры. Alpha.

Мы можем сделать и по другому, открыть часть картинки горизонтально, например, вот так будет выглядеть картинка при startX=0, startY=20, finishX=0, finishY=100:

Уроки web-программирования. CSS (HTML): Фильтры. Alpha.

Все статьи по CSS.

 

Последнее обновление ( 10.07.2011 г. )
 
« След.   Пред. »
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги