5 классных CSS3-эффектов, которые вы увидите больше

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: 20px; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / border-radius: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /

Тень текста

Иногда текст может выглядеть очень резким, но простая маленькая тень действительно помогает. Проверьте тень, которую я применил к этому абзацу.

Вот код для некоторых текстовых теней:

.box_textshadow text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * /

Градиенты

Нет больше плоских цветов или фоновых изображений градиента, теперь вы можете создать крутой градиент, используя только CSS. К сожалению, вам нужно несколько строк из-за текущих проблем несовместимости между браузерами, но вы можете использовать инструмент, который я опишу позже, чтобы генерировать их автоматически.

Вот код для CSS-градиентов:

.box_gradient background-color: # 3f9fe3; background-image: -moz-linear-Gradient (вверху, # 3f9fe3, # белый); / * FF3.6 * / background: -moz-linear-Gradient (вверху, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-linear-Gradient (top, # 3f9fe3, #white); / * IE10 * / background-image: -o-linear-Gradient (top, # 3f9fe3, #white); / * Opera 11.10+ * / background-image: -webkit-градиент (линейный, слева вверху, слева внизу, от (# 3f9fe3) до (#white)); / * Saf4 +, Chrome * / background-image: -webkit-linear-radius (top, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / background-image: линейный градиент (вверху, # 3f9fe3, # белый); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = "# white"); / * IE6-IE9 * /

вращение

Трудно представить себе использование этого с точки зрения текста, но он может добавить некоторые хорошие элементы дизайна, например, при использовании изображений. Опять же, обратите внимание, что хотя этот абзац был повернут, вы все равно можете выбирать и взаимодействовать с ним, поскольку он остается обычным текстом.

Вот код, чтобы вращать что-то:

 .box_rotate -moz-transform: rotate (7.5deg); / * FF3.5 + * / -o-transform: повернуть (7,5 градусов); / * Opera 10.5 * / -webkit-transform: повернуть (7,5 градусов); / * Saf3.1 +, Chrome * / -ms-transform: повернуть (7,5 градусов); / * IE9 * / transform: повернуть (7,5 градусов); фильтр: progid: DXImageTransform.Microsoft.Matrix (/ * IE6-IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104; расширение ", зум: 1;  

Анимация

О да, я сохранил лучшее до последнего. CSS3 вводит различные формы анимации для любого количества классных эффектов CSS, описанных. В этом пункте я определил свойство перехода, как указано ниже, а также простой цвет фона и поворот при наведении на него курсора. Если вы еще этого не сделали, наведите курсор на этот абзац текста, чтобы увидеть эффект в действии. Вы можете оживить почти все!

Вам понадобится такой код перехода для любого элемента, который вы хотите изменить. Вам также понадобится использовать некоторые псевдо-классы CSS (такие как: hover, чтобы изменить любые свойства, которые вы хотите анимировать, такие как цвет, размер или вращение)

 .box_transition -moz-transition: все 0.5s замедления; / * FF4 + * / -o-transition: все 0.5s замедления; / * Opera 10.5+ * / -webkit-transition: все 0.5s замедления; / * Saf3.2 +, Chrome * / -ms-transition: все 0.5s замедления; / * IE10? * / переход: все 0,5 сек.  

Кросс-браузерная несовместимость

Хотя большинство современных браузеров в некотором роде поддерживают весь CSS3, некоторым все же требуется немного другой код или хаки, чтобы он работал с их конкретной реализацией стандарта. Например, в приведенном выше коде вы увидите много случаев использования -moz- или -webkit-, предшествующих некоторым свойствам CSS, которые относятся к браузерам на основе Mozilla или Webkit. Написание этих дополнительных строк может быть трудным, поэтому проверьте генератор css3, чтобы написать их для вас.

Заключение

Веб станет намного интереснее с новыми расширениями CSS3 и HTML5. Конечно, мы увидим еще один всплеск вспыхивающего текста и высокое соотношение скорости и реального контента (как мы делали, когда анимированные GIF-изображения были первыми). “обнаруженный”) но в дальнейшем мы научимся использовать инструменты CSS3 для создания более интересных веб-интерфейсов. И, эй, ты всегда можешь выключить все это!

Если вы дизайнер или веб-разработчик, помните, что CSS3 никогда не должен быть единственным вариантом. Если ваш сайт не будет работать без CSS3, вы использовали его неправильно. CSS должен быть использован для улучшения опыта, а не функциональности программы.