Дадайце Glow да вэб-старонцы элемент для рол
Мяккае свячэнне звонку дадаецца да элемента на вэб-старонцы прыводзіць да таго элементу, каб вылучыцца на гледача. Выкарыстоўвайце CSS3 і HTML , каб прымяніць свячэнне вакол знешніх краёў важнага аб'екта. Эфект аналагічны знешняе свячэнне дадаецца да аб'екта ў Photoshop.
Спачатку стварыце элемент напальвацца
Эфекты святлення можна зрабіць на любы колер фону, але яны выглядаюць лепш на цёмным фоне, таму што тады свячэнне здаецца мігацець больш. У гэтым закругленымі кутамі, напрыклад прастакутная скрынка, DIV элемент змяшчаецца ў іншы DIV элемент з чорным фонам. Знешняя DIV не з'яўляецца неабходнай для святлення, але гэта цяжка, каб убачыць свячэнне на белым фоне.
Дайце Div з класам святлення:
Усталюйце памер і колер элемента
Пасля выбару элемента вы збіраецеся ўпрыгожыць з ззяннем, ісці наперад і дадаць любыя стылі , якія вы хочаце да яго, такія як колер фону, памер і шрыфты. Гэты прыклад з'яўляецца сінім прастакутнікам; памер усталёўваецца ў 147px ад 90 пікселяў; і колер фону усталёўваецца ў # 1f5afe, каралеўскі сіні колер. Яна ўключае ў сябе запас, каб змясціць элемент у сярэдзіне чорнага элемента кантэйнера.
<Стыль>
.glow {
маржа: аўто;
шырыня: 147px;
вышыня: 90px;
колер фону: # 1f5afe;
}
закругленне кутоў
Стварэнне прамавугольніка з закругленымі кутамі лёгка з дапамогай CSS3. Дадайце ўласцівасць стылю мяжы радыусу да класа святлення. Толькі не забудзьцеся выкарыстоўваць -webkit- і -moz- прэфіксы для забеспячэння максімальнай сумяшчальнасці.
-webkit-мяжы радыус: 15px;
-moz-мяжы радыус: 15px;
мяжы радыус: 15px;
Дадайце Glow З Box Shadow
Само свячэнне ствараецца з дапамогай скрынкі цені. Таму што вы хочаце, каб арэол усяго элемента, а не праецыраваць свячэнне ад аднаго боку, як цень, ўсталяваць гарызантальныя і вертыкальныя даўжыні, каб 0px. У гэтым прыкладзе радыус размыцця усталяваны ў 15px i распаўсюджванне размыцця 5px, але вы можаце гуляць з гэтымі наладамі, каб вызначыць, наколькі шырока і дыфузна вы хочаце свячэнне быць. Колеру RGB (255255190) уяўляе сабой жоўты колер з альфа-празрыстасцю Rgba, усталяваным на 75 адсоткаў (RGBA-255255190, .75). Вылучыце колер святлення, які працуе лепш для вашага праекта. Як і з акругленнем кутоў, не забывайце выкарыстоўваць прэфіксы браўзэраў (-webkit- і -moz-) для лепшай сумяшчальнасці.
-webkit-бокс-цень: 0px 0px 15px 5px RGBA (255, 255, 190, .75);
-moz-бокс-цень: 0px 0px 15px 5px RGBA (255, 255, 190, .75);
скрынка-цень: 0px 0px 15px 5px RGBA (255, 255, 190, .75);
Тэставанне святлівага Box
Праверце сьветлую скрынку ў адным або некалькіх браўзэрах і ўнесці неабходныя карэктывы, каб даць эфект святлення, які працуе лепш для вашага вэб-старонкі.