Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Web » Создание кнопки: от стилей слоя Фотошоп к CSS

Создание кнопки: от стилей слоя Фотошоп к CSS

Автор: sondar | Категория: Уроки Photoshop » Web | 15-01-2013, 08:43
Вот и наступил 2013 год! В дизайнерском сообществе было очень много шумных обсуждений на тему оформительских решений в канун праздника. Многие из нас каждый день оказывались перед проблемой выбора верной концепции дизайна, которая была бы актуальна и не выглядела устаревшей хотя бы несколько дней.

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

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

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

Создание кнопки: от стилей слоя Фотошоп к CSS


Шаг 1
На этом уроке мы начнем с кнопки, созданной в фотошопе. Создать начальный дизайн в каком-либо графическом редакторе, а затем конвертировать его в CSS – наиболее легкий способ.

Мы используем кнопку Call to Action Buttons & Styles 1.

Ниже вы можете увидеть завершенный дизайн кнопки, созданной в фотошопе.

Создание кнопки: от стилей слоя Фотошоп к CSS


Шаг 2
Для упрощения процесса, мы начнем с пустого.HTML-файла, поместив в него и код кнопки и стили CSS.

Создайте чистый документ в вашем текстовом редакторе.

Для создания нашей кнопки мы воспользуемся обычной ссылкой и назовем ее класс “ yellowbutton”.

<a href="#" class="yellowbutton">Click Here</a>


Без каких-либо стилей слоя наша кнопка выглядит просто как плоская старая ссылка. Вот здесь и начинается самое веселье!

Создание кнопки: от стилей слоя Фотошоп к CSS


Шаг 3
В первой части нашего кода мы зададим все основные стили кнопки. А всеми дополнительными эффектами, типа градиентов и теней, мы займемся позже. Таким образом, наша кнопка будет иметь достаточно простые, базовые стили на тот случай, если браузер пользователя не поддерживает более сложный CSS-код.

Для обозначения нашей ссылки мы используем a.yellowbutton. это сообщит браузеру, что мы стилизуем все ссылки с именем класса "yellowbutton".

<style>
a.yellowbutton {



    /* Set the button background color to solid yellow */
    background: #ffea00;


    /* Set the text color to solid black */
    color: #000;


    /* Set the top and bottom padding to 20px, and the left and right padding to 30px */
    padding: 20px 30px;


    /* Set the font size to 28px */
    font-size: 28px;


    /* Match the line height to the font size */
    line-height: 28px;


    /* Make the button text bold */
    font-weight: bold;


    /* Removes the default underline of the link text */
    text-decoration: none;
}
</style>


Создание кнопки: от стилей слоя Фотошоп к CSS


Шаг 4
Теперь, когда у нас есть основа нашей кнопки, давайте украсим ее, чтобы наш сайт не выглядел так, как будто создан в 1998 году.

Первое, что нам предстоит сделать, это - придать тексту кнопки эффект тиснения на поверхности самой кнопки.

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

Смотрите комментарии, следующие за строкой “text-shadow”, чтобы понять для чего нужны эти значения в CSS.

<style>
a.yellowbutton {

    /* Set the button background color to solid yellow */
    background: #ffea00;


    /* Set the text color to solid black */
    color: #000;


    /* Set the top and bottom padding to 20px, and the left and right padding to 30px */
    padding: 20px 30px;


    /* Set the font size to 28px */
    font-size: 28px;


    /* Match the line height to the font size */
    line-height: 28px;


    /* Make the button text bold */
    font-weight: bold;


    /* Removes the default underline of the link text */
    text-decoration: none;


    /* 1px right, 1px down, 0px blur, white color at 60% opacity */
    text-shadow: 1px 1px 0px rgba(255,255,255,0.6);
}
</style>


Создание кнопки: от стилей слоя Фотошоп к CSS


Шаг 5
Благодаря добавлению нашему тексту даже незначительных деталей, кнопка начинает обретать большую глубину. Далее мы продолжим работу по совершенствованию самой кнопки.

Для начала закруглим ее углы. Различные браузеры по-разному интерпретируют CSS-код, но вы можете создать кросс-браузерную кнопку, корректно отображаемую всеми браузерами.

<style>
a.yellowbutton {

    /* Set the button background color to solid yellow */
    background: #ffea00;


    /* Set the text color to solid black */
    color: #000;


    /* Set the top and bottom padding to 20px, and the left and right padding to 30px */
    padding: 20px 30px;


    /* Set the font size to 28px */
    font-size: 28px;


    /* Match the line height to the font size */
    line-height: 28px;


    /* Make the button text bold */
    font-weight: bold;


    /* Removes the default underline of the link text */
    text-decoration: none;


    /* 1px right, 1px down, 0px blur, white color at 60% opacity */
    text-shadow: 1px 1px 0px rgba(255,255,255,0.6);


    /* Sets the rounded corners to 10px for all browsers */
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
</style>


Создание кнопки: от стилей слоя Фотошоп к CSS


Это совсем не сложно!

Шаг 6
Теперь, для тех браузеров, которые поддерживают градиенты в CSS-коде, наложим градиент на наш однотонный желтый фон.

Не пожалейте своего времени на внимательное прочтение следующего года, и постарайтесь понять для чего нужен каждый из параметров. Если возникнут вопросы, или необходимость дополнительных разъяснений, можете задавать их в комментариях.

<style>
a.yellowbutton {



    /* Set the button background color to solid yellow */
    background: #ffea00;


    /* Set the text color to solid black */
    color: #000;


    /* Set the top and bottom padding to 20px, and the left and right padding to 30px */
    padding: 20px 30px;


    /* Set the font size to 28px */
    font-size: 28px;


    /* Match the line height to the font size */
    line-height: 28px;


    /* Make the button text bold */
    font-weight: bold;


    /* Removes the default underline of the link text */
    text-decoration: none;


    /* 1px right, 1px down, 0px blur, white color at 60% opacity */
    text-shadow: 1px 1px 0px rgba(255,255,255,0.6);


    /* Sets the rounded corners to 10px for all browsers */
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;


    /* Specify the gradient to start at the top, use yellow at the start point, fade to darker yellow 85% way down, finish the gradient with an in-between yellow */
    background: -moz-linear-gradient(top,#ffea00 0%,#ffd000 85%,#ffd900);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffea00),color-stop(0.85, #ffd000),to(#ffd900));
}
</style>


Создание кнопки: от стилей слоя Фотошоп к CSS


Шаг 7
Здесь нам предстоит применить еще две функции, которые используют одинаковое свойство - "box-shadow". Наложим свет на верхнюю и левую грань, используя полупрозрачность (semi-transparent), белое внутреннее свечение (inner glow), и применим к нашей кнопке тень (drop shadow).

<style>
a.yellowbutton {

    /* Set the button background color to solid yellow */
    background: #ffea00;


    /* Set the text color to solid black */
    color: #000;


    /* Set the top and bottom padding to 20px, and the left and right padding to 30px */
    padding: 20px 30px;


    /* Set the font size to 28px */
    font-size: 28px;


    /* Match the line height to the font size */
    line-height: 28px;


    /* Make the button text bold */
    font-weight: bold;


    /* Removes the default underline of the link text */
    text-decoration: none;


    /* 1px right, 1px down, 0px blur, white color at 60% opacity */
    text-shadow: 1px 1px 0px rgba(255,255,255,0.6);


    /* Sets the rounded corners to 10px for all browsers */
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;


    /* Specify the gradient to start at the top, use yellow at the start point, fade to darker yellow 85% way down, finish the gradient with an in-between yellow */
    background: -moz-linear-gradient(top,#ffea00 0%,#ffd000 85%,#ffd900);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffea00),color-stop(0.85, #ffd000),to(#ffd900));


    /* The first line creates a drop shadow right 3px, down 3px, with a 7px blur, black color at 50% opacity */
    /* The second line creates an inner shadow right 1px, down 1px, with a 0px blur, white color at 70% opacity */
    box-shadow:
        3px 3px 7px rgba(0,0,0,0.5),
        inset 1px 1px 0px rgba(255,255,255,0.7);
    -moz-box-shadow:
        3px 3px 7px rgba(0,0,0,0.5),
        inset 1px 1px 0px rgba(255,255,255,0.7);
    -webkit-box-shadow:
        3px 3px 7px rgba(0,0,0,0.5),
        inset 1px 1px 0px rgba(255,255,255,0.7);
}
</style>


Создание кнопки: от стилей слоя Фотошоп к CSS


Шаг 8
У нас получилась прекрасная желтая кнопка! В продолжение работы над ней, давайте научим ее реагировать на наведение курсора. Для этого мы воспользуемся добавим год a.yellowbutton:hover, чтобы выбрать любую ссылку с классом “ yellowbutton ”, но только в тот момент, когда на кнопку наведен указатель мыши.

Приведенный ниже код преобразует оригинальные цвета наложенного нами градиента. Все что нам нужно сделать, это скопировать свойства градиента из раздела a.yellowbutton и преобразовать начальный и конечный цвета, а та же изменить положение градиента на наш промежуточный цвет.

Здесь я привожу только код для наведения курсора, так, чтобы вы могли точно определить, что было добавлено.

<style>
a.yellowbutton:hover {

    /* See how the gradient start/end colors are switched, and the middle color is now 15% down from the top, rather than 85% down */
    background: -moz-linear-gradient(top,#ffd900 0%,#ffd000 15%,#ffea00);


    /* Same changes for Webkit based browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffd900),color-stop(0.15, #ffd000),to(#ffea00));
}
</style>


Создание кнопки: от стилей слоя Фотошоп к CSS


Законченный результат
Объедините код и удалите комментарии. Ваша симпатичная кнопка готова!

<a href="#" class="yellowbutton">Click Here</a>

<style>
a.yellowbutton {
    background: #ffea00;
    color: #000;
    padding: 20px 30px;
    font-size: 28px;
    line-height: 28px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.6);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: -moz-linear-gradient(top,#ffea00 0%,#ffd000 85%,#ffd900);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffea00),color-stop(0.85, #ffd000),to(#ffd900));
    box-shadow:
        3px 3px 7px rgba(0,0,0,0.5),
        inset 1px 1px 0px rgba(255,255,255,0.7);
    -moz-box-shadow:
        3px 3px 7px rgba(0,0,0,0.5),
        inset 1px 1px 0px rgba(255,255,255,0.7);
    -webkit-box-shadow:
        3px 3px 7px rgba(0,0,0,0.5),
        inset 1px 1px 0px rgba(255,255,255,0.7);
}
a.yellowbutton:hover{
    background: -moz-linear-gradient(top,#ffd900 0%,#ffd000 15%,#ffea00);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffd900),color-stop(0.15, #ffd000),to(#ffea00));
}
</style>


Создание кнопки: от стилей слоя Фотошоп к CSS


Автоматизация процесса
Как хорошо, что есть инструменты, которые помогают автоматизировать процессы, выполняемые обычно вручную. Например, кодирование кнопок в CSS.

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

Ниже представлен список автоматических инструментов, которые способны ускорить ваш процесс.

CSS Hat – это наиболее удобный инструмент для преобразования стилей слоя в код CSS.

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

Photoshop CS 6.1 – Обновление фотошопа, со встроенной функцией “ Copy to CSS ”. Далеко не идеально, но можно считать его шагом в верном направлении.


 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Другие новости по теме:


Просмотров: 7510 | Напечатать | Комментарии (0)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Легкое тонирование при помощи режимов наложения
Легкое тонирование при помощи режимов наложения


Хотите поближе познакомиться с магией тонирования? Методов и техник тонирования существует великое множество, но сегодня я познакомлю вас с такой техникой, которая, за счет использования режимов наложения слоев, максимально упрощает весь процесс.

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Мы в соц сетях

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.