Подпишитесь на RSS, чтобы всегда быть в курсе событий.
Комментарии
В футболе могут отменить офсайды
В футболе могут отменить офсайды Президент Международной федерации футбола (ФИФА) Зепп Блаттер не исключает возможности отмены правила “вне игры”, сообщает РИА Новости со ссылкой на Sky Sports. Правило офсайда является одним из наиболее обсуждаемых в футболе. В хоккее на траве “вне игры” было исключено из правил в 1998 году, что сделало не самый популярный спорт [...]
Ударные волны создают планеты
Теория возникновения волос. Некоторые коррективы » Основные составляющие планет могли быть созданы ультразвуковыми ударными волнами вокруг молодых звезд – предполагают ученые в новом исследовании, опубликованном в Astrophysical Journal. Телескоп NASA Spitzer недавно исследовал 5 новообразованных планетарных систем с планетами, которые только начинают формироваться. Наблюдение выявило крошечные кристаллы кварца, которые формируются от мгновенного нагрева материи с [...]
Метки
Новые возможности дизайна с CSS3
Обзор возможностей новой спецификации CSS3 (сейчас используется CSS2.1) от популярного сайта smashingmagazine.com. Автор – Chris Spooner
В хитросплетении Каскадных Таблиц Стилей (CSS) есть немало волнующих особенностей, которые буквально вызовут взрыв креатива в интернете. Эти новые детали включают в себя правила стилей CSS, которые будут реализованы в будущей спецификации CSS3. Если взглянуть реалистично, то вы вряд ли сможете использовать их в полную силу в ближайшие несколько лет для своих проектов, но для Дизайнерские блогов и сайтов, эти возможности помогут выйти за рамки современного веба уже сегодня, добавляя ту самую "изюминку" в ваш дизайн и двигая дизайн-индустрию вперед.
Приведем 5 техник, взятые из будущего, которые можно практиковать на своем сайте прямо сейчас.
Border radius
Пожалуй, это наиболее общая особенность CSS3, которая сейчас используется, – border-radius. Стандартные HTML-блоки имеют квадратную форму с углами в 90 градусов. Правило CSS3 позволяет использовать закругленные углы.
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Border-radius также может быть использован для стилизации любого отдельного угла, хотя синтаксис -moz- отличается:
-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 i Google Chrome.
Используется в Твиттер.
Border image
Border-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;
Атрибут {border: 5px} конкретизирует полную ширину границы, и затем правило border-image с целевым файлом говорит браузеру, сколько изображение использовать, чтобы заполнить те 5px области границы.
Изображение для границы также могут быть указаны на посторонний основе, позволяя различным изображением быть использованы для каждой из четырех сторон, так же как и для углов.
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.
Тени для блоков и текста
Тени: разве вы их только не любите? Они могут легко как создать, так и разрушить ваш дизайн. Теперь, с помощью CSS3 вам даже не нужен Photoshop. Использование, которое вы видите на картинке (тень от блока с датой и тень от слов Making Modular …), уже прекрасно используется на сайте 24 Ways.
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
Два первых атрибуты определяют отхождения (offset) тени от элемента, в нашем случае это 10 точек по x и y осям. Третий атрибут назначает уровень размывания (blur) тени. Ну, и наконец, цвет.
Атрибут text-shadow используется для тени от текстового контента:
text-shadow: 2px 2px 5px #ccc;
Поддерживается в Firefox 3.1, Safari, Chrome (box-shadow только) и Opera (text-shadow).
Простая прозрачность с RGBA и opacity
Использование PNG файлов в веб-дизайне сделало прозрачность одной из его ключевых свойств. Сейчас показатель alpha или правило непрозрачности могут быть указаны непосредственно в CSS.
rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);
Первые три числа ссылаются на красный, зеленый, синий цветовые каналы, а последнее число – на альфа-канал, вызывает эффект прозрачности.
В качестве альтернативы, вместе с правилом непрозрачности цвет может быть указан как обычно, а именно правило – как отдельное.
color: #000;
opacity: 0.5;
Поддерживается в Firefox, Safari, Chrome, Opera (непрозрачность), IE7 (непрозрачность, с поправками).
Используется в 24 Ways (RGBA).
Собственные шрифты с @ font-face
Всегда существовал набор т.н. безопасных шрифтов, которые могли свободно использоваться в Интернете, как вы знаете: Aria
l, Helvetica, Verdana, Georgia, Comic Sans, и другие. CSS3-правило @ font-face позволяет включать шрифт из любого шрифтового файла, размещенного у вас на сервере. Это в определенной степени приносит проблемы, связанные с авторским правом, ведь есть не так много шрифтов, которые могут быть использованы для @ font-face включений.
Стилизация на практике выглядит следующим так:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}
Остальные шрифтовых функций вызывается как обычно:
h1 { font-family: 'Anivers', Helvetica, Sans-Serif;
Поддерживается в Firefox 3.1, Safari, Opera 10, IE7 (с множеством поправок, если вы храбры, то сможете заставить работать выбранный шрифт в ИЕ7)
Используется в TapTapTap.
Хотя CSS3 все еще находится на стадии развития, правила, описанные здесь, уже сейчас поддерживаются в некоторых браузерах. Safari, в частности, имеет обширную поддержку этих новых особенностей. Но увы, являясь высококачественным браузером, он имеет достаточно малую аудиторию, поэтому возможно, эти дополнительные особенности CSS3 не являются важными для его группы пользователей. Но с компьютера Mac от Apple, которые внедряются в жизнь, использование Safari также расти.
Firefox, с другой стороны, сейчас имеет гораздо больше пользователей. Более того, следующий его релиз, Firefox 3.1, добавил поддержку свойств CSS3. Принимая во внимание то, что большинство юзеров Firefox сразу же обновят свой браузер, скоро появится большая группа людей, которая будет иметь поддержку этих новых стилевых правил.
Google Chrome был выпущен в прошлом году. Основанный на движке WebKit, этот браузер имеет почти все то же, что и в Safari. Пока Safari добавляет многочисленную пропорцию Mac-пользователей, Chrome предоставляет пропорцию сторонников Windows.
Если мы взглянем на статистику использования браузеров от W3C за ноябрь 2008 года, то 44,2% пользователей путешествовали в интернете с Firefox, 3,1% с Google Chrome, 2,7% – с Safari. Это означает, что около 50% всех интернет-пользователей смогут увидеть эти новые свойства. А в рамках веб-дизайнерского сообщества, которая является значительно сознательнее по выбору браузера, процент юзеров с поддержкой CSS3 возрастет до уровня 70%.
Обратная сторона медали
Ваш сайт теперь имеет широкий диапазон новых возможностей, но есть ряд негативных моментов, которые помешают этом:
- Internet Explorer. 46% интернет-пользователей не смогут увидеть новые возможности. Поэтому не используйте их как критическую часть вашего дизайна. Убедитесь, что имеет место и второстепенный выбор, например, стандартная граница вместо border-image.
- Нетрудоспособные таблицы стилей. Новые свойства CSS3 не были выпущены в качестве финального релиза. Они сейчас виконуюються с признаками, которые различны для различных браузеров. Поэтому они могут сделать недействительной вашу таблицу стилей.
- Дополнительный код. Обращая внимание на предыдущий пункт, видим, что мы должны добавлять разные теги для различных браузеров, чтобы описать одно правило. Это добавляет много строк до вашего CSS-кода.
- Потенциальная опасность использования. Так же, как это делается со стандартными фильтрами в Photoshop, использование этих новых стилевых свойств может привести к появлению мучительно-ужасающих дизайнов. Поэтому пожалуйста, лучше не злоупотребляйте эффектом тени!
Об авторе
Крис Спунер – фрилансер, графический и веб-дизайнер из Великобритании. Он живет темой дизайна и наслаждается тем, что идет нога-в-ногу с этой сферой. Крис также публикует статьи по дизайну, различные туториалы на своем блоге Blog.SpoonGraphics.
Ссылки по теме:
- CSS3 Preview
- CSS3 и блочная модель
- Краткий обзор CSS3
- Безопасные шрифты для Всемережжя
Оригинал статьи – Push your web design into the future with CSS3
Перевод на украинский язык – Блогоридер
Спонсоры записи: недорогой хостинг дать объявления в запорожье городской сайт одессы А может вас заинтересуют информационные технологии?