—»     —»   Кое-что о CSS3, что Вам следовало бы знать
  Раздел: CSS/Style Sheets   Нет комментариев  

Кое-что о CSS3, что Вам следовало бы знать



Вероятно, каждый из Вас заметил, сколько шума сегодня вокруг CSS3, но давайте судить конкретнее – что мы можем применять сегодня? В этой статье мы расскажем Вам о некоторых способах применения CSS3, которые прекрасно отображаются во всех популярных браузерах (Firefox, Chrome, Safari, Opera и т.д.), а также о том, как они отображаются в браузерах, которые не имеют поддержки данной технологии (например, IE).

Используя различные дополнения браузеров, можно применять многое из предложенного технологией CSS3.

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

* Mozilla/Firefox/Gecko: -moz-
* Webkit (Safari/Chrome): -webkit- (заметьте, что некоторые префиксы семейства webkit будут работать только в Safari, в Chrome они работать не будут)

Вероятно, Вы уже догадались, что основным минусом этих расширений является тот факт, что нам нужно применять все вышеперечисленные префиксы, чтобы CSS3 правильно отображался в Firefox, Safari, и Chrome. И ни для кого не секрет, что у IE нет как самой поддержки для CSS3, так и никаких расширений для ее реализации. Итак, довольно болтовни, давайте начнем. Примечание: стили без префикса являются действующими относительно спецификации W3.

Кое-что о демо-кодах, представленных в этой статье ... если Вы не можете их видеть, то у Вашего браузера некорректно работает поддержка CSS3.

- Тени

Эффекту тени можно выставлять несколько параметров. Первый – это цвет тени. Будет 4 значения, первые два из которых указывают на смещение; первое - по горизонтали (ось Х), а второе смещение по вертикали (ось Y). Следующее значение указывает на уровень размытости тени. А четвертое и последнее значение отвечает за распространение размытия. Также есть поддержка реализации внутренней тени.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

Кое-что о CSS3, что Вам следовало бы знать

- Градации

Сначала градации могут немного привести в замешательство, особенно если сравнивать различия между -moz и -webkit. В -moz Вы сначала определяете направление градации, затем указываются начальный и конечный цвета. Градации в -webkit требуют немного больше кода. Сначала Вы указываете тип градации. Затем два значения, определяющие направление. И наконец, последние два значения, которыми Вы определяете начальный и конечный цвет градации.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

Кое-что о CSS3, что Вам следовало бы знать

- RGBa

На самом деле, принцип RGBa намного проще, чем может показаться на первый взгляд. Есть 4 значения, посредством которых определяется количество красного, зеленого и синего цветов, а также уровень прозрачности. Вместо того, чтобы пользоваться hex (#), Вы указываете цвет в режиме RGB, в то время как уровень прозрачности может придать эффект прозрачности. Уровень прозрачности поддерживает значения от 0 до 1, где 0 означает полную прозрачность, а 1 – отображение указанного цвета. На примере, приведенном ниже, выставлено значение в .5, что означает, что элемент прозрачен на 50%. RGBa, кстати, не требует никаких дополнений и расширений браузерных средств.

background-color: rgba(0, 54, 105, .5);

Кое-что о CSS3, что Вам следовало бы знать

- HSL

Вместе с RGBa, CSS3 дало нам возможность применения и цветовой модели HSL, что дает нам полный арсенал цветов и оттенков. В этой цветовой модели, HSL представляет собой Hue (цвет), Saturation (насыщение) и Lightness (яркость).

background-color: hsl(209,41.2%, 20.6%);

Кое-что о CSS3, что Вам следовало бы знать

- Цвет границ

С помощью этой функции, Вы можете указать отдельно применять эффекты к border-top, border-right, border-bottom и border-left. Вы увидите, что мы указали границу в 8 пикселей с восемью разными цветами для каждого стиля границы. Это потому, что число цветов должно совпадать со значением толщины границы.

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Кое-что о CSS3, что Вам следовало бы знать

- Цвет выделения текста

Стоит сказать, что изменение цвета для выделенного текста – это достаточно захватывающее нововведение. С помощью псевдо-элемента «::selection», Вы можете изменять цвет и фон, когда пользователь выделяет текст. Пока что эту функцию исключили из чернового варианта CSS3, но будем надеяться, что она вновь появится там.

::selection {
background: #3C0; /* Safari */
color: #90C;
}
::-moz-selection {
background: #3C0; /* Firefox */
color: #90C;
}

Кое-что о CSS3, что Вам следовало бы знать

- Трансформации

С помощью трансформаций, вы можете заставить элементы «расти» при наведении. Если добавить единицу в значение масштаба, элемент увеличится в размерах. И наоборот, если значение будет меньше 1, то элемент уменьшится. Кроме масштабирования, есть еще много различных трансформаций. Посетите страницу разработчиков Firefox для более подробной информации.

-moz-transform: scale(1.15);
-webkit-transform: scale(1.15);

Кое-что о CSS3, что Вам следовало бы знать

- Разметка в несколько колонок

С помощью разметки в несколько колонок, мы можем придать тексту «газетный» вид. В принципе, это очень просто реализовать, в сравнении с обычным способом реализации посредством CSS. Ниже указано требуемое количество колонок, правила их разделения и межстрочный интервал. Все просто, не правда ли?

-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 20px;

Кое-что о CSS3, что Вам следовало бы знать

Заключение

Надеемся, что теперь Вы еще больше увлечены безумным миром CSS3. Эта технология даёт огромное преимущество веб-дизайнерам и разработчикам, и значительно облегчает некоторые процессы. Теперь остается надеяться лишь на то, что когда-нибудь это новшество смогут поддерживать все браузеры в мире! Конечно же, здесь мы рассказали Вам только лишь об основных функциях CSS3. Если Вам хочется узнать больше, то просмотрите сайты, представленные ниже:

* CSS: Current Work
* CSS3.info
* Mozilla CSS Extensions
* The WebKit Open Source Project
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, Firefox, Google Chrome, Safari
Опубликовал Mysterious Master   Прочитано (раз): 6613   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2019    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031