CSS3 vs. Photoshop: закругленные углы и тени блока.

Хорошо смотрящаяся и правильно спроектированная навигационная панель с зари веб-дизайна была одним из самых мощных элементов организации и структуризации веб-сайта. В прошлом создание красивого проекта с применением теней, градиентов, закругленных углов и эффекта при проведении мышью над элементом требовалось множество приемов, увеличивавших размер кода и количество изображений.
В этом учебнике мы углубимся в два очень важных эффекта CSS3: Закругленные углы и Тени блока, к тому же применим линейные градиенты.
Шаг 1: Закругленные углы

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

Создание эффекта закругленных углов довольно просто в любом графическом софте, но в Photoshop’е возникают некоторые трудности:

Точность: даже если вы можете установить радиус закругленного угла, встроенный движок устранения контурных неровностей Photoshop’а часто добавляет к графике один или два лишних пикселя. Многим из нас в прошлом приходилось вручную снижать количество пикселей закругленных углов на неточном изображении, для того, чтобы создать аккуратное соединение с, например, цветами фона.


Редактирование: это одна из самых больших проблем создания закругленного угла на основе изображения. Если вы создаете в Photoshop’е графику для угла радиусом в 10px, и по какой-то причине вам нужно увеличить радиус до 20px, сделать это можно, только перечертив фигуру, или вручную отредактировав все ее углы, теряя при этом время и точность. Изменение размера – еще одна огромная проблема, если вам нужно растянуть или увеличить фигуру, вам приходится применять инструмент Photoshop’а Выделение точки (Point Selection), потому что употребление Сетки трансформации (Transform Controls) может вызвать нежелательные искажения формы угла. Я даже не буду упоминать о том, что разделение углов на слои занимает приличное количество ценных минут.


Заливки и Рамки: создание заливки градиента внутри основанного на изображении блока закругленного угла всегда было непростой задачей даже без перекрывания границ – чтобы разделить на слои вовлеченные изображения, требуется хирургическая точность. Вам нужно создать по меньшей мере 3 изображения для каждого блока, одно для верхних углов, другое для нижних и горизонтальный или вертикальный градиент, а затем написать для них код. Другой проблемой заливки изображения является то, что контейнеру часто требуется увеличить высоту или ширину, получая при этом нежелательный эффект градиента (смотрите скриншот внизу).


Стили смешанных углов: в Photoshop’е создании стилей смешанных углов занимает время, в нем отсутствуют опции комбинирования стилей углов. Вам приходится вручную уменьшать/увеличивать радиус или комбинировать формы… а затем каждый угол разделять на слои.