5 Crossbrowser Modern CSS3 решения, Gradient, Shadow, Rotate, Transparency, Invert

Здравей скъпи читателю!

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

crossbrowser

Прозрачност

Прозрачността е доста изтъркана тема за дизайнер на оформление, но все пак ви напомням, че за всички нормални (модерни) браузъри правилото за прозрачност изглежда така:

Стойността се задава в диапазона от 0 до 1.

За Internet Explorer 7 правилото за прозрачност изглежда така:

За Internet Explorer 8 правилото за прозрачност изглежда така:

За браузъри IE7-8 стойността на прозрачност е зададена между 0 и 100.

Shadow е друг страхотен инструмент, който творците (дизайнери) използват в своите оформления и искам да кажа, че изглежда страхотно. Въпреки това, нека се върнем към дизайнерите на оформление, които се отегчават от дизайна, но искат да работят. За да създадете сянка в арсенала на CSS3 има магическо правило box-shadow, то има 5 параметъра:

  • X смяна
  • y-изместване
  • размазване
  • разтягане
  • цвят

и синтаксисът на това правило е както следва:

Може да се използва и като заместител на CSS правилото за граница, което според мен е много по-добро и като плюс не влияе на ширината на елемента, към който се прилага границата:

За модерни браузъри, но не актуализирани (остарели, така да се каже), трябва да се използват префикси на доставчика на браузъра:

За браузъри IE7 и IE8 трябва да се използват филтри, а филтрите в сянка имат следните опции:

  • Цвят на сянката - Цвят
  • Shadow direction (angle) - Посока
  • Плътност (дебелина) на сянката - Сила
  • Радиус на замъгляване— PixelRadius
  • Непрозрачност на сенките - ShadowOpacity

За IE7 правилото за сянка е зададено по следния начин:

За IE8 правилото за сянка е зададено по следния начин:

Но както винаги се случва с браузърите Internet Explorer, има недостатъци, и то значителни, особено в IE8: ако към даден елемент се приложи сянка, ефектът на курсора не работи върху неговите дъщерни (вложени) елементи. Нос, това може да се направи чрез добавяне на празен вложен елемент, позициониран абсолютно, заемащ цялата площ на елемента и прилагайки сянка към него за IE8. Всичко е възможно, трябва само малко въображение)

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

Като цяло синтаксисът за внедряване на ротация е:

За IE7 трябва да се използва следният матричен филтър:

За IE8 правилата за ротация са:

За да стане всичко ясно, ще кажа, че стойностите M11, M12, M21, M22 са косинусите на ъгъла, с който искате да завъртите елемента. Това не са всички забележки (хехе), трябва да се има предвид, че IE7 и IE8 се въртят по свой собствен начин, не зачитат позицията на елемента, следователно, за точност на оформлението с оформлението, трябва да зададете позиционирането на елемента (относително) и да изберете желаната позиция, като използвате стойностите отгоре, отляво, отдолу, отдясно.

линеен градиент

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

По принцип няма нищо сложно с градиента и всичко е красиво. Що се отнася до браузърите на Internet Explorer, надявам се, че сте забелязали параметъра GradientType - това е посоката на градиента, ако стойността е 0, градиентът върви отгоре надолу, а ако стойността е 1, тогава отляво надясно, това е цялата тайна.

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

Цветно изображение до черно-бяло

Еха! Спомням си времената, когато нямаше CSS3 и за такива трикове трябваше да използвам jQuery скриптове, за да имплементирам такова нещо, а скриптовете са предимно сървърни, тоест инсталира се локален сървър, там се създава проект и вече правиш оформление в проекта, за да видиш, че всичко върви гладко и скриптът работи. Много, много добре е, че сега имаме CSS3 в арсенала и неговото филтърно правило, което ви позволява да обръщате изображения без излишни движения и доста бързо. Между другото, Internet Explorer поддържа infersia на изображения, според мен, от IE 5.5.

И така, следната част от кода преобразувацветно изображение в черно и бяло с помощта на CSS:

И ако добавите ефект на задържане, при който се извършва обратната операция, изглежда много впечатляващо!

Можете да наблюдавате резултата от нашите действия, като кликнете върху бутона „Демо“ по-долу и съответно чрез щракване върху „Източник“ можете да изтеглите изходните кодове (те ще ви бъдат полезни, тъй като иматпо-пълен списък с кодове за дадените примери):

Заключение

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