Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Фоновые изображения css3

Фоновые изображения css3

В главе б мы узнали несколько новых способов украшения наших страниц (таких как тени и скругленные углы), не требующих внесения изменений в разметку.

Еще одна часто встречающаяся задача, обычно решаемая при помощи растровых изображений, — создание градиента. CSS3 дает нам возможность создавать радиальные и линейные градиенты без растровых изображений, а также задавать множественные фоновые изображения для любых элементов. С появлением CSS3 вы можете забыть о JPEG-ax, которыми пользовались для этой цели в течение стольких лет, и о любых несемантических вставках в разметке.

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

Давайте пристальнее взглянем на градиенты CSS3 и градиенты вообще. Градиентами называют плавные переходы между двумя или несколькими цветами. При создании градиентов вы можете указать несколько ключевых точек, каждой из которых соответствует определенный цвет и позиция. Браузер сам создает плавный переход от одного цвета к другому. Градиенты могут применяться везде, где возможны фоновые изображения. Это значит, что в ваших таблицах CSS градиент можно поставить везде, где теоретически мог бы быть url () — в свойстве background-image, border-image и даже list-style-type, хотя на сегодняшний день лучше всего со стороны браузеров поддерживаются фоновые изображения.

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

В CSS доступны два вида градиентов — линейный и радиальный. Давайте подробнее с ними познакомимся.


Читайте так же:
Not found

Нам доверяют

Интернет магазин