Diajar Kumaha mun Tambahkeun Balukar glow gancang jeung gampang Jeung CSS3

Tambahkeun glow a ka Unsur Page Web pikeun tekenan

A luar glow lemes ditambahkeun kana unsur dina kaca web Anjeun ngabalukarkeun unsur keur nangtung kaluar pikeun panuduh. Paké CSS3 na HTML panawaran glow a sabudeureun edges luar hiji barang penting. éfék kasebut sarupa hiji glow luar ditambahkeun kana hiji obyék dina Photoshop.

Mimitina Jieun Unsur ka glow

Glow épék bisa dilakukeun dina sagala tukang warna, tapi maranéhanana kasampak pangalusna dina backgrounds poék kusabab lajeng glow nu sigana shimmer langkung. Dina rounded-sudut ieu kotak rectangular Contona, unsur DIV ieu disimpen dina unsur DIV sejen ku tukang hideung. The DIV luar teu dipikabutuh pikeun glow, tapi éta teuas ningali glow nu dina tukang bodas.

Méré DIV hiji kelas di glow:


Nyetél Ukuran jeung Warna of Unsur nu

Saatos Anjeun milih unsur nu nuju bade embellish kalawan glow a, buka payun na nambahan wae gaya rék eta, kayaning warna latar, ukuranana, jeung fon. conto Ieu sagi opat biru; Ukuran nu disetel ka 147px ku 90px; jeung warna latar disetel ka # 1f5afe, a biru karajaan. Ieu ngawengku margin pikeun nempatkeun unsur di tengah unsur wadahna hideung.


.glow {
margin: otomatis; lebar
: 147px;
jangkungna: 90px;
tukang-warna: # 1f5afe;
}

Babak juru

Nyieun hiji sagi opat kalawan sudut rounded téh gampang jeung CSS3. Tambahkeun harta gaya wates-radius ka kelas glow Anjeun. Ngan apal ngagunakeun awalanna -webkit- na -moz- pikeun kasaluyuan pangluhurna.

-webkit-wates-radius: 15px;
-moz-wates-radius: 15px;
Wates-radius: 15px;

Nambah glow Sareng hiji Box KONGRES

The glow sorangan dijieun ku kotak kalangkang. Kusabab rék ka Halo sakabéh unsur teu proyek glow nu kaluar hiji sisi kawas kalangkang, Anjeun ngeset tebih horizontal sarta vertikal ka 0px. Dina conto ieu, radius Blur disetel ka 15px sarta sumebarna Blur geus 5px, tapi anjeun bisa rebab sareng setélan maranéhanana pikeun nangtukeun sabaraha lega tur diffuse rék glow ka jadi. Warna RGB (255,255,190) nyaéta warna konéng kalawan RGBa alfa transparansi disetel ka 75 persén-rgba (255,255,190, .75). Milih hiji warna glow anu hade pangalusna pikeun proyék Anjeun. Salaku kalawan rounding juru, ulah poho make émbohan browser (-webkit- na -moz-) pikeun kasaluyuan pangalusna.

-webkit-kotak-kalangkang: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-kotak-kalangkang: 0px 0px 15px 5px rgba (255, 255, 190, .75);
kotak-kalangkang: 0px 0px 15px 5px rgba (255, 255, 190, .75);

Nguji glowing Box

Nguji kotak glowing dina hiji atawa leuwih panyungsi na ngadamel sagala pangaluyuan diperlukeun pikeun masihan pangaruh glow anu hade pangalusna pikeun kaca web Anjeun.