Опубликовано автор в категориях Верстальщику.

webkit_css3

В комментариях одной из статей по CSS3 меня спросили: «В каких браузерах возможно реализовать CSS3 свойства?». И здесь можно было бы ответить, что на сегодняшний день многие функции CSS3 можно реализовать в Firefox, Konqueror, Opera или Safari/Webkit. Однако, в каждом браузере поддержка CSS3 на данный момент существует не на 100% процентов, и набор свойств может отличатся в зависимости от браузера. Так в каких же браузерах и как реализована поддержка CSS3?

Чтобы ответить на этот вопрос, мы обратимся к самим создателям браузеров. В сегодняшнем посте мы начнем с рассмотрения возможностей реализации CSS3 в браузере Safari, а соответственно и других браузерах которые используют последние версии движка WebKit. Ниже представлен перевод официального описания возможностей CSS3 от разработчиков Safari. Итак, приступим…

Вы можете вывести на качественно новый уровень ваши веб-проекты, используя передовые возможности CSS3 в Safari и WebKit. Уточним, WebKit — это движек рендеринга, который используется в браузере Safari на Mac OS X, Windows и OS iPhone.

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

Префикс -webkit который будет использоваться в этой статье, указывает какому типу браузера соответствует CSS правило, но данный префикс не является стандартом W3C, то есть CSS с таким префиксом не пройдет валидацию на соответствие CSS2.1. Например, свойство box-shadow является частью разрабатываемого CSS3 стандарта. И для браузеров на основе Mozilla используется префикс -moz, чтобы определить его именно для данного браузера.

Простое создание теней

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

1
2
<img src="megan.jpg"
	style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;">

Свойство transform поворачивает картинку, а свойство box-shadow собственно добавляет тень позади изображения. Вы можете изменить размер вращения или параметры тени, просто изменяя параметры в CSS.

Попробуйте, и вы уведите повернутое изображение, как показано в примере ниже.

imgrot

Рисунок 1: Вращение изображения и создание тени используя CSS3.

В примере CSS прописан через style инлайном, но вы можете вынести правило через класс в отельный файл стилей.

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

Roll Over Pop Outs — появление изображения на наведение курсора

Следующий пример показывает реакцию изображения на наведение курсора мыши. Для этого используется псевдокласс hover и свойства изменения масштаба. Ниже приведен CSS примера:

1
2
3
4
5
<style>
	img { -webkit-transform: scale(0.5); }
	img:hover { -webkit-transform: scale(1); }
</style>
<img src="megan.jpg" />

При наведении курсора на изображение, оно появляется и становится больше, как это показано ниже.

expando2

Рисунок 2. Изображение после наведения курсора

Если убрать курсор, то оно снова уменьшится.

expando1

Рисунок 3. Изображение перед наведением курсора

Как вы видите, вы можете добиться этого эффекта с помощью всего лишь нескольких строк CSS.

Анимация изображения на наведение курсора

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

1
2
3
4
5
6
7
8
9
 <style type="text/css">
	div.swapper img { -webkit-transition: opacity 1s ease-in-out; }
	img.img1, div.swapper:hover img.img2 { opacity: 1.0; }
	div.swapper:hover img.img1, img.img2 { opacity: 0; }
</style>
<div class="swapper">
	<img class="img1" style="position: absolute;" src="megan.jpg">
	<img class="img2" src="megan2.jpg">
</div>

Здесь свойство transition используется для обозначения всех параметров перехода. Первый параметр определяет вид анимации, второй определяет время, а третий определяет функцию перехода. ease-in-out является лишь одной из функций перехода, которые есть в вашем распоряжении. Вы можете также назначить линейные изменения, ease in, ease out, или более сложную cubic Bezier (куб Безье) трансформацию.

Вы можете поэкспериментировать с этими эффектами наводя курсор на картинку, вы получите эффекты, как показано на рисунке ниже.

expando1

Рисунок 4. Действие над объектом на наведение курсора с эффектом затухания. Но на картинке это показать сложно

Представьте себе: переходы с затуханием без использования JavaScript!

Макеты в несколько колонок с помощью CSS

Получение колонок на веб-страницах, используя чистый CSS вместо HTML таблиц. С того времени как CSS3 свойства для создания колонок реализованы в Safari и WebKit, вы можете четко определить число столбцов и расстояние между ними, чтобы точно отформатировать свой макет. Посмотрите на CSS в код ниже.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
	#columns {
	-webkit-column-count: 3;
	-webkit-column-gap: 25px;
	-moz-column-count: 3;
	-moz-column-gap: 25px;
	column-count: 3;
	column-gap: 25px;
	}
</style>
<div id="columns">
	<p>Column A</p>
	<p>Column B</p>
	<p>Column C</p>
</div>

Этот код определяет, что HTML в блоке с классом .columns должен быть представлен в трех колонках. Каждый параграф в собственной колонке.

Этот код также иллюстрирует соответствующий страхующий механизм, который используется когда применяются СSS свойства, которые еще не являются частью W3C стандарта. Этот код определяет column-count и column-gap свойства, как с префиксом -webkit и -moz, так и без них. Это означает, что этот код будет работать в Safari и WebKit, а также в Mozilla браузерах, которые поддерживают эти свойства, и будет продолжать работать после того, как CSS3 стандарты будут приняты, и потребность в префиксах отпадет.

columns

Рисунок 5. Простая реализация нескольких колонок

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

Закругленные углы с CSS

Закругленные углы зачастую проблематично реализовать на HTML-страницах, так как они обычно делаются с использованием небольших изображений для каждого уголка и их последующим позиционированием или укладкой, что может вызвать проблемы рендеринга. Свойство border-radius в CSS3 поддерживается WebKit, и позволяет легко создавать закругленные углы всего лишь несколькими строками CSS. Этот метод проиллюстрирован ниже.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
	#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px;
		text-align:center; background:#eee; }
</style>
<body>
<div id="boxes">
<div style="-webkit-border-radius:15px;">
	All sides
</div>
<div style="-webkit-border-bottom-left-radius:15px;-webkit-border-top-right-radius:15px;">
	Opposite corners
</div>
<div style="-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;">
	Top
</div>
<div style="-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;">
	Side
</div>
</div>

Стили разметки определяют, что все блоки (div) внутри контейнера с классом .boxes должны иметь одинаковый бордер, отступы, ширину, фон и так далее. Далее каждому из отдельных блоков инлайн стилем прописаны разные радиусы для бордера. Вы сможете увидеть результат ниже.

boxes

Рисунок 6. Закругленные углы с помощью CSS

В первом блоке border-radius задан для всех углов. Во втором блоке он установлен для правого верхнего и левого нижнего углов. Третий блок выведен в виде таба с закруглением только верхних углов. И у последнего блока закруглены только правые нижний и верхний углы.

Новые виды управления в формах

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

1
2
3
4
<input type="range" style="-webkit-appearance:slider-horizontal;"><br/><br/>
<button style="-webkit-appearance:button;width:200px;height:30px;">gradient button</button><br/><br/>
<button style="-webkit-appearance:push-button;width:200px;">aqua button</button><br/><br/>
<input type="text" style="-webkit-appearance:searchfield;" value="kitten"></input><br/>

Вы можете увидеть иллюстрации этих элементов контроля ниже.

appearance

Рисунок 7. Некоторые новые типы элементов контроля имеющиеся в WebKit

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

Простой бокс-слайдер

Заключительный пример, простой pop-out блок, который использует некоторые визуальные эффекты доступные в WebKit. CSS и JavaScript код для этого примера приведены ниже.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style>
#box1 {
	z-index: 100;
	position:absolute;
	top:5px; left:5px;
	width:100px;
	height:250px;
	padding:5px;
	-webkit-border-radius:10px;
	border: 2px solid black;
	background: #dddddd;
	z-index: 200;
}
#slider {
	z-index: 100;
	position:absolute;
	top:30px; left:5px;
	height:200px;
	width:90px;
	padding-top:10px;
	padding-left:15px;
	-webkit-border-radius:10px;
	border: 1px solid black;
	background: #eeeeee;
	-webkit-transition: -webkit-transform 0.5s ease-in;
}
</style>
<script>
function popout() {
	document.getElementById('slider').style.webkitTransform = 'translate(105px,0)';
}
</script>

Есть родительский бокс и бокс-слайдер, который находится под ним. Свойство transition бокса-слайдера определяет, что преобразования должны занимать пол секунды и использовать ease-in функцию тайминга. JavaScript триггеры определяют параметры слайдера, когда пользователь нажимает на ссылку. Это означает, что анимация применяется лишь после того, как пользователь выполняет действия — нажатие на ссылку «Popout».

HTML код для этого примера приведен ниже.

1
2
3
4
5
6
<div id="slider">
	Slider<br/>Content
</div>
<div id="box1">
	<a href="javascript:popout();">Popout</a>
</div>

Вы можете поиграть с этим примером, как показано на рисунке ниже.

slideout1

Рисунок 8. Слайдер до выпадания бокса

Если вы нажмете на ссылку «Popout», то появится сам блок-слайдер.

slideout2

Рисунок 9. Слайдер после того, как он появляется

Большая часть функциональности здесь осуществляется с помощью CSS, и только запускается JavaScript.

P.S.

Для гика интересные usb гаджеты — как воздух!

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

4 комментария к записи “CSS3 рецепты для WebKit”

  1. Антон

    Простой бокс-слайдер

    Вот ещё способ, без ява-скрипта
    #popout:target{
    left:100px;
    -webkit-transition:left .5s;
    }

    Ответить
  2. Vitalij

    Dear, you put the link to article whence have borrowed this material. By the way in the original of article there are links to a demo examples, and at you are not present. Badly another’s work to give out for the .
    Put the link!!!

    Ответить
    • hiway

      С радостью. Но, если мне не изменяет память то этот материал ничто иное, как описание новых свойств, поддерживаемых WebKit, взят непосредственно с оф.сайта разработчиков. Нигде на сайте не было упоминания об обязательном указании активной ссылки. Более того материал был переведен и отредактирован с английского с авторскими правками и стилистикой.

      Ответить

Оставить комментарий

  • (не будет показан)