За да отговорим на този въпрос, ние се обръщаме към действителните създателите на браузъра. В днешната публикация ще започне, като погледнете в изпълнението на CSS3 функции в Safari, както и други браузъри, съответно, и се използва най-новата версия на WebKit двигателя. По-долу е превод на официалното описание на функциите, CSS3 от Safari разработчици. Нека да започнем ...
Вие може да донесе едно ново ниво на своите уеб проекти, които използват съвременни CSS3 функции в Safari и WebKit. Изяснете, WebKit - това dvizhek рендиране, който се използва в браузъра Safari за Mac OS X, Windows и OS iPhone.
Тъй като браузъри просто игнорират всички CSS свойства, които те не поддържат по-голямата част от следните препоръки няма да работи в други браузъри. Web страница, на които да се прилагат тези свойства, ще имате изключителен външен вид в Safari, но също така ще работи в други браузъри, но не и да изглежда толкова добре.
-webkit представка, която ще бъде използвана в тази статия показва какъв тип браузър е валиден CSS правило, но това не е префикс W3C стандарт, т.е. CSS с представката не минава проверка за съответствие CSS2.1. Например, бокс-сянка имот е част от вашата CSS3 развитие стандарт. И в продължение на тип браузъри използват -moz префикс. да го определят за този конкретен браузър.
Лесно създаване на сенки
За да започнете, нека да видим колко лесно е да добавите сянка и да е елемент на дадена уеб страница. Кодът по-долу създава образ, който е леко наклонена и хвърля сянка. И двата ефекта се добавят с помощта на CSS.
трансформиране на собствеността се превръща картината и бокс-сянка собственост всъщност е добавянето на сянка зад образа. Можете да промените размера на въртене или опции сянка, като просто променят настройките в CSS.
Опитайте и вие далеч; завъртяната снимка, както е показано в примера по-долу.
Фигура 1: Въртенето на изображението и създаването на сянката използване CSS3.
В CSS, примера създадена през стила на инлайн, но можете да направите по правило след първокласен хотел в стил файл.
По-рано, за да се направи сянката, ти трябваше да се използва специална торба с трикове. Сега, с CSS3, можете да го направите директно в браузъра, и изглежда страхотно.
Roll Over Поп Outs - появата на изображения върху кръжи
Следният пример показва отговора на изображението върху Задържането на курсора. Той използва псевдо Hover и мащабиране функции. По-долу е пример за CSS:
Когато задържите курсора на мишката върху снимката, изглежда, и става по-голяма, както е показано по-долу.
Фигура 2. изображението на висене
Ако премахнете мишката, тя ще намалее отново.
Фигура 3. Изображението преди позициониране на курсора
Както можете да видите, можете да постигнете този ефект с помощта само на няколко линии на CSS.
Анимация на изображения на висене
Друга често срещана техника на уеб разработчиците е да се промени двете изображения, когато потребителят витае на мишката върху снимката. В този пример, изображенията не са просто smenivayut един от друг, но това се прибавя пи демпферен ефект. По-долу е пример за CSS:
Тук преход имот се използва за обозначаване на всички параметри на прехода. Първият параметър определя типа на анимация, вторият определя времето и третият определя функцията на прехода. лекота в изчакване е само една от функциите на трансфер, които са на ваше разположение. Можете също така да зададете рампи, лекота в, лекота се, или по-сложен кубически Безие (Безие кубичен) трансформация.
Можете да експериментирате с тези ефекти, кръжащи над картината, можете да получите ефекта, както е показано на фигурата по-долу.
Фигура 4. Действие върху обекта на висене с демпферен ефект. Но картината е трудно да се покаже,
Оформления в няколко колони с CSS
Първи колони на уеб страници с помощта на чист CSS вместо HTML таблици. От този момент, тъй като свойствата на CSS3, за да създадете колони се изпълняват в WebKit и Safari, можете точно да определите броя на колоните, а разстоянието между тях точно да форматирате оформление. Погледнете в CSS кода по-долу.
Този код се посочва, че HTML в блока с .columns на класа трябва да бъде представена в три колони. Всяка точка в своя собствена колона.
Този код също илюстрира съответен механизъм за застраховане, която се използва, когато се използват CSS свойства, които все още не са част от W3C стандарт. Този код се посочва колона преброяване и колона на недостига свойства са с префикс -webkit и -moz. и без тях. Това означава, че този код ще работи в Safari и WebKit, както и в Mozilla браузъри, които поддържат тези функции, и ще продължи да работи по стандартите на CSS3 са приети, и вече не бивало представки.
Фигура 5. Обикновено изпълнението на няколко колони
С този подход, параграфи ще бъдат показани един след друг, ако браузърът не поддържа този имот. Както бе споменато по-рано в тази статия, техниката е малко по-различен, но работи в браузъри, които не поддържат тези функции.
Заоблени ъгли с CSS
Заоблени ъгли често са трудни за изпълнение в HTML-страници, тъй като те обикновено са направени с помощта на малка картинка за всяка област и последващото им позициониране или подреждане, което може да доведе до оказване проблеми. CSS3 Имотът граничен радиус поддържа в WebKit, и го прави лесно да се създаде заоблени ъгли, само с няколко линии на CSS. Този метод е илюстриран по-долу.
оформление стилове се определя, че всички блокове (Разделение) в рамките на контейнера с класа, трябва да имат едни и същи .boxes Border, разстоянието, ширината, фона и така нататък. Освен това, всеки един от отделните елементи на инлайн стил написани различни радиуси на границата. Можете да видите резултата по-долу.
Фигура 6. заоблени ъгли с CSS
В първия блок е определен граничен радиус за всички ъгли. Вторият блок е монтиран в горния десен ъгъл и долния ляв ъгъл. Третият блок показва под формата на раздела само с закръглени горни ъгли. И последният блок са закръглени с точните горните и долните ъгли.
Нови видове контрол във формите
WebKit също така предоставя редица нови елементи на контрол за използване на уеб страници. Като пример, тук е хоризонтален слайдер, някои нови стилове, за да намерят ключовете и областта, подобни на този, използван в лентата с инструменти на Safari.
Можете да видите на илюстрацията на контролните елементи по-долу.
Фигура 7. Някои нови видове контролни елементи са на разположение в WebKit
Обикновено плъзгача кутия
HTML код за този пример е показано по-долу.
Можете да играете с този пример, както е показано на фигурата по-долу.
Фигура 8. плъзгача докато той излиза по бокс
Ако кликнете върху линка «Отделяне», а след това той ще блокира плъзгача.
Фигура 9. плъзгача след изглежда
Те казват, спортната медицина е много полезна, особено ако прекарвате много време в kompyutera.stoimost на имот
Сходни публикации:
Свързани статии