CSS 3 + HTML 5 — будущее Интернета. Официально они еще не появились, хотя многие браузеры начали обеспечивать их частичную поддержку. В этой статье представлены 5 методов CSS3, которые помогут вам достичь будущего Интернета. В настоящее время эти методы не следует использовать в официальных клиентских проектах; они больше подходят для вашего личного блога, сообщества веб-дизайнеров или ситуаций, когда клиенты не будут жаловаться вам.
1. Эффект закругленных углов
Одной из наиболее часто используемых новых функций CSS3 является эффект закругленных углов. Стандартный квадратный объект HTML имеет квадратные углы под углом 90 градусов. CSS3 может помочь вам добиться закругленных углов.
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Даже один угол можно закруглить, но синтаксис Mozilla и Webkit немного отличается.
-moz-border-radius-topleft: 20px;
-moz-border
-radius-topright: 20px;
-moz-border-radius-bottomleft
: 10px; -moz-border-radius-bottomright: 10px;
-rightright-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px
; -webkit-border-bottom-rightright-radius: 10px
; Firefox, Safari, Chrome
2. Графические границы
Как следует из названия, графическая граница — это граница, которая позволяет использовать изображения в качестве объектов. Синтаксис следующий:
border: 5px Solid #cccccc;
-webkit-border-image: url(/images/border-image.png). ) 5 повтор;
-moz-border- image: url(/images/border-image.png) 5 повтор;
border-image: url(/images/border-image.png) 5 повторение
Здесь border: 5px устанавливает
;ширина границы, а затем каждое Определение изображения границы сообщает браузеру, какую часть изображения следует использовать в качестве границы.
Изображение
границы
также
можно
установить индивидуально для
каждого
края
:
top -rightright-image
border-right-image
поддерживаемые браузеры: Firefox 3.1, Safari, Chrome
3. Блокировать тень и тень текста
.
Эффекты тени когда-то были чем-то, что веб-дизайнеры любили и ненавидели. Теперь, благодаря CSS3, вам больше не нужен Photoshop. Уже существуют веб-сайты, использующие эту функцию, например сайт 24 Ways
-webkit-box-shadow: 10px 10px 25px #ccc ;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc
Первые два свойства задают смещение тени по X/Y, здесь они составляют 10 пикселей, а третье свойство определяет размытие тени. Степень тени, последняя задает цвет тени. Тень текста также можно установить следующим образом:
text-shadow: 2px 2px 5px #ccc;
Поддерживаемые браузеры: Firefox 3.1, Safari, Chrome (поддерживается только тень блока), Opera (поддерживается только тень текста). зеленый Последнее значение трех синих цветов представляет прозрачность. Кроме того, мы также можем использовать непрозрачность для достижения прозрачности (в настоящее время этот метод в основном используется для эффектов светового короба - Переводчик).
4. Используйте RGBA для достижения эффектов прозрачности
.
В настоящее время эффект прозрачности в веб-дизайне достигается в основном с помощью изображений PNG (но он плохо поддерживается в браузере-переводчике IE). В CSS3 эффект прозрачности может быть достигнут напрямую.
rgba(200, 54, 54, 0,5);
фон: rgba(200, 54, 54, 0,5);
цвет
: rgba(200, 54, 54, 0,5);
цвет: #000;
непрозрачность: 0,5;
, Safari, Chrome, Opera (непрозрачность) и IE7 (непрозрачность, с исправлениями).
5. Используйте @Font-Face для реализации индивидуальных шрифтов.
Есть несколько шрифтов, которые относительно безопасны в веб-дизайне, например Arial, Helvetica, Verdana, Georgia и Comic Sans (китайский, вообще говоря, Song Dynasty — единственный безопасный — переводчик. Теперь используем @font-face из CSS3). Могу ли я указать шрифты сам, но из-за проблем с авторскими правами количество фактических шрифтов, которые можно использовать, ограничено (кроме того, огромные китайские шрифты также представляют собой сложную проблему, - переводчик).
Синтаксис следующий:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype'
}
Поддерживаемые браузеры: Firefox 3.1, Safari, Opera 10); и IE7 (это потребует некоторых усилий, если вы не боитесь проблем, вы можете реализовать эту функцию в IE, см.: заставить шрифт-лицо работать в IE).
Хотя CSS3 все еще находится в разработке, упомянутые выше функции уже доступны. в некоторых используемых браузерах, особенно в Safari. К сожалению, Safari не является популярным браузером.
В настоящее время Firefox имеет большую базу пользователей. Кроме того, будущая версия Firefox 3.1 поддерживает множество эффектов CSS3. Поскольку пользователи Firefox очень заинтересованы в обновлении, многие пользователи могут заранее опробовать новые функции CSS3.
Google Chrome был выпущен только в этом году. Он основан на движке Webkit и очень похож на Safari. Поскольку Safari в основном используется на рынке Mac, Chrome может просто заполнить пробел на рынке Windows.
По статистике, по состоянию на ноябрь 2008 года 44,2% пользователей использовали Firefox, 3,1% использовали Chrome и 2,7% использовали Safari, а это означает, что некоторые функции CSS3 уже могут поддерживать почти половина пользователей Интернета. доля может быть выше, около 73,6% (данные предоставлены Blog.SpoonGraphics)
6. Негативные факторы
Описанные выше функции CSS3 принесут отличные результаты на вашем веб-сайте, но все же есть некоторые негативные факторы, которые необходимо учитывать:
Internet Explorer: 46 % Интернет не может увидеть эти эффекты, поэтому не используйте их для важных проектов. Также убедитесь, что там, где эти эффекты не работают, доступны альтернативные конструкции.
Проблемы с проверкой CSS. Эти функции CSS3 не являются окончательной версией. В настоящее время разные браузеры используют разные теги для реализации этих функций, что может вызвать проблемы с проверкой вашей таблицы стилей.
Раздутый код. Поскольку разные браузеры используют разный синтаксис определений, ваш CSS-код со временем станет очень раздутым.
Неправильное использование: Неправильное использование этих эффектов может привести к некоторым неблагоприятным последствиям, особенно в отношении эффектов тени.
Международный источник этой статьи: http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
Источник перевода на китайский язык: официальный сайт COMSHARP CMS (35 км). перевод )