Интернет

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

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

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

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

Если вы читаете эту статью, потому что вы заинтригованы, но понятия не имеете, что означает CSS, позвольте мне объяснить быстро. CSS — это язык кодирования, используемый для оформления веб-страниц. Он расшифровывается как C ascading S tyle S heet, и в основном просто добавляет стиль и стиль на сайт. Веб-сайты, безусловно, доступны для чтения без 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 * /
   } 

Тень текста

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

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

  .box_textshadow {
      тень текста: 1px 1px 3px # 888;  / * FF3.5 +, Opera 9+, Saf1 +, Chrome * /
 } 

Градиенты

Нет больше плоских цветов или фоновых изображений градиента, теперь вы можете создать крутой градиент, используя только 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 */
   фоновое изображение: -ms-линейный градиент (вверху, # 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 * /
 } 

вращение

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

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

 .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;
 }

Анимация

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

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

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

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

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

Вывод

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

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

Похожие посты
Интернет

Google Store Лучшие предложения

Интернет

Руководство по специальному режиму в сети

Интернет

10 советов по безопасности беспроводной домашней сети

Интернет

САН против НАН