5 страхотни CSS3 ефекти, от които ще се виждате повече

реклама

CSS3 (комбиниран със силата на HTML5) бързо се поддържа от всички основни браузъри (четете - всичко освен Internet Explorer), така че аз мислех, че сега ще е подходящ момент да видите някои от готините CSS ефекти, които можем да постигнем, използвайки силата на вашия браузър и малко CSS код. Трябва да можете да видите всички ефекти, демонстрирани в тази статия, ако използвате най-новия браузър Chrome, Safari или Firefox.

Първо - Какво е CSS?

Ако четете тази статия, защото сте заинтригувани, но нямате представа какво означава CSS, нека ви обясня бързо. CSS е кодиращият език, използван за декориране на уеб страници. Това означава ° Сascading СTyle Сheet и всъщност просто добавя стил и усет към даден сайт. Уебсайтовете със сигурност са четими без CSS, но те са отвратителни, както всички уебсайтове бяха през 1995 година. Докато HTML файловете описват структурата и текстовото съдържание на дадена страница, CSS ги кара да се показват по начина, по който дизайнерът предвидени и определят всичко от оформлението на страницата, размера на текста и цветовете, а сега и редица фантастични ефекти с въвеждането от CSS3.

В миналото постигането на същия вид ефекти като описаните в тази статия би означавало изтегляне на обемисти CSS или още по-големи графики. Сега CSS може просто да опише на вашия браузър как би искал да изглежда страницата и браузърът ще се справи с обработката. Харесва ми да ви предам плановете да построите собствена къща, вместо да ви продавам цялата къща - това е значително по-евтино!

Заоблени ъгли

Кодът за заоблени ъгли е наистина лесен:

.box_round {-moz-граница-радиус: 20px; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / граничен радиус: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /}

Текстова сянка

Ето кода за някои текстови сенки:

.box_textshadow {text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / }

Наклоните

Ето кода за CSS градиентите:

.box_gradient {фон-цвят: # 3f9fe3; фон-изображение: -moz-линеен градиент (отгоре, # 3f9fe3, #white); / * FF3.6 * / фон: -moz-линеен градиент (отгоре, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-линеен градиент (отгоре, # 3f9fe3, #white); / * IE10 * / background-image: -o-линеен градиент (отгоре, # 3f9fe3, #white); / * Opera 11.10+ * / background-image: -webkit-gradient (линеен, ляв отгоре, ляв долен, от (# 3f9fe3), до (#white)); / * Saf4 +, Chrome * / background-image: -webkit-линеен градиент (отгоре, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / background-image: линеен градиент (отгоре, # 3f9fe3, #white); филтър: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# white'); / * IE6 – IE9 * / }

Завъртане

Тук кодът да завъртите нещо:

.box_rotate {-moz-трансформация: завъртане (7.5deg); / * FF3.5 + * / -o-трансформация: завъртане (7.5deg); / * Opera 10.5 * / -webkit-transform: завъртане (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: завъртане (7.5deg); / * IE9 * / трансформация: завъртане (7.5deg); филтър: progid: DXImageTransform. Microsoft. Матрица (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, sizingMethod = 'автоматично разширяване'); увеличение: 1; }

Анимация

Ще ви трябва код за преход като този към всеки елемент, който искате да промените. Ще трябва да използвате и някои псевдо CSS класове (като: задръжте курсора, за да промените всички свойства, които искате да анимирате, като цвят, размер или завъртане)

.box_transition {-moz-преход: всички 0.5s улесняване; / * FF4 + * / -o-преход: всички 0.5s улесняване; / * Opera 10.5+ * / -webkit-преход: всички 0.5-те улеснения; / * Saf3.2 +, Chrome * / -ms-преход: всички 0.5s улесняване; / * IE10? * / преход: всички 0.5s улесняване; } 

Несъвместимости на кръстосания браузър

Въпреки че повечето съвременни браузъри поддържат всички CSS3 по някакъв начин, някои от тях все още изискват малко по-различен код или хакове, за да може той да работи с конкретната им реализация на стандарта. В кода по-горе например ще видите много случаи на -moz- или -webkit- преди някои от CSS свойствата, които се отнасят до базирани на Mozilla или Webkit браузъри. Написването на тези допълнителни редове може да бъде болка, затова проверете css3 генератор да ги напиша за вас.

заключение

В мрежата ще получите много по-вълнуващо с новите CSS3 и HTML5 разширения. Разрешено е, че ще видим още един изблик на мигащ текст и високо съотношение на whiz-bang към реално съдържание (точно както направихме, когато анимираните GIF-та първо бяха „открити“), но в дългосрочен план ще се научим как да използваме инструментите на CSS3, за да направим по-интересна мрежа интерфейси. И ей, винаги можете да изключите всичко!

Ако сами сте дизайнер или уеб разработчик, просто не забравяйте, че CSS3 никога не трябва да бъде единствената възможност. Ако сайтът ви няма да функционира без CSS3, не сте го използвали правилно. CSS трябва да се използва за подобряване на практическата работа, а не на функционалността на програмата.