Ние разглеждаме примера

Мисля, че е най-добре да се помисли само един пример. Да предположим, че имаме две от същия блок. В HTML маркиране предлагам да ги определя, както следва:

Всеки елемент е получил две стилистично клас. Защо го направи? Първият випуск ние определяме общите правила на външен вид, същите блокове, така че те да могат да бъдат описани заедно. В истински пример, това е вероятно да бъде по-различно. Също така, всеки член получи свой уникален стил клас. Той ще дойде по-удобно също.

Тези правила, ние сме регистрирани двата блока на същия вид: височина, ширина, размера на шрифта, отстъп, и зелен фон. Последният преход собственост на току-що е сравнително нова и е включена в CSS3 версия. Това показва, че забавянето, след което се извършва определени правила. В действителност, това е, което придава гладък вид.

В примера, аз поръчах втори, при поискване е възможно да се постави по-голяма или по-малко. Когато видите функция в действие, ще бъде в състояние да коригира стойността си.

Как да се прилагат в CSS3 избледняват?

След това има два варианта. Да кажем, че имаме нужда да се скрие, докато втория блок, а когато мишката върху първата непрекъснато го покажете. Най-често срещаният елемент се използва за скриване на дисплея правило: няма. но тя не дава точно това, което трябва - плавен вид. Element се появи рязко.

Ето защо, ние ще се процедира по различен начин. Вижте този код:

Ние използвахме друг CSS3-имот - непрозрачност. Той определя прозрачността на елемент, който регистрира от 0 (напълно прозрачен) до 1 (напълно непрозрачен) елемент.

Първо премахнете напълно втория блок от окото, което го прави прозрачен. Сега ние трябва да се уверим, че когато се появи на мишката на първия блок на втория гладко. За тази цел, това тук е интересна комбинация селектор:

Това само по себе си стилове промяна се случва, когато сочи, че първият блок, втора модифицирана директно. Благодарение на по-рано propiska прехода той ще не рязко, а постепенно, че и аз трябва. Чрез промяна на стойността на прехода може да се направи по-остър вид, или обратно допълнително го забави.

Но с такава единица скорост се оказва, когато преходът зададена стойност: 1 сек. Между другото, на стойност може да се настрои в милисекунди, ако искаш.

Поставете курсора на мишката върху блока

Използване на практика

Добре, където можете да дойде по-удобно в реалния живот? Така например, в развитието на падащото меню. Както можете да видите, използвайки CSS3 и избледняват елементи от днес могат да направят такава навигация, дори и без използването на скриптове. Това подобрява работата на вашия Интернет ресурс.

Можете да дадете още един пример. Например, за да задържите курсора на мишката върху формата "Контакт с нас" ще се появи в които можете да запишете вашето съобщение. Това е просто нещо, което току-що е изобретил, но в действителност може да се измисли много по-интересни неща, които използват плавни преходи.

Пример за - избледняват картината обяснения

Нека разгледаме един прост пример. Имам един образ и аз искам да я гладка олово обяснение направи. Ето една снимка:

Приложете го в кутия и се добави параграф, с обяснение:

Остава да добавим стиловете:

И това е, което се случи:

Направо на мотоциклет

Както можете да видите, блокът се появява с обяснение гладко благодарение на даден преходен имот. В първия пример в тази статия, аз се използва само един параметър на този имот - време. Този път параметър е по-:
преход: ляво 0.3s линеен;
отгоре - е името на собствеността, в която искате да приложите planvny на действие. В този случай, гладкостта ще се прилага само в началото и не повече от която и да е друга собственост.
0.3s - това е разбираемо, време на прехода.
линеен - прехвърляне функция. Това е отделна и не най-лесният темата. Между другото, все още има функции: лекота в, лекота, лесна навън. Опитайте го, със сигурност ще забележите малка разлика.

Това е много бавен напредък стана възможно благодарение на прехода имота. ако не беше, след надписа ще се появи внезапно, че вече не изглежда толкова готино. Но той се премества текста на параграф с помощта на абсолютно позициониране. На този и други видове позициониране можете да прочетете в тази статия.

Интересно от света на строителна площадка

Вие сте се абонирали. И ви благодаря.