Сегодня разработчики браузеров выпускают новые релизы очень часто, и с ними массово расширяется поддержка CSS3. Лидирующие позиции занимает Google Chrome, лучший браузер для того чтобы показать, что можно сделать с помощью современных технологий.
Admin
Но что еще более важно, так это то, что все больше и больше свойств CSS3 поддерживают все современные браузеры. Ниже я расскажу о некоторых из них.
Наверное, это свойство одно из самых популярных. Оно позволяет создавать вам закругленные углы для HTML-элементов, которые имеют границу или фон. Это свойство позволяет создавать не только круги, но даже эллипсы.
border-radius: 8px;
Радиус окружности устанавливается для всех четырех краев. Если указаны два значения, то первое означает верхний левый и нижний правый угол, а второе - правый верхний и левый нижний. С тремя установленными значениями первое отвечает за верхний левый угол, второе значение - за верхний правый и нижний левый, третье - за нижний правый. При указании всех четырех значений, они применяются к углам начиная от верхнего левого угла и далее по часовой стрелке.
border-radius: 8px / 13px;
При добавлении косой черты можно установить горизонтальные (первое значение) и вертикальные (второе значение) закругления углов отдельно. При двух разных значениях вы получите эллипс, а не круг.
border-radius поддерживается всеми современными браузерами. Для обеспечения совместимости со старыми версиями webkit-браузеров, рекомендуется дополнительно использовать префикс -webkit-.
Дополнительно:
Вероятно это свойство CSS3 является наиболее трудным для понимания. Оно может быть использовано для замены стандартной CSS-границы на изображение на основе одного файла. Свойство border при этом также должно быть указано, оно определяет ширину рамки. Оно может быть использовано двумя способами.
border-image: url(image.png) 1 round stretch;
Обязательным условием для использования border-image является указания изображения, которое будет заполнять собой четыре угла и четыре стороны. Картинка рамки должна состоять из девяти фрагментов, это четыре уголка, четыре стороны и центральная часть. При этом рисунок сторон должен быть повторяемым, это значит, что при стыковке двух таких рисунков между ними не было видно зазоров. Число после изображения указывает на размеры частей изображения в пикселах, задавая тем самым области деления. Сами единицы не пишутся, только число (1, а не 1px). Есть три значения, которые дают разный вид рамки: stretch - растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию, repeat - повторяет рисунок границы, round - повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.
border-image: url(image.png) 100% repeat;
Для браузеров Webkit также можно использовать целое изображение, чтобы нарисовать границу. В этом случае область должна быть установлена равной 100% или реальному размеру изображения. repeat означает, что изображение просто повторяется.
border-image поддерживается всеми современными браузерами, кроме Internet Explorer 9, однако использование целого изображения возможно только в Webkit-браузерах (Safari, Chrome, mobile), для них необходим -WebKit-префикс, Firefox требует префикс -moz-, а Opera - префикс -о-.
В прошлом была возможность установить только один файл изображения для фона элемента. В CSS3 можно задать несколько фоновых изображений для красивых графических эффектов. Они также могут быть смешаны с градиентами.
background: url(image1.png), url(image2.png), url(image3.png) #000;
Фоновые изображения как бы "сложены в стопку", где первое из них ближе всего к зрителю. Также применяются общие свойства background property . Если вы хотите установить цвет фона, вам нужно задать его после последнего фонового изображения, которые разделенны запятыми.
background: url(image1.png) right top no-repeat, url(image2.png) left bottom repeat-y, linear;
Здесь у нас есть одно фоновое изображение, которое выравнивается в верхнем правом углу, красный с синим градиент опускается сверху вниз и второе изображение, которое начинается в левом нижнем углу и повторяется по оси Y.
Несколько фоновых изображений поддерживается всеми современными браузерами.
Дополнительно:
В этом свойстве стандартный цвет RGB расширяется альфа-каналом, который устанавливает прозрачность цвета. Он может быть использован для установки полупрозрачного цвета фона элемента, для градиента, границы или текста.
color: rgba(98, 33, 129, 0.5);
В этом примере мы задали фиолетовый цвет с 50% непрозрачности. Первые три значения представляют красный, зеленый и синий цвета в диапазоне от 0 до 255. Последнее значение задает непрозрачность, где 0 - это полностью прозрачный и 1 - полностью непрозрачный (сплошной).
background-color: rgba(0, 0, 100%, 0.2);
Значения цвета также могут быть установлены в процентах. В этом случае значения красного и зеленого цвета установлены равные 0%, а синего равное 100%, в результате чего мы получим чистый синий цвет. Непрозрачность установлена равная 20%.
Формат rgba() поддерживается всеми современными браузерами.
Одно из моих любимых свойств. Свойство opacity определяет прозрачность элемента. Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон.
opacity: 0.7;
Прозрачность устанавливается в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный). В этом случае она установлена на 70% непрозрачности:
Свойство opacity поддерживается всеми современными браузерами.
linear-gradient – полезное свойство, которое экономит много времени. Градиенты - это плавные переходы от одного цвета к другому.
linear-gradient: (red, green 30%, blue);
Синтаксис довольно прост. Начальный цвет градиента красный, на 30% по оси градиента цвет зеленый и конечный цвет синий. Если нет процентного значения, то цветовой переход происходит в его естественном порядке, который в этом случае будет равен 50%. По умолчанию градиент проходит сверху вниз (top).
linear-gradient: (225deg, orange 20%, black);
Направление градиента можно изменять. Всего есть пять возможных вариантов направлений: top, bottom, left, right и center. При написании направления нужно использовать любые два значения. Первое значение это «откуда» начинается градиент, второе – «куда», в каком направлении, он распространяется. Если указано только одно значение, то второе будет center, по-умолчанию.
Градиенты на данный момент не поддерживаются Internet Explorer 9. Opera поддерживает его начиная с версии 11,10 (с префиксом -о-). Chrome использует -webkit- префикс для этого свойства, а Firefox соответственно -moz- префикс.
Дополнительно:
Это свойство используется для добавления тени к элементу. Значения для нескольких теней могут быть определены через запятую.
box-shadow: 8px 10px 5px #646464;
Первое значение представляет собой горизонтальное смещение тени. Положительное значение рисует тень вправо, отрицательное - влево. Второе значение устанавливает вертикальное смещение, где положительное значение рисует тень над элементом, а отрицательное значение - ниже элемента. Последнее значение отвечает за радиус размытия. Чем больше это число, тем светлее и больше получается тень. Если это значение не установлено, то тень получается с острыми краями. Цвет, в приведенном выше примере, имеет значение # 646464.
box-shadow: 5px 5px 8px 10px #646464 inset;
Необязательный четвертый параметр управляет распространением тени во всех направлениях. Отрицательное значение сокращает тень. Существует также необязательное ключевое слово inset, которое рисует тень внутри элемента.
box-shadow поддерживается всеми современными браузерами. Но Safari все еще нуждается в -webkit- префиксе, Firefox 3.6 использует -moz- префикс.
Дополнительно:
Для текста также может быть добавлена тень. Значения для нескольких теней задаются через запятую.
text-shadow: -2px -3px 5px #000;
Как и в box-shadow, первое значение обозначает горизонтальное смещение, где положительные значение рисует тень вправо. Второе значение представляет собой вертикальное смещение. Отрицательное значение рисует тень над текстом. Последнее численное значение устанавливает радиус размытия. Затем устанавливается цвет тени.
text-shadow поддерживается всеми современными браузерами, кроме Internet Explorer 9.
Дополнительно:
Переходы позволяют создавать более динамичные сайты. Это свойство доступно для многих CSS-свойств.
transition: background-color 1s;
В этом примере фоновый цвет элемента изменяется в течение 1 секунды. Если свойство не установлено, то, по умолчанию, переход осуществляется для всех свойств элемента, которые могут быть анимированны.
transition: color 0.7s 1s ease-in;
В этом примере цвет элемента изменяется за 0,7 секунды. Второе числовое значение представляет собой задержку после запуска анимации, в данном случае оно равно 1 секунде. Последнее значение - это функция времени, где ease-in расшифровывается как плавное ускорение в начале и нет замедления в конце. По умолчанию это свойство установлено как ease, что приводит к быстрому началу анимации и замедлению в конце. Это значение может быть также установлено как ease-out, ease-in-out или linear.
transition: width 3s, opacity 2s 3s ease-in;
Переходы для различных свойств могут быть объединены в одной записи. В этом примере ширина изменяется в течении 3 секунд, при этом непрозрачность длится 2 секунды, и начинается изменение только через 3 секунды.
transition не поддерживается Internet Explorer 9 и Firefox 3.6. Webkit-браузеры требуют -webkit- префикс, для Firefox 4+ необходим -moz- префикс, для Opera - префикс -о-.
Еще недавно недостаточная поддержка браузерами тормозила распространение CSS3. Особенно большим препятствием был Internet Explorer.
Но в последнее время ситуация существенно изменилась. Каждый современный браузер поддерживает широкий спектр свойств CSS3 и даже Internet Explorer "исправился" в 9-й версии. Кроме этого IE6 исчезает очень быстро, и даже IE7 становится все более и более редким браузером. Поэтому уже наступило то время, когда можно начать использовать CSS3 в своих проектах!
© 2008 - 2024 Webmasters.BY Все права защищены
Новый комментарий