Вы когда-нибудь задавались вопросом, как определенный эффект был достигнут в веб-дизайне, и, после увеличения в несколько кликов, вы обнаружили, что автор добавил несколько тонких теней, границ, градиентов и т. Д.? В прошлом это было достигнуто просто путем вырезания изображения и установки его в качестве фона какого-либо элемента. К счастью, с помощью CSS3 мы можем получить гораздо больше гибкости. Теперь, хотя код для такого простого эффекта может быть немного утомительным, он того стоит, и об этом мы рассмотрим в сегодняшнем письменном и видео-кратком совете!
Видео версия
Скорее смотреть этот скринкаст на Screenr.com ?
Текстовая версия
Удивительно, что что-то такое простое требует такого большого количества кода, но оно не слишком грубое и может быть легко абстрагировано от фрагмента для будущего использования.
Шаг 1. Создайте разметку
Чтобы сделать наш проект как можно более вырезанным и вставленным, мы работаем только с пустым div. Создайте новый файл index.html и вставьте следующее:
|
1
2
3
4
5
|
<body>
<div id=»box»>
</div>
</body>
|
Шаг 2. Создайте холст
Далее мы добавим некоторые базовые стили для элемента body. Это только для презентации, и может быть легко удалено. В тегах стиля в вашем заголовке добавьте:
|
1
2
3
4
5
6
|
/* Nothing special here.
body {
width: 500px;
margin: 60px auto 0;
background: #666;
}
|
Шаг 3. Стилизация коробки
Теперь мы создадим нашу коробку с шириной и высотой.
|
1
2
3
4
5
|
#box {
/* Just a box */
width: 500px;
height: 500px;
}
|
Шаг 4. Закругленные углы
Мы все должны знать о закругленных углах CSS к настоящему времени. Давайте идти вперед и реализовать это.
|
1
2
3
4
|
/* Rounded corners */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
|
Обратите внимание, что мы также предоставляем окончательную спецификацию «border-radius» в дополнение к версиям Mozilla и Webkit.
Шаг 5. Границы цветов
Mozilla предлагает удобное свойство, называемое «-moz-border — * — colors». Это позволяет нам устанавливать бесконечное количество цветов для рамки. Чтобы получить тонкий эффект «двойной границы», давайте реализуем это свойство.
|
1
2
3
4
5
6
7
8
|
/* Set a base border and color */
border: 2px solid white;
/* Multiple border colors in Gecko */
-moz-border-top-colors: #292929 white;
-moz-border-right-colors: #292929 white;
-moz-border-bottom-colors: #292929 white;
-moz-border-left-colors: #292929 white;
|
Обратите внимание, что количество цветов, которые мы предоставляем, равно ширине границы, которую мы установили в начале (2 пикселя). Кроме того, не ставьте запятые после каждого шестнадцатеричного значения; Я сделал эту ошибку сначала!
Шаг 6. Компенсация за Webkit
Насколько я знаю, webkit в настоящее время не поддерживает цвета границ, хотя, возможно, я ошибаюсь. Если я, пожалуйста, оставьте комментарий и дайте мне знать! В любом случае, чтобы имитировать этот эффект как можно лучше в Safari и Chrome, мы будем использовать box-shadow.
|
1
2
|
/* Compensate for Webkit.
-webkit-box-shadow: 0 -1px 2px #292929;
|
Обратите внимание, что предоставленные значения относятся к смещению X, смещению Y, размытию и цвету тени соответственно. Передав -1px в качестве смещения Y, мы можем сдвинуть тень вверх.
Шаг 7. Фоновые градиенты CSS
Последний шаг — добавить тонкий градиент фона для нашего блока. Тем не менее, мы должны быть уверены, что обеспечим резервный сплошной цвет для браузеров, которые не поддерживают CSS-градиенты.
|
1
2
3
4
|
/* Background subtle gradient, with fallback to solid color */
background: #e3e3e3;
background: -moz-linear-gradient(top, #a4a4a4, #e3e3e3);
background: -webkit-gradient(linear, left top, left bottom, from(#a4a4a4), to(#e3e3e3));
|
К сожалению, Mozilla и Webkit не совсем согласны с синтаксисом градиентов, что делает процесс еще более раздражающим. Если это слишком запутанно, вы можете использовать новый сервис под названием CSS3 Please автоматически генерировать синтаксис каждого браузера; это очень круто!
Вы сделали!
Это удивительно; глядя на наше окончательное изображение, трудно сказать, что мы на самом деле сделали! Но это хорошо; тонкость является ключевой во всех аспектах дизайна. Спасибо за чтение / просмотр!
Окончательный код
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
/* Nothing special here.
body {
width: 500px;
margin: 60px auto 0;
background: #666;
}
#box {
/* Just a box */
width: 500px;
height: 500px;
/* Rounded corners */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 2px solid white;
/* Multiple border colors in Gecko */
-moz-border-top-colors: #292929 white;
-moz-border-right-colors: #292929 white;
-moz-border-bottom-colors: #292929 white;
-moz-border-left-colors: #292929 white;
/* Compensate for Webkit.
-webkit-box-shadow: 0 -1px 2px #292929;
/* Background subtle gradient, with fallback to solid color */
background: #e3e3e3;
background: -moz-linear-gradient(top, #a4a4a4, #e3e3e3);
background: -webkit-gradient(linear, left top, left bottom, from(#a4a4a4), to(#e3e3e3));
}
|