Автор: Крис Spooner
Есть новые захватывающие возможности в трубопровод для каскадных таблиц стилей, которые позволят взрыв творчества в веб-дизайне.Эти функции включают CSS стилей правила, которые в настоящее время освобождены с предстоящим CSS3 specification.В действительности, вы won’ т иметь возможность использовать их на ваших повседневных клиентских проектов еще на несколько лет, но для дизайна блогов и веб-сайтов, направленных на сообщество веб-дизайна, эти особенности могут помочь вам расширить границы современного веб-дизайна сегодня, добавив, чтодополнительные специи, чтобы ваш дизайн и помочь промышленности ход forward.
Вот пять методов выхватил из будущего, которые вы можете применить на практике в своих проектах сайте today.
1.Пограничная Radius
Наверное, самой распространенной функцией CSS3 в настоящее время используется границу радиуса.Стандартный блок HTML элементы квадратной формы с 90-градусных углов.CSS3 правила моделирования позволяет закругленные углы, чтобы быть set.
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Границ радиус также может быть использован для таргетинг на отдельные углы, хотя синтаксис-МОЗ-и-WebKit-немного отличается:
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
Поддерживается в Firefox, Safari и Chrome.
Как использовать:. Twitter
См. также:
2.Пограничная Image
Границ изображения, как следует из названия, позволяет файл изображения, который будет использоваться в качестве границы объекта.Изображение создается впервые в связи с каждой стороны объекта, где каждая сторона изображения соответствует стороне HTML объекта.Это то, реализуемых при следующий синтаксис:
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;
{Границы: 5px} атрибут определяет общую ширину границы, а затем каждый границы изображения правило нацелена на файл изображения и говорит браузеру, какую часть изображения для использования пополнить, что 5px границей area.
Пограничные изображения можно также задать для каждой стороны основы, позволяющие отдельных изображений, которые будут использоваться на каждой из четырех сторон, а также в четырех углах:
border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image
Поддерживается в версии Firefox 3.1, Safari и Chrome.
Как использовать:. Blog.SpoonGraphics
См. также:
3.Shadow Box и текст Shadow
Тени Drop: разве вы не просто любите их?Они могут так легко сделать перерыв или дизайна.Теперь, с CSS3, вам даже не нужно Photoshop!Использование we’ видели до сих пор действительно добавляют к дизайну, хорошим примером этого бытия year’ S 24 способов website.
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
Первые два атрибуты определяют смещение тени по отношению к элементу, в данном случае 10 точек на оси х и у.Третий атрибут задает уровень размытия тени.И, наконец, тени цвета set.
Кроме того, текст-тень атрибут доступен для использования на текстовое содержание:
text-shadow: 2px 2px 5px #ccc;
. Поддерживается в версии Firefox 3.1, Safari, Chrome (коробка-только тень) и Opera (текст-тень только)
Как использовать:. 24 Ways
См. также:
4.Легкая прозрачность с RGBA и Opacity
Использование файлов PNG в веб-design сделал прозрачность Ключевой особенностью дизайна.Теперь, значение альфа или прозрачность правил могут быть указаны непосредственно в CSS.
rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);
Первые три цифры относятся к красной, зеленой и синей цветовых каналов, а окончательное значение относится к альфа-канал, который производит прозрачности effect.
Кроме того, с непрозрачностью правило, цвет может быть задан как обычно, с непрозрачностью значения, установленного в качестве отдельного правила:
...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров