ru af en-us pl be tr

Категория CSS  

Графические эффекты без графики CSS3


2012-11-07 12:13:33

Графические эффекты без графики CSS3

 

 

Используя возможности CSS3, живописные облачка с текстом можно создавать, 

не добавляя на страницу ни единого изображения. Отсутствие графики дает сразу 

несколько преимуществ, помимо восторженного отношения со стороны коллег-

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

графики, а затем на переделку всего уже созданного из-за неизбежных требований 

клиента внести то или иное небольшое изменение. А посетители вашего сайта на-

слаждаются быстрой загрузкой страницы, которая возможна благодаря уменьшению 

объема данных и количества HTTP-запросов к серверу.

Скругление углов

Эти четко очерченные прямоугольные поля для комментариев совсем не похожи 

на облачка, ведь так? Давайте для начала скруглим углы, чтобы придать им более 

мягкую, обтекаемую форму.

Скругленные углы — это простой и распространенный визуальный эффект, который 

раньше на удивление сложно было реализовывать на веб-страницах. Приходилось 

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

приложениях, но и подолгу просиживать над добавлением кода HTML и CSS. Для 

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

букет вложенных блоков div, ведь спецификация CSS 2.1 допускала наличие у поля 

не более одного фонового изображения. Таким образом, код CSS, относящийся 

к размещению изображений, мог стать очень и очень сложным. Изображения, в до-

полнение к чрезмерно раздутому коду HTML и CSS, изрядно увеличивали объем 

данных, которые приходилось загружать каждому пользователю, и это снижало ско-

рость загрузки страниц. Даже если вы применяли сценарии динамического создания 

скругленных углов, не создавая и не встраивая изображения вручную, все равно вы 

своими руками увеличивали число файлов для загрузки пользователями и умень-

шали производительность страниц. И все это ради банальных скругленных углов!




Похожие статьи

 Работа с браузерами, не поддерживающими функциональность CSS3
 Поддержка браузерами CSS3
 Блочные и строковые элементы CSS
 Распознавание поддержки CSS3 с помощью Modernizr
 


Сайт является частным собранием материалов и представляет собой любительский информационно-образовательный ресурс. Вся информация получена из открытых источников. Администрация не претендует на авторство использованных материалов. Все права принадлежат их правообладателям