CSS3 является частично реализованы продолжением спецификации CSS2 мы все знаем и любим.It’ ы уже появились в новых браузеров, таких как Firefox 3.5, Safari 4 и Chrome.В этой статье, первой из статей, изучить практические (и даже надуманные) реализации CSS3, мы начинаем с применением CSS3, чтобы то, что мы все должны создать:. buttons

Призывы к действию являются критически важными для любого веб-сайта, и убедительным, привлекающие внимание, интерактивные кнопки проходит долгий путь в направлении движения, что участие.В прошлом, действительно удивительный кнопки необходимости дополнительной разметки, раздвижные двери или другого обмана.We’ покажу вам здесь, как создать хороший стиль кнопки без хаки или cheats.

Шаг 1: Super-Высокий Button

Некоторое время назад мы опубликовали пост под названием “ Super Высокий Кнопки с CSS3 и RGBa. ” Эти кнопки будет нашим первым шагом к созданию кнопок, которые действительно нажмите кнопку.Мы кратко рассмотрим технику, а затем расширить его, фиксируя проблемы, с которыми мы столкнулись на этом пути.

Использование Box-Shadow и RGBa

Наша первая цель, когда мы собирались создать универсальное семейство кнопки заключается в устранении проблемы, которая HEX основе отбрасывание тени есть на разных фонах.Как вы можете видеть ниже, мы можем использовать бокс-shadow Для создания раскрывающегося тень, но тень цвета doesn’ T работает на обеих темного и светлого фона.Чтобы обойти это, мы использовали цветовую модель, которая доступна в новых браузерах:. RGBa

RGBa работает как стандартная модель RGB — 255, 255, 255 для белых, например, — но есть четвертое свойство, которое управляет альфа, или прозрачность, канал.В кнопок выше, серая тень, которую мы создали для белый фон слишком светлый на темном фоне.Однако, используя RGBa мы можем создать черную тень, которая является прозрачной.Это позволяет тенью работать против любого фона:

button.awesome, .button.awesome {
	…
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	…
}

Это решает нашу бокс-shadow проблемы.Все that’ S слева тире свойств CSS и простым наложением PNG для создания готовой кнопки, которые могут быть рестайлинг любого цвета, на любом фоне, и это будет работать только fine.

Удивительные границ Radius

Создание объектов с закругленными краями всегда был беспорядок на Web, в конце концов, каждый объект на Web представляет собой прямоугольник.CSS3 делает нашу жизнь немного легче за счет реализации невероятно простой способ округлить объектов без раздвижных дверей или неприятные элементы фона.С помощью этих кнопок, we’ повторное использование стандартного цвета фона иPNG наложения, чтобы дать им глубину.Мы not использование фонового изображения вокруг edges.

button.awesome, .button.awesome {
	…
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	…
}

В настоящее время Webkit (Safari, Chrome) и Firefox имеют несколько различных реализаций границы radius.Webkit будет округлять функциональные элементы (например, изображения), в то время как Firefox не будет.Тем не менее, оба очень чисто округления объекта и маски фоновое изображение, цвет или both. (Как с нашими кнопками)

Если вы получаете в тесном, можно увидеть, что границы ведут себя немного странно на уровне пикселей, но по большей части границы radius является отличным способом, чтобы принести закругленными краями в ваш дизайн без лишних сложностей.Here’ с полным CSS для этих кнопок:

button.awesome, .button.awesome {
	…
	background: #222 url(/images/alert-overlay.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
	…
}

Final Touches

We’ нас созданы стандартные кнопки вы можете видеть выше, но еще одна интересная вещь о кнопками, которые don’ изображения т использования является то, что мы можем создать любой цвет мы хотим и с некоторыми простыми именами классов генерировать весь репертуар кнопки, которые мы можемпризывать любое время.Это отличная возможность для создания многоразовой набор кнопок, которые могут быть адаптированы к вашей организации или clients’ стиль руководства.Обратите внимание на цветовые коды, которые мы используем:

.blue.awesome {
	background-color: #2daebf;
}

.red.awesome {
	background-color: #e33100;
}

.magenta.awesome {
	background-color: #a9014b;
}

.orange.awesome {
	background-color: #ff5c00;
}

.yellow.awesome {
	background-color: #ffb515;
}

Эти простые классы позволяют быстро вызвать на кнопку мы хотим, чтобы действия мы должны предпринять пользователей.We’ уже использовали подобные методы в кнопках we’ будете идти через в ближайшие несколько sections.

Наш последний шаг калибровки.Без скользящих дверей ситуации наша кнопка размер ограничен только размером нашей наложения изображений (а в будущем кнопками, даже не это).We’ будем использовать несколько классов (small, medium и large), чтобы создать размеров, которые мы можем назвать в различных situations.

кнопки в различных размерах: overview.

И that’ и все!Масштабируемые, легко настроить набор кнопок, который работает во всех браузерах (через изящные деградации) и будет вам влияние вы хотите.В следующих нескольких разделах we’ будем опираться на эти кнопки, чтобы показать вам, как CSS3 может подтолкнуть эти еще дальше в некоторые интересные directions.

Смотреть демо »

We’ ве создали живую странице демо-версию для этих кнопок; it’ ы на детской площадке, где мы создаем небольшие проекты стороне и холодные игрушки.We’ буду ссылки на детской площадке примеров в этой должности и остальная часть нашего series.

заметку о совместимости: верной форме, IE8 не поддерживает границы radius.В ZURB, we’ нас принято “ изящная degradation”парадигмы, так что эти углы будут квадратные в IE.По нашему опыту, дополнительные затраты на развитие таких элементов, как этого не стоит, и мы полагаемся на эти свойства чисто деградировать и не повредить макет или чтения.Эти кнопки не являются исключением: они все еще находятся в интерактивные В IE, как и везде, только не так pretty.

Шаг 2: Радиоактивные Buttons

Теперь, we’ ве получили наши ноги мокрые с CSS3, let’ пойдем в другом направлении.Для последнего проекта клиента, мы хотели создать стилизованный, привлекательный и привлекательный призыв к действию для главной страницы. Мы придумали идею радиоактивных button, кнопку, которая на самом деле импульсы на страницу для получения более attention.

Kitschy? …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров