Создаём закругленные углы в CSS и Photoshop

css3

От автора: в этом учебнике мы покажем, как создать красивую простую навигационную панель, использовав несколько скомбинированных стилей CSS3. Наша цель – повторить внешний вид того, что в прошлом могло быть сделано только путем комбинирования нескольких изображений, JavaScript’а и нескольких div’ов. В общем создадим закругленные углы в CSS. Давайте начнем…

Примечание: все последующие примеры тестировались на Mozilla Firefox, Safari и Chrome.

css3

Детали учебника

Программа: Любой редактор исходного кода (Dreamweaver, Photoshop)

Версия: CS5 (можно любая)

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Сложность: Базовый уровень

Примерное время выполнения: 1 час

скачать исходникидемо

До начала

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

Шаг 1: Закругленные углы в Photoshop

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

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

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

Закругленные углы

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

Закругленные углы

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

Заливки и Рамки

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

Стили смешанных углов

Закругленные углы в CSS

Применение CSS3 для создания классических закругленных углов, основанных на изображении – отличная идея. Вот пара аргументов «за»:

Снижается количество изображений и HTTP-запросов к серверу

Работает на всех современных браузерах (кроме IE 6,7,8), включая большинство популярных мобильных браузеров.

Чтобы заставить их работать, требуется всего пара строк в файле CSS

Увеличение/уменьшение радиуса, изменение размера, изменение заливки и границ занимают секунды, а в Photoshop’е – несколько минут

Давайте рассмотрим код для создания закругленных углов в CSS:

Просмотреть Демо

Шаг 2: Тени блока

Один из самых красивых эффектов, которые можно получить при помощи Photoshop’а – это отбрасываемые тени (Drop Shadow) и внутренние тени (Inner Shadow). При их правильном применении в результате получаются выдающиеся 3D-эффекты. Конечно, использовав отбрасываемую или внутреннюю тень неправильно, можно быстро добиться убогого вида.

Ниже вы найдете пару хороших примеров:

Тени блока

Сегодня в CSS3

CSS3 дает возможность создавать тени всего лишь при помощи пары строк кода, «дежурный» стиль — "box-shadow".

Для создания похожей на созданную в Photoshop’е Отбрасываемой тени (Drop Shadow) можно применить следующий синтаксис:

Для создания похожей на созданную в Photoshop’е Внутренней тени (Inner Shadow) можно применить следующий синтаксис:

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

А вот код для создания нескольких вариантов тени блока (Box Shadow):

Просмотреть Демо

Шаг 3: Навигационное меню

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

навигационное меню

Самое забавное при этом – попробовать получить тот же результат с помощью CSS3!

Сначала макет HTML (да, я применяю тэг "nav" из HTML5, потому что он хорош и отлично подходит семантически – но вы вместо него можете взять div).

Шаг 4: CSS

Теперь перейдем к CSS. Сначала установим расположение и высоту.

Теперь добавим заливки градиента (Gradient Fill):

Далее закругленные углы (Rounded Corners):

И наконец, тени блока (Box Shadows):

Просмотреть Демо

Шаг 5: устраняем «вытекание»

Финальное примечание по поводу закругленных углов с заливкой и границей: они выходят за край («вытекают»). Вы заметите это при проведении мышью над кнопками навигации:

вытекание

Этого можно достичь, применив свойство background-clip, которое определяет, распространяется ли фон данного элемента на края. По умолчанию (border-box) позволяет распространяться, что дает нам беспорядочное «вытекание», но его можно заменить на padding-box, который останавливает распространение, не достигнув краев.

Давайте добавим к свой кнопке следующие стили css:

…которые дают нам более желательный результат при проведении над ней мышью:

вытекание

Цвет заливки аккуратно располагается внутри границ нашего элемента.

Заключение

Создание красивой и хорошо смотрящейся простой панели навигации при помощи CSS3 легче и быстрее, чем когда-либо, так почему бы не попробовать ее в своем следующем проекте?

На этом урок по созданию закругленных углов в CSS и Фотошоп, для меню сайта, окончен. Спасибо за прочтение!

Автор: Alvaro Guzman

Источник: http://webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Учебник по основам CSS для начинающих

Прямо сейчас изучи CSS с нуля!

Смотреть курс

Метки: , , ,

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

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (16)

  1. igor

    Ну а как же всеми любимый IE ?

  2. Эдуард

    css3 cтановится понятнее!
    Спасибо за статью!
    Требуем продолжения …

  3. Игорь

    А мне понравилось! Красиво.

  4. Андрей

    Супер. Сколько я не боролся с углами, не получалось. Поэтому оставил только изменение цвета auto-school.by/. Начну делать по вашему примеру, потом расскажу.

  5. Леонид

    Урок хороший!
    еще бы IE это понимал правильно, особенно с тенью!!! -)))

  6. Anatoliy

    Да, отличная статья!
    Просто и понятно!

  7. Андрей

    Спасибо большое за статью. Однозначно в закладки.

  8. Александр

    Спасибо за статью!добавил в закладки

  9. Сергей

    Спасибо за интересный урок.

  10. Artem

    статья хороша, но кроме IE не работает еще и в Opera

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree