Рекламное объявление

классные css эффектыCSS3 (в сочетании с мощью HTML5) быстро поддерживается всеми основными браузерами (читай - все, кроме Internet Explorer), поэтому я Я подумал, что сейчас самое время увидеть некоторые классные CSS-эффекты, которых мы можем достичь, используя мощь вашего браузера и немного CSS-кода. Вы сможете увидеть все эффекты, продемонстрированные в этой статье, если вы используете последнюю версию браузера Chrome, Safari или Firefox.

Первый - Что такое CSS?

Если вы читаете эту статью, потому что вы заинтригованы, но понятия не имеете, что означает CSS, позвольте мне объяснить быстро. CSS - это язык кодирования, используемый для оформления веб-страниц. Это означает Сascading Sмозоль Sи, в основном, просто добавляет стиль и стиль на сайт. Веб-сайты, безусловно, читаемы без CSS, но они отвратительны, как и все веб-сайты в 1995 году. В то время как HTML-файлы описывают структуру и текстовое содержимое страницы, CSS заставляет их отображаться так, как это делает дизайнер. и определить все, начиная от макета страницы, размера текста и цветов, а теперь и ряд необычных эффектов с введением CSS3.

instagram viewer

В прошлом достижение тех же самых эффектов, которые описаны в этой статье, означало бы загрузку громоздкого 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 (верх, # 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. Матрица (/ * IE6 – IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, sizingMethod = «автоматическое расширение»); зум: 1; }

Анимация

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

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

.box_transition {-moz-transition: все 0.5s замедления; / * FF4 + * / -o-transition: замедление всех 0,5 с; / * 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 должен быть использован для улучшения опыта, а не функциональности программы.

Джеймс имеет степень бакалавра в области искусственного интеллекта и сертифицирован CompTIA A + и Network +. Он является ведущим разработчиком MakeUseOf и проводит свое свободное время за игрой в VR-пейнтбол и настольные игры. Он строит компьютеры с детства.