10 Цреативе Тецхникуес Усинг ЦСС3 Бок Схадов

Видели смо огроман број напредака у ЦСС3 веб развоју током само неколико протеклих година. Популарни сајтови широм Интернета почели су да укључују многе јединствене стилове као што су заобљени углови и медијски упити који одговарају на мобилне уређаје. Али што је још важније, ово је отворило врата креативним интерфејсима који ће бити прототиповани за неколико минута.

У овом чланку желим да поделим 10 исечака кодова који се односе на бриљантне ЦСС3 дизајн кутије. Објаснићу како ради код и како можете имплементирати сваку кутију у вашу веб локацију.

Сви ови стилови се приписују великом дизајнерском утицају са других популарних сајтова. Ово је одличан пример како тренутни веб програмери граде утицајне трендове за будућност веб дизајна.

1. Фикед Топ Тоолбар

Румунски сервис за друштвене медије Трилулилу користи плутајућу горњу траку са алаткама око читавог веб сајта. Ово се може брзо креирати помоћу а позиција: фиксна; на било којем горњем бар елементу. Али ова додатна сенка у кутији узима ефекат на потпуно нови ниво.

#баннер поситион: фикед; хеигхт: 60пк; ширина: 100%; топ: 0; лево: 0; бордер-топ: 5пк солид # а1цб2ф; бацкгроунд: #ффф; -моз-бок-схадов: 0пк 3пк 0пк ргба (0, 0, 0, 0.16); -вебкит-бок-схадов: 0пк 3пк 0пк ргба (0, 0, 0, 0.16); бок-схадов: 0пк 3пк 0пк ргба (0, 0, 0, 0.16); з-индекс: 999999;  #баннер х1 лине-хеигхт: 60пк;  

Приметићете да је својство бок-схадов заправо постављено са прилично једноставном комбинацијом вредности. Сенка ће пасти испод кутије и замаглити се за 3пк са обе стране.

Можемо користити ргба () метод за наношење мале непрозирности на сенку, тако да се елемент не појављује превише таман. То је суптилни додатак који ће сигурно привући пажњу вашег посетиоца.

• Демо

2. Суб-Навигатион Дропдовн

Ево још једног креативног метода сенке које се примењује на скаларни падајући мени. Сличан ефекат се може видети на Предузетнику док лебдите изнад сваке од главних навигационих веза. Ово је дефинитивно мало компликованије за конфигурирање, али вриједно стрпљења.

#бар дисплаи: блоцк; хеигхт: 45пк; позадина: # 22385а; паддинг-топ: 5пк; маргин-боттом: 150пк; позиција: релативна;  #бар ул маргин: 0пк 15пк; фамилиа фонтов: Цандара, Цалибри, "Сегое УИ", Сегое, Ариал, санс-сериф;  #бар ул ли бацкгроунд: # 22385а; дисплеј блок; фонт-сизе: 1.2ем; позиција: релативна; флоат: лефт;  #бар ул ли а дисплаи: блоцк; цолор: # ффффф7; лине-хеигхт: 45пк; фонт-веигхт: болд; паддинг: 0пк 10пк; тект-децоратион: ноне; з-индекс: 9999;  #бар ул ли а: ховер, #бар ул ли а.селецтед цолор: # 365977; бацкгроунд: #ффф; бордер-топ-лефт-радиус: 3пк; бордер-топ-ригхт-радиус: 3пк; -вебкит-бордер-топ-лефт-радиус: 3пк; -вебкит-бордер-топ-ригхт-радиус: 3пк; -моз-бордер-радиус-топлефт: 3пк; -моз-бордер-радиус-топригхт: 3пк;  #бар ул .субнав дисплаи: блоцк; лево: 14пк; топ: 48пк; з-индекс: -1; видтх: 500пк; позиција: апсолутна; хеигхт: 90пк; бордер: 1пк солид # едф0ф3; бордер-топ: 0; паддинг: 10пк 10пк 10пк; оверфлов: хидден; -моз-бордер-радиус-боттомлефт: 3пк; -моз-бордер-радиус-боттомлефт: 3пк; -вебкит-бордер-боттом-лефт-радиус: 3пк; -вебкит-бордер-боттом-ригхт-радиус: 3пк; бордер-боттом-ригхт-радиус: 3пк; бордер-боттом-ригхт-радиус: 3пк; -моз-бок-схадов: 0пк 2пк 7пк ргба (0,0,0,0,25); -вебкит-бок-схадов: 0пк 2пк 7пк ргба (0,0,0,0,25); бок-схадов: 0пк 2пк 7пк ргба (0,0,0,0,25); -мс-филтер: "прогид: ДКСИмагеТрансформ.Мицрософт.Схадов (Стренгтх = 3, Дирецтион = 180, Цолор =" # 333333 ")"; филтер: прогид: ДКСИмагеТрансформ.Мицрософт.Схадов (Стренгтх = 3, Дирецтион = 180, Цолор = "# 333333");  

Нав линкови могу бити стилизовани тако да мењају боју када су изабрани или на мишу. Додајем и неке заобљене границе на линкове и преко падајућег менија. Ово даје бољи осећај него тврде ивице. Такође добро користим -мс-филтер и филтер својства која су искључиво власничка за Интернет Екплорер.

Ако подесите комплетан навигациони систем, моћи ћете да промените поставку приказа на ниједну и да сакријете мени када се страница учита. Затим користећи неки јКуери можете циљати .ховер () догађај и приказати субнав бар са ажурираним садржајем.

• Демо

3. Глосси Схадов Буттон

Ово је вероватно један од мојих омиљених стилова за креирање само због тога колико се динамички појављује на страници. Ако не можете рећи, ово је мало плаво дугме на почетној страници ИоуТубе-а након што сте се први пут пријавили.

блуес цолор: #ффф; видтх: 190пк; хеигхт: 35пк; курсор: показивач; фамилија фонтова: Ариал, Тахома, санс-сериф; фонт-сизе: 1.0ем; фонт-веигхт: болд; -моз-бордер-радиус: 2пк; -вебкит-бордер-радиус: 2пк; бордер-радиус: 2пк; бордер-видтх: 1пк; бордер-цолор: # 0053а6 # 0053а6 # 000; бацкгроунд-цолор: # 6891е7; бацкгроунд-имаге: -моз-линеар-градиент (топ, # 4495е7 0, # 0053а6 100%); бацкгроунд-имаге: -мс-линеар-градиент (топ, # 4495е7 0, # 0053а6 100%); бацкгроунд-имаге: -о-линеарно-градиент (топ, # 4495е7 0, # 0053а6 100%); бацкгроунд-имаге: -вебкит-градијент (линеарни, леви врх, леви дно, боја-стоп (0, # 4495е7), боја-стоп (100%, # 0053а6)); бацкгроунд-имаге: -вебкит-линеар-градиент (топ, # 4495е7 0, # 0053а6 100%); бацкгроунд-имаге: линеарни градијент (до дна, # 4495е7 0, # 0053а6 100%); текст-сенка: 1пк 1пк 0 ргба (0, 0, 0, .6); -моз-бок-схадов: инсет 0 1пк 0 ргба (256, 256, 256, .35); -мс-бок-схадов: инсет 0 1пк 0 ргба (256, 256, 256, .35); -вебкит-бок-схадов: инсет 0 1пк 0 ргба (256, 256, 256, .35); бок-схадов: инсет 0 1пк 0 ргба (256, 256, 256, .35); филтер: прогид: ДКСИмагеТрансформ.Мицрософт.Градиент (ГрадиентТипе = 0, СтартЦолорСтр = # 4495е7, ЕндЦолорСтр = # 0053а6);  .блуес: ховер бордер-цолор: # 002д59 # 002д59 # 000; -моз-бок-схадов: инсет 0 1пк 0 ргба (256, 256, 256, 0.55), 1пк 1пк 3пк ргба (0, 0, 0, 0.25); -мс-бок-схадов: инсет 0 1пк 0 ргба (256, 256, 256, 0.55), 1пк 1пк 3пк ргба (0, 0, 0, 0.25); -вебкит-бок-схадов: инсет 0 1пк 0 ргба (256, 256, 256, 0.55), 1пк 1пк 3пк ргба (0, 0, 0, 0.25); бок-схадов: инсет 0 1пк 0 ргба (256, 256, 256, 0.55), 1пк 1пк 3пк ргба (0, 0, 0, .25); филтер: прогид: ДКСИмагеТрансформ.Мицрософт.Градиент (ГрадиентТипе = 0, СтартЦолорСтр = # 3а8цдф, ЕндЦолорСтр = # 0053а6); бацкгроунд-имаге: -моз-линеар-градиент (топ, # 3а8цдф 0, # 0053а6 100%); бацкгроунд-имаге: -мс-линеар-градиент (топ, # 3а8цдф 0, # 0053а6 100%); бацкгроунд-имаге: -о-линеарно-градиент (топ, # 3а8цдф 0, # 0053а6 100%); бацкгроунд-имаге: -вебкит-градијент (линеарни, леви врх, леви дно, боја-стоп (0, # 3а8цдф), боја-стоп (100%, # 0053а6)); бацкгроунд-имаге: -вебкит-линеар-градиент (топ, # 3а8цдф 0, # 0053а6 100%); бацкгроунд-имаге: линеарни градијент (до дна, # 3а8цдф 0, # 0053а6 100%);  .блуес: ацтиве бордер-цолор: # 000 # 002д59 # 002д59; -моз-бок-схадов: инсет 0пк 3пк ргба (0,0,0,0,2), 0 1пк 0 #ффф; -мс-бок-схадов: инсет 0пк 3пк ргба (0,0,0,0,2), 0 1пк 0 #ффф; -вебкит-бок-схадов: инсет 0пк 3пк ргба (0,0,0,0,2), 0 1пк 0 #ффф; бок-схадов: инсет 0пк 3пк ргба (0,0,0,0,2), 0 1пк 0 #ффф; филтер: прогид: ДКСИмагеТрансформ.Мицрософт.Градиент (ГрадиентТипе = 0, СтартЦолорСтр = # 005аб4, ЕндЦолорСтр = # 175еа6); бацкгроунд-имаге: -моз-линеар-градиент (топ, # 005аб4 0, # 175еа6 100%); бацкгроунд-имаге: -мс-линеар-градиент (топ, # 005аб4 0, # 175еа6 100%); бацкгроунд-имаге: -о-линеарно-градиент (топ, # 005аб4 0, # 175еа6 100%); бацкгроунд-имаге: -вебкит-градијент (линеарни, леви врх, леви дно, боја-стоп (0, # 005аб4), боја-стоп (100%, # 175еа6)); бацкгроунд-имаге: -вебкит-линеар-градиент (топ, # 005аб4 0, # 175еа6 100%); бацкгроунд-имаге: линеарни градијент (до дна, # 005аб4 0, # 175еа6 100%);  

Читав код дугмета је много за погледати, али ми покушавамо да подржи што више претраживача. Постоје текстуалне сенке и сенке са пратећом подршком за МС Интернет Екплорер 7+. Такође постављамо позадинска слика својство са ЦСС3 градијентима преко великог броја префикса специфичних за произвођача.

Али ако волите овај стил дизајна онда Ховер и активне државе ће такође привући вашу пажњу. У основи ажурирамо границу како бисмо укључили неке сенке док притискате, док ажурирате позадину у позадини да би се приказала тамнија.

Будући да на тастеру нема слика, можете ажурирати хексадецималне вредности и претворити их у практично било коју шему боја.

• Демо

4. Нотифицатионс Флиоут Мену

Нисам велики корисник Фацебоока, али сам приметио неке УИ технике из њихових редизајна. Овај мени се може упоредити са вашим обавештењима или захтевима пријатеља који се појављују на почетној страници.

.флиоут ширина: 310пк; маргин-топ: 10пк; фонт-сизе: 11пк; позиција: релативна; фамилија фонтова: 'Луцида Гранде', Тахома, Вердана, Ариал, санс-сериф; боја позадине: бела; паддинг: 9пк 11пк; бацкгроунд: ргба (255, 255, 255, 0.9); бордер: 1пк солид # ц5ц5ц5; -вебкит-бок-схадов: 0 3пк 8пк ргба (0, 0, 0, .25); -моз-бок-схадов: 0 3пк 8пк ргба (0, 0, 0, .25); бок-схадов: 0 3пк 8пк ргба (0, 0, 0, .25); -вебкит-бордер-радиус: 3пк; -моз-бордер-радиус: 3пк; бордер-радиус: 3пк;  .флиоут #тип бацкгроунд-имаге: урл ('имагес / тип.пнг'); позадина-понављање: нема понављања; бацкгроунд-сизе: ауто; хеигхт: 11пк; позиција: апсолутна; топ: -11пк; лево: 25пк; видтх: 20пк;  .флиоут х2 тект-трансформ: велика слова; цолор: # 666; фонт-сизе: 1.2ем; паддинг-боттом: 5пк; маргин-боттом: 12пк; бордер-боттом: 1пк солид #дцдбда;  .флиоут п паддинг-боттом: 25пк; фонт-сизе: 1.1ем; цолор: # 222;  

Овде нема много новог кода за савијање. Користим малу .Савет класа са елементом интерног спана да бисте додали троугао тоолтип-а. Могуће је креирати чисте ЦСС3 троуглове, али овај метод није лак, као што можете замислити. Ако вам је драже овај метод, можда је вредно скупити нешто заједно. Али својства ротације ЦСС3 нису подржана свуда; у међувремену слике не захтевају никакву резервну методу.

• Демо

5. Аппле Паге Враппер

Има толико импресивних ЦСС3 сјенки које можете наћи на званичном веб сајту компаније Аппле. Овај пример испод је мали контејнер са неколико колона. Када погледате Апплеов изглед, уочићете да су многе њихове странице сачињене од бројних кутија за омотаче.

.апплеврап ширина: 100%; дисплеј блок; хеигхт: 150пк; позадина: бела; бордер: 1пк солид; бордер-цолор: # е5е5е5 #дбдбдб # д2д2д2; -вебкит-бордер-радиус: 4пк; -моз-бордер-радиус: 4пк; бордер-радиус: 4пк; -вебкит-бок-схадов: ргба (0, 0, 0.3) 0 1пк 3пк; -моз-бок-схадов: ргба (0,0,0,0,3) 0 1пк 3пк; бок-схадов: ргба (0, 0, 0, 0, 0) 0 1пк 3пк;  .апплеврап .цол флоат: лево; бок-сизинг: гранични-бок; видтх: 250пк; хеигхт: 150пк; паддинг: 16пк 7пк 6пк 22пк; фонт: 12пк / 18пк "Луцида Гранде", "Луцида Санс Уницоде", Хелветица, Ариал, Вердана, санс-сериф; цолор: # 343434; граница-десно: 1пк солид #дадада;  

Могли бисте саставити сличну страницу подељену по садржајним кутијама различите ширине и висине. Иако сам у овај демо ставио неколико колона, то није потребна техника форматирања. Кутија за сенку ће најбоље пристајати на белој / сивој позадини. Али мислим да би приказивање било које боје било прилично добро.

• Демо

6. Аппле Цонтент Бок

Овај други стил садржаја на Апплеовој веб страници се углавном користи за дизајн колона. То су првенствено на дну странице које приказују понуде и друге сродне информације. То је потпуно другачији стил дизајна са сјенилом кутије које се приказује изнутра одозго на доле.

.апплебок видтх: ауто; хеигхт: 85пк; бок-сизинг: гранични-бок; бацкгроунд: # ф5ф5ф5; паддинг: 20пк 20пк 10пк; маргина: 10пк 0 20пк; бордер: 1пк солид #ццц; бордер-радиус: 4пк; -вебкит-бордер-радиус: 4пк; -моз-бордер-радиус: 4пк; -о-бордер-радиус: 4пк; -вебкит-бок-схадов: инсет 0пк 1пк 1пк ргба (0, 0, 0, .3); -моз-бок-схадов: инсет 0пк 1пк 1пк ргба (0, 0, 0, .3); бок-схадов: инсет 0пк 1пк 1пк ргба (0, 0, 0, .3);  .апплебок .цол ширина: 140пк; флоат: лефт; маргин: 0 0 0 30пк;  

Мислим да овај код не би требало да буде превише тежак за праћење и копирање на други див контејнер. Једина сјена коју користимо је да користи инсет са ргба алфа-транспарентним кодовима боја. Тако да, иако је сенка пада чиста црна, приказујемо само око 30% непрозирности.

• Демо

7. Истакнути линкови

Ово је вероватно мој омиљени стил сенке из Аппле-овог тренутног сајта. Требало би да нађете стил демоа ове технике на иЦлоуд страници са низом плутајућих кутија за повезивање.

.апплефеатуре висина: 150пк; маргин: 8пк; вертикално поравнавање: врх; дисплеј: инлине-блоцк;  .апплефеатуре а дисплаи: блоцк; ширина: 168пк; хеигхт: 140пк; бордер: 1пк солид #ццц; цолор: # 333; тект-децоратион: ноне; фонт-веигхт: болд; лине-хеигхт: 1.3ем; бацкгроунд: # ф7ф7ф7; -вебкит-бок-схадов: инсет 0 1пк 2пк ргба (0, 0, 0, .3); -моз-бок-схадов: инсет 0 1пк 2пк ргба (0, 0, .3); бок-схадов: инсет 0 1пк 2пк ргба (0, 0, 0, .3); -вебкит-бордер-радиус: 4пк; -моз-бордер-радиус: 4пк; бордер-радиус: 4пк;  .апплефеатуре а: ховер бацкгроунд: #фафафа; бацкгроунд: -вебкит-градиент (линеарно, 0% 0%, 0% 100%, од (#ффф), до (# ф7ф7ф7)); бацкгроунд: -моз-линеар-градиент (100% 100% 90дег, # ф7ф7ф7, #ффф); -вебкит-бок-схадов: инсет 0 1пк 2пк ргба (0,0,0, .3); -моз-бок-схадов: инсет 0пк 2пк ргба (0,0,0, .3); бок-схадов: инсет 0пк 2пк ргба (0,0,0, .3); -вебкит-бордер-радиус: 4пк; -моз-бордер-радиус: 4пк; бордер-радиус: 4пк;  .апплефеатуре а имг дисплаи: блоцк; маргин: 26пк ауто 4пк;  .апплефеатуре а х4 дисплаи: блоцк; видтх: 160пк; фонт-сизе: 1.3ем; фамилија фонтова: Ариал, Тахома, санс-сериф; цолор: # 646464; тект-алигн: центар;  

Ове истакнуте везе постављене су на фиксну ширину и садрже различиту икону и приказани текст. Пример компаније Аппле користи сличну сенку као што смо видели у претходном оквиру за садржај. Међутим сада се цела кутија може активирати као веза који укључује оба :лебдети и : ацтиве државе. Са овом кутијом за повезивање постоји велика флексибилност и требали бисте покушати играти са изворним кодом.

Могуће је скратити висину / ширину и створити много мању листу линкова. То може бити скуп поглавља или страница у чланку, или можете направити подмени ограничен иконама линкова. Искрено, то је велики сет нових ЦСС3 техника које показују колико снаге имате као веб дизајнер.

• Демо

8. Уоквирене слике

Додао сам сиву позадину овом примјеру тако да можете јасније видјети стилове кутије сјена. Овај оквир је сличан приказаним сликама на вордпресс.цом осим што сам додао мало више дубине изворном коду.

.впфраме бацкгроунд: #ффф; бордер-радиус: 2пк; -вебкит-бордер-радиус: 2пк; -моз-бордер-радиус: 2пк; паддинг: 8пк; -вебкит-бок-схадов: 1пк 2пк 1пк # д1д1д1; -моз-бок-схадов: 1пк 2пк 1пк # д1д1д1; бок-схадов: 1пк 2пк 1пк # д1д1д1;  

Пошто су слике добиле малу подлогу на обе стране, овај оквир се појављује као велика бела граница. Увијек можете ажурирати боју позадине, или чак додати малу вањску границу да бисте одвојили слику од позадине. Али овај прилично поједностављен скуп стилова може се маневрисати у разне технике сјенила кутије. Играјте се са кодом и погледајте како можете побољшати дизајн слика на својој веб локацији.

• Демо

9. Светлећа поља за унос

Ову идеју сам добио након што сам неколико пута посјетио страницу за пријаву на Пинтерест. Њихови анимирани стилови заиста приказују неке елоквентне примјере вишеструких сјенила унутарњег оквира, како извана тако и уметнутих.

.формврап дисплаи: блоцк; маргин-боттом: 15пк;  .формврап лабел дисплаи: инлине-блоцк; видтх: 80пк; фонт-сизе: 11пк; фонт-веигхт: болд; цолор: # 444; фамилија фонтова: Ариал, Тахома, санс-сериф;  .формврап .схадовфиелд поситион: релативе; видтх: 250пк; фонт-сизе: 17пк; фамилија фонтова: "Хелветица Неуе", Ариал, санс-сериф; фонт-веигхт: нормал; бацкгроунд: # ф7ф8ф8; боја: # 7ц7ц7ц; лине-хеигхт: 1.4; паддинг: 6пк 12пк; Оутлине: ноне; транзиција: све 0.2с лакоће-оут-оут; -вебкит-транситион: све 0.2с олакшавају-у-оут 0с; -моз-транситион: све 0.2с олакшавају-у-оут 0с; бордер: 1пк солид # ад9ц9ц; бордер-радиус: 6пк 6пк 6пк 6пк; бок-схадов: 0 1пк ргба (34, 25, 25, 0.2) инсет, 0 1пк #ффф;  .формврап .схадовфиелд: фоцус бордер-цолор: # 930; бацкгроунд: #ффф; цолор: # 5д5д5д; бок-схадов: инсет 0 1пк ргба (34, 25, 25, 0.2), 0 1пк ргба (255, 255, 255, 0.6), 0 0 7пк ргба (235, 82, 82, 0.5); -моз-бок-схадов: инсет 0 1пк ргба (34, 25, 25, 0.2), 0 1пк ргба (255, 255, 255, 0.6), 0 0 7пк ргба (235, 82, 82, 0.5); -вебкит-бок-схадов: инсет 0 1пк ргба (34, 25, 25, 0.2), 0 1пк ргба (255, 255, 255, 0.6), 0 0 7пк ргба (235, 82, 82, 0.5);  

Иако су почетни стилови врло атрактивни, привлачи ме ефекте прелаза док се фокусирате на свако поље за унос. Можете да их стављате између њих и видите тренутну разлику у толико много својстава. Спољна светлећа кутија сенке се примењује заједно са ажурираном сенком. Алсо тхе Боја текста постаје светлија када се фокусирате на одређени улаз, а затим се губи када се дефокусирате.

Чак и копирање преко једног од ових ефеката увелико би побољшало корисничко искуство у вашим пољима обрасца. Будите сигурни да не идете предалеко до тачке у којој су ваши обрасци једва употребљиви. Међутим, већина посетилаца ће уживати у пријатним естетским ефектима који такође подстичу интеракцију и даље укључивање у ваш сајт.

• Демо

10. Еластиц Схадов Буттонс

Ови јединствени тастери за сенке су стилизовани са спорим преласком током кретања и активних стања. Сличне примере можете пронаћи на Мозилла-иној почетној страници са њиховом великом “Преузмите Фирефок” дугме. Неки од бок-схадов својства заправо комбинују три различите сенке у једну команду.

.блу-бтн дисплаи: инлине-блоцк; -моз-бордер-радиус: .25ем; бордер-радиус: .25ем; -вебкит-бок-схадов: 0 2пк 0 0 ргба (0,0,0,0,1), инсет 0 -2пк 0 0 ргба (0,0,0,0,2); -моз-бок-схадов: 0 2пк 0 0 ргба (0,0,0,0,1), инсет 0 -2пк 0 0 ргба (0,0,0,0,2); бок-схадов: 0 2пк 0 0 ргба (0,0,0,0,1), инсет 0 -2пк 0 0 ргба (0,0,0,0,2); бацкгроунд-цолор: # 276195; бацкгроунд-имаге: -моз-линеар-градиент (# 3ц88цц, # 276195); бацкгроунд-имаге: -мс-линеар-градиент (# 3ц88цц, # 276195); бацкгроунд-имаге: -вебкит-градијент (линеарни, леви врх, леви дно, боја-стоп (0%, # 3ц88цц), боја-стоп (100%, # 276195)); бацкгроунд-имаге: -вебкит-лине-градиент (# 3ц88цц, # 276195); бацкгроунд-имаге: -о-линеарни градијент (# 3ц88цц, # 276195); филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = '# 3ц88цц', ендЦолорстр = '# 276195', ГрадиентТипе = 0); -мс-филтер: "прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = '# 3ц88цц', ендЦолорстр =" # 276195 ", ГрадиентТипе = 0)"; бацкгроунд-имаге: линеарни градијент (# 3ц88цц, # 276195); граница: 0; курсор: показивач; цолор: #ффф; тект-децоратион: ноне; тект-алигн: центар; фонт-сизе: 16пк; паддинг: 0пк 20пк; хеигхт: 40пк; висина линије: 40пк; мин-видтх: 100пк; текст-сенка: 0 1пк 0 ргба (0,0,0,0.35); фамилија фонтова: Ариал, Тахома, санс-сериф; -вебкит-транситион: сви линеарни .2с; -моз-транситион: сви линеарни .2с; -о-транзиција: сви линеарни .2с; -мс-транситион: сви линеарни .2с; транситион: алл линеар .2с .блу-бтн: ховер, .блу-бтн: фоцус -вебкит-бок-схадов: 0 2пк 0 0 ргба (0,0,0,0,1), инсет 0 -2пк 0 0 ргба (0,0,0,0.3), инсет 0 12пк 20пк 2пк # 3089д8; -моз-бок-схадов: 0 2пк 0 0 ргба (0,0,0,0,1), инсет 0 -2пк 0 0 ргба (0,0,0,0,3), инсет 0 12пк 20пк 2пк # 3089д8; бок-схадов: 0 2пк 0 0 ргба (0,0,0,0,1), инсет 0 -2пк 0 0 ргба (0,0,0,0,3), инсет 0 12пк 20пк 2пк # 3089д8;  .блу-бтн: ацтиве -вебкит-бок-схадов: инсет 0 2пк 0 0 ргба (0,0,0,0,2), инсет 0 12пк 20пк 6пк ргба (0,0,0,0,2), инсет 0 2пк 2пк ргба (0,0,0,0,3); -моз-бок-схадов: инсет 0 2пк 0 0 ргба (0,0,0,0,2), инсет 0 12пк 20пк 6пк ргба (0,0,0,0,2), инсет 0 0 2пк 2пк ргба (0,0, 0,0.3); бок-схадов: инсет 0 2пк 0 0 ргба (0,0,0,0,2), инсет 0 12пк 20пк 6пк ргба (0,0,0,0,2), инсет 0 0 2пк 2пк ргба (0,0,0,0,3 );  .грн-бтн дисплаи: инлине-блоцк; -моз-бордер-радиус: .25ем; бордер-радиус: .25ем; -вебкит-бок-схадов: 0 2пк 0 0 ргба (0,0,0,0,1), инсет 0 -2пк 0 0 ргба (0,0,0,0,2); -моз-бок-схадов: 0 2пк 0 0 ргба (0,0,0,0,1), инсет 0 -2пк 0 0 ргба (0,0,0,0,2); бок-схадов: 0 2пк 0 0 ргба (0,0,0,0,1), инсет 0 -2пк 0 0 ргба (0,0,0,0,2); бацкгроунд-цолор: # 659324; бацкгроунд-имаге: -моз-линеар-градиент (# 81бц2е, # 659324); бацкгроунд-имаге: -мс-линеар-градиент (# 81бц2е, # 659324); бацкгроунд-имаге: -вебкит-градијент (линеарни, леви врх, леви дно, боја-стоп (0%, # 81бц2е), стоп боја (100%, # 659324)); бацкгроунд-имаге: -вебкит-линеар-градиент (# 81бц2е, # 659324); бацкгроунд-имаге: -о-линеарни градијент (# 81бц2е, # 659324); филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = '# 81бц2е', ендЦолорстр = '# 659324', ГрадиентТипе = 0); -мс-филтер: "прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = '# 81бц2е', ендЦолорстр =" # 659324 ", ГрадиентТипе = 0)"; бацкгроунд-имаге: линеарни градијент (# 81бц2е, # 659324); граница: 0; курсор: показивач; цолор: #ффф; тект-децоратион: ноне; тект-алигн: центар; фонт-сизе: 16пк; паддинг: 0пк 20пк; хеигхт: 40пк; висина линије: 40пк; мин-видтх: 100пк; текст-сенка: 0 1пк 0 ргба (0,0,0,0.35); фамилија фонтова: Ариал, Тахома, санс-сериф; -вебкит-транситион: сви линеарни .2с; -моз-транситион: сви линеарни .2с; -о-транзиција: сви линеарни .2с; -мс-транситион: сви линеарни .2с; транзиција: сви линеарни .2с;  .грн-бтн: ховер, .грн-бтн: фоцус -вебкит-бок-схадов: 0 2пк 0 0 ргба (0,0,0,0,1), инсет 0 -2пк 0 0 ргба (0,0,0 , 0.3), инсет 0 12пк 20пк 2пк # 85ца26; -моз-бок-схадов: 0 2пк 0 0 ргба (0,0,0,0,1), инсет 0 -2пк 0 0 ргба (0,0,0,0,3), инсет 0 12пк 20пк 2пк # 85ца26; бок-схадов: 0 2пк 0 0 ргба (0,0,0,0,1), инсет 0 -2пк 0 0 ргба (0,0,0,0,3), инсет 0 12пк 20пк 2пк # 85ца26;  .грн-бтн: ацтиве -вебкит-бок-схадов: инсет 0 2пк 0 0 ргба (0,0,0,0,2), инсет 0 12пк 20пк 6пк ргба (0,0,0,0,2), инсет 0 2пк 2пк ргба (0,0,0,0,3); -моз-бок-схадов: инсет 0 2пк 0 0 ргба (0,0,0,0,2), инсет 0 12пк 20пк 6пк ргба (0,0,0,0,2), инсет 0 0 2пк 2пк ргба (0,0, 0,0.3); бок-схадов: инсет 0 2пк 0 0 ргба (0,0,0,0,2), инсет 0 12пк 20пк 6пк ргба (0,0,0,0,2), инсет 0 0 2пк 2пк ргба (0,0,0,0,3 );  

Користим потпуне прелазе за 200 милисекунди на стањима лебдења и активног тастера. Оно што је толико добро у овим стиловима је да их можете применити на скоро сваки елемент који се може кликнути. Дугмад, линкови за сидрење, елементи форме или било шта друго што мислите да је прикладно - иако би се ти стилови требали користити ријетко како не би преоптеретили ваш дизајн.

Типке попут ових често се најбоље чувају на исти начин на који их Мозилла користи. Прикачите ове стилове на свој блог где имате дугмад за фреебие довнлоад, или нешто слично. Корисници воле да комуницирају са јединственим интерфејсима и то се често преводи у много већи проценат за вашу процену кликова.

• Демо

Последње мисли

Надам се да можете извући неке велике лекције из ове колекције техника кутија у сенци. Постоји много различитих области на које можете да се усредсредите, укључујући форме, модалне кутије, дугмад, траке са алаткама, па чак и комплетне изгледе веб сајтова.

Слободно примените било који од ових ефеката сенки на делове сопствене веб локације. Постоји много других техника, али ова колекција је савршена за почетнике и напредне програмере. Такође, ако имате било какве сугестије или питања о чланку можете поделити са нама у области за дискусије у коментарима испод.