CSS3 рецепти для WebKit

1. Просте створення тіней
2. Roll Over Pop Outs - поява зображення на наведення курсору
3. Анімація зображення на наведення курсору
4. Макети в кілька колонок за допомогою CSS
5. Закруглені кути з CSS
6. Нові види управління в формах
7. Простий бокс-слайдер

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

Щоб відповісти на це питання, ми звернемося до самих творцям браузерів. У сьогоднішньому пості ми почнемо з розгляду можливостей реалізації CSS3 в браузері Safari, а відповідно і інших браузерах які використовують останні версії движка WebKit. Нижче представлений переклад офіційного опису можливостей CSS3 від розробників Safari. Отже, приступимо ...

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

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

Просте створення тіней

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

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

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

Спробуйте, і ви поведіть повернене зображення, як показано в прикладі нижче.

Малюнок 1: Обертання зображення і створення тіні використовуючи CSS3.

У прикладі CSS прописаний через style інлайн, але ви можете винести правило через клас в готельний файл стилів.

Раніше для того щоб зробити тінь вам потрібно було використовувати спеціальні хитрі прийоми. Тепер з CSS3 ви можете зробити це прямо в браузері, і це виглядає здорово.

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

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

<Style> img {-webkit-transform: scale (0.5); } Img: hover {-webkit-transform: scale (1); } </ Style> <img src = "megan.jpg" />

При наведенні курсора на зображення, воно з'являється і стає більше, як це показано нижче.

Малюнок 2. Зображення після наведення курсору

Якщо прибрати курсор, то воно знову зменшиться.

Малюнок 3. Зображення перед наведенням курсора

Як ви бачите, ви можете добитися цього ефекту за допомогою всього лише кількох рядків CSS.

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

Ще одним поширеним прийомом веб-розробників є зміна двох зображень, коли користувач наводити курсор на картинку. В цей прикладі, зображення не просто сменівают один одного, але пи цьому додається ефект загасання. Нижче наведено CSS прикладу:

<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 (куб Безьє) трансформацію.

Ви можете поекспериментувати з цими ефектами наводячи курсор на картинку, ви отримаєте ефекти, як показано на малюнку нижче.

Малюнок 4. Дія над об'єктом на наведення курсору з ефектом загасання. Але на зображенні це показати складно

Уявіть собі: переходи з загасанням без використання JavaScript!

Макети в кілька колонок за допомогою CSS

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

<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 стандарти будуть прийняті, і потреба в префіксах відпаде.

Малюнок 5. Проста реалізація кількох колонок

При такому підході, параграфи будуть показані один за іншим, якщо браузер не підтримує дане властивість. Як згадувалося раніше в цій статті, ці прийоми трохи інакше, але працюють в браузерах, які не підтримують ці властивості.

Закруглені кути з CSS

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

<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 повинні мати однаковий бордер, відступи, ширину, фон і так далі. Далі кожному з окремих блоків інлайн стилем прописані різні радіуси для бордера. Ви зможете побачити результат нижче.

Малюнок 6. Закруглені кути за допомогою CSS

У першому блоці border-radius заданий для всіх кутів. У другому блоці він встановлений для правого верхнього і лівого нижнього кутів. Третій блок виведено у вигляді таба з заокругленням тільки верхніх кутів. І у останнього блоку закруглені тільки праві нижній і верхній кути.

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

WebKit також дає цілий ряд нових елементів контролю для використання на веб-сторінках. Як приклад нижче представлені горизонтальний слайдер, деякі нові стилі кнопок і поле для пошуку схожі на те, що використовується в панелі інструментів Safari.

<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/>

Ви можете побачити ілюстрації цих елементів контролю нижче.

Малюнок 7. Деякі нові типи елементів контролю наявні в WebKit

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

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

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

<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 код для цього прикладу наведено нижче.

<Div id = "slider"> Slider <br/> Content </ div> <div id = "box1"> <a href="javascript:popout();"> Popout </a> </ div>

Ви можете пограти з цим прикладом, як показано на малюнку нижче.

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

Якщо ви натиснете на посилання «Popout», то з'явиться сам блок-слайдер.

Малюнок 9. Слайдер після того, як він з'являється

Велика частина функціональності тут здійснюється за допомогою CSS, і тільки запускається JavaScript.

PS

для гику цікаві usb гаджети - як повітря!

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