Содержание
CSS3 (в сочетании с мощью HTML5) быстро поддерживается всеми основными браузерами (читай — что угодно, кроме Internet Explorer), поэтому я подумал, что сейчас самое время увидеть некоторые классные CSS-эффекты, которые мы можем достичь, используя мощные возможности. вашего браузера и немного кода CSS. Вы сможете увидеть все эффекты, продемонстрированные в этой статье, если вы используете последнюю версию браузера Chrome, Safari или Firefox.
Первый — Что такое CSS?
Если вы читаете эту статью, потому что вы заинтригованы, но понятия не имеете, что означает CSS, позвольте мне объяснить быстро. CSS — это язык кодирования, используемый для оформления веб-страниц. Это означает Сascading Sмозоль Sи в основном просто добавляет стиль и стиль на сайт. Веб-сайты, безусловно, доступны для чтения без их CSS, но они отвратительны, как и все веб-сайты в 1995 году. Хотя HTML-файлы описывают структуру и текстовое содержимое страницы, CSS заставляет их отображаться так, как задумал дизайнер, и определять все по макет страницы, размер текста и цвета, а теперь и ряд необычных эффектов с введением CSS3.
В прошлом достижение тех же эффектов, которые описаны в этой статье, означало бы загрузку громоздкого CSS или даже более крупной графики. Теперь CSS может просто описать вашему браузеру, как должна выглядеть страница, и браузер обработает его. Как будто я передаю вам планы построить собственный дом вместо того, чтобы продавать весь дом — это значительно дешевле!
Закругленные углы
Интернет постепенно становится более «круглым», но теперь это закреплено в CSS3. Посмотрите на прямоугольник вокруг этого абзаца. Это не изображение — попробуйте щелкнуть по нему правой кнопкой мыши, чтобы увидеть. Чистый CSS!
Код для закругленных углов действительно прост:
.box_round {
-moz-border-radius: 20 пикселей; / * FF1 + * /
-webkit-border-radius: 20 пикселей; / * Saf3-4, iOS 1+, Android 1.5+ * /
радиус границы: 20 пикселей; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /
}[/ NOEDIT]
Тень текста
Иногда текст может выглядеть очень резким, но простая маленькая тень действительно помогает. Проверьте тень, которую я применил к этому абзацу.
Вот код для некоторых текстовых теней:
.box_textshadow {
тень текста: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * /
}[/ NOEDIT]
Градиенты
Больше нет плоских цветов или фоновых изображений с градиентом, теперь вы можете создать крутой градиент, используя только CSS. К сожалению, вам нужно несколько строк из-за текущих проблем несовместимости между браузерами, но вы можете использовать инструмент, который я опишу позже, чтобы генерировать их автоматически.
Вот код для CSS-градиентов:
.box_gradient {
цвет фона: # 3f9fe3;
background-image: -moz-linear-Gradient (вверху, # 3f9fe3, # белый); / * FF3.6 * /
фон: -moz-linear-Gradient (вверху, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); /* Fire Fox */
background-image: -ms-linear-градиент (вверху, # 3f9fe3, # белый); / * IE10 * /
фоновое изображение: -o-линейный градиент (вверху, # 3f9fe3, # белый); / * Опера 11.10+ * /
background-image: -webkit-градиент (линейный, слева вверху, слева внизу, от (# 3f9fe3) до (#white)); / * Saf4 +, Chrome * /
background-image: -webkit-linear-Gradient (вверху, # 3f9fe3, # белый); / * Chrome 10+, Saf5.1 + * /
background-image: линейный градиент (вверху, # 3f9fe3, # белый);
фильтр: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# white'); / * IE6 – IE9 * /
}[/ NOEDIT]
вращение
Сложно представить себе использование этого с точки зрения текста, но он может добавить некоторые приятные элементы дизайна, например, при использовании изображений. Опять же, обратите внимание, что хотя этот абзац был повернут, вы все равно можете выбирать и взаимодействовать с ним, поскольку он остается обычным текстом.
Вот код, чтобы вращать что-то:
.box_rotate {
-moz-transform: повернуть (7,5 градусов); / * FF3.5 + * /
-о-преобразование: вращение (7,5 градусов); / * Опера 10,5 * /
-webkit-transform: повернуть (7,5 градусов); / * Saf3.1 +, Chrome * /
-ms-transform: повернуть (7,5 градусов); / * IE9 * /
трансформировать: вращать (7,5 градусов);
фильтр: progid: DXImageTransform.Microsoft.Matrix (/ * IE6 – IE9 * /
M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, sizingMethod = 'auto expand');
зум: 1;
}
[/ NOEDIT]
Анимация
О да, я сохранил лучшее до последнего. CSS3 вводит различные формы анимации для любого количества классных эффектов CSS, описанных. В этом абзаце я определил свойство перехода, как указано ниже, а также простой цвет фона и поворот при наведении на него курсора. Если вы еще этого не сделали, наведите курсор на этот абзац текста, чтобы увидеть эффект в действии. Вы можете оживить практически все что угодно!
Вам понадобится такой код перехода для любого элемента, который вы хотите изменить. Вам также понадобится использовать некоторые псевдо-CSS-классы (такие как: hover, чтобы изменить любые свойства, которые вы хотите анимировать, такие как цвет, размер или поворот).
.box_transition {
-моз-переход: все 0,5 с; / * FF4 + * /
-переход: все 0,5 сек. / * Опера 10.5+ * /
-webkit-transition: все 0.5s замедления; / * Saf3.2 +, Chrome * /
-ms-переход: все 0.5s замедления; / * IE10? * /
переход: все 0,5 сек.
}
[/ NOEDIT]
Кросс-браузерная несовместимость
Хотя большинство современных браузеров в некотором роде поддерживают весь CSS3, некоторым все же требуется немного другой код или хаки, чтобы он работал с их конкретной реализацией стандарта. Например, в приведенном выше коде вы увидите много примеров -moz- или -webkit-, предшествующих некоторым свойствам CSS, которые относятся к браузерам на основе Mozilla или Webkit. Написание этих дополнительных строк может быть проблематичным, поэтому проверьте генератор css3, чтобы написать их для вас.
Заключение
Веб станет намного интереснее с новыми расширениями CSS3 и HTML5. Конечно, мы увидим еще один всплеск вспыхивающего текста и высокое соотношение скорости и реального контента (так же, как мы это делали, когда анимированные GIF-файлы были впервые «обнаружены»), но в конечном итоге мы научимся использовать инструменты CSS3, чтобы сделать более интересные веб-интерфейсы. И, эй, ты всегда можешь выключить все это!
Если вы сами дизайнер или веб-разработчик, просто помните, что CSS3 никогда не должен быть единственным вариантом. Если ваш сайт не будет работать без CSS3, вы не правильно его использовали. CSS должен использоваться для улучшения опыта, а не функциональности программы.
