Mọ Bawo ni Lati Fi Imun Glowi kiakia ati ni irọrun Pẹlu CSS3

Fi isunju kun si oju-iwe ayelujara kan ti o wa fun itọkasi

Awọ mii ti o wa ni ita ti o fi kun si ipinnu kan lori oju-iwe ayelujara rẹ nfa idi lati wa jade si oluwo naa. Lo CSS3 ati HTML lati lo ina kan ni ayika awọn egbe ita ti ohun pataki kan. Ipa naa jẹ iru si itanna ti a fi kun si ohun kan ni Photoshop.

Akọkọ Ṣẹda Ẹran lati ṣagbe

Awọn ohun elo ti a le ṣe lori eyikeyi awọ awọ, ṣugbọn wọn wo julọ lori awọn abulẹ dudu nitori nigbana ni didan dabi lati ṣafihan siwaju sii. Ninu apẹẹrẹ apoti apẹka-igun-ọna yii, a gbe ohun kan ti o jẹ DIV sinu ori keji DIV pẹlu ipilẹ dudu. DIV ita gbangba ko ṣe pataki fun imole, ṣugbọn o ṣoro lati ri iṣan lori itanna funfun.

Fun DIV kan kilasi ti omọ:


Ṣeto iwọn ati Awọ ti Ẹran

Lẹhin ti o yan asayan ti iwọ yoo lọ si itọlẹ pẹlu imole, tẹsiwaju ki o fi awọn eyikeyi awọn awọ ti o fẹ si rẹ, bii awọ-awọ, iwọn, ati awọn lẹta. Apẹẹrẹ yii jẹ apẹrẹ onigun bulu kan; iwọn ti ṣeto si 147px nipasẹ 90px; ati awọ ti o wa lẹhin ti ṣeto si # 1f5afe, blue blue. O ni aaye kan lati gbe ohun ti o wa ni arin alakan dudu.


.glow {
apa: auto;
iwọn: 147px;
iga: 90px;
awọ-awọ: # 1f5afe;
}

Yika awọn igun

Ṣiṣẹda onigun mẹta pẹlu awọn igun ti a nika jẹ rọrun pẹlu CSS3. Fi awọn ohun-ini ti o wa-aala-aala-ilẹ kun si kilasi gbigbọn rẹ. O kan ranti lati lo awọn apẹrẹ--iwia-ati-moz-prefixes fun ibamu julọ.

-aaya-aala-aala-ala-bandi: 15px;
-moz-border-radius: 15px;
radius-aala: 15px;

Fi Glow Pẹlu Aṣayan Apoti

Ilẹ tikararẹ ni a ṣẹda pẹlu ojiji apoti kan. Nitori pe o fẹ ki o ṣe gbogbo nkan ti o yẹ ki o ma ṣe lati ṣe apẹrẹ ni igbẹ kan gẹgẹbi ojiji, o ṣeto awọn ipari ati ipari ni 0px. Ni apẹẹrẹ yii, a ṣeto iwọn ila-oorun si 15px ati itankale blur ni 5px, ṣugbọn o le fi opin si pẹlu awọn eto naa lati pinnu bi o ṣe yẹ ki o ṣe iyatọ ati pe o fẹ ki irun naa wa. Awọn awọ rgb (255,255,190) jẹ awọ awọ ofeefee pẹlu kikọ GPR RGBa ṣeto si 75 ogorun-rgba (255,255,190, .75). Yan awọ awọ ti o ṣiṣẹ julọ fun iṣẹ rẹ. Gẹgẹbi yika awọn igun naa, maṣe gbagbe lati lo awọn prefixes aṣàwákiri (-webkit- ati -moz-) fun ibamu julọ.

-iwu-apo-ibudo-aṣiṣe: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
apoti-ojiji: 0px 0px 15px 5px rgba (255, 255, 190, .75);

Ṣe idanwo Apoti Gigun

Ṣe idanwo apoti ti o ni itanna ninu ọkan tabi diẹ ẹ sii awọn aṣàwákiri ati ṣe awọn atunṣe ti o nilo lati fun ibanujẹ ti o ṣiṣẹ julọ fun oju-iwe ayelujara rẹ.