Ավելացրեք շողշողացք, վեբ էջի տարրին շեշտադրելու համար
Ձեր վեբ էջի տարրին ավելացված փափուկ արտաքին գույնը ստիպում է տարրը առանձնացնել հեռուստադիտողին: Օգտագործեք CSS3 եւ HTML, կարեւոր օբյեկտի արտաքին ծայրերում փայլ կիրառելու համար: Արդյունքը նման է Photoshop- ում գտնվող օբյեկտին ավելացված արտաքին գույնի:
Նախ `ստեղծեք տարրը, որպեսզի շողացնեք
Գունավոր ազդեցությունները կարող են կատարվել ցանկացած գունային ֆոնի վրա, բայց նրանք լավ են նայում մութ ծայրերից, քանի որ այնուհետեւ փայլը կարծես ավելի շողացվող է: Այս կլորացված անկյունաքարով ուղղանկյուն տուփի օրինակով DIV տարրը տեղադրվում է մեկ այլ DIV տարրի մեջ `սեւ ֆոնի վրա: Արտաքին DIV- ը անհրաժեշտության դեպքում չի պահանջվում, սակայն դժվար է տեսնել սպիտակ ֆոնի վրա:
Տվեք ԴԻՎ-ն լուսավորության դաս :
Սահմանեք Element- ի չափը եւ գույնը
Ընտրեք այն տարրը, որը պատրաստվում եք շողալով փայլել, առաջ գնալ եւ ավելացնել այնպիսի ոճեր, որոնք ցանկանում եք դրան, ինչպիսիք են ֆոնային գույնը, չափը եւ տառատեսակները: Այս օրինակը կապույտ ուղղանկյուն է. չափը սահմանվում է 147px է 90px; եւ ֆոնային գույնը սահմանվում է # 1f5afe, թագավորական կապույտ: Այն ներառում է շերտ, տարրը սեւ կոնտեյների տարրի կեսին տեղադրելու համար:
<
Կլոր անկյունները
Ուղղանկյուն անկյուններով ուղղանկյուն ստեղծելը շատ հեշտ է CSS3- ով: Ավելացրեք սահմանի շառավղի ոճի գույքը ձեր լուսանկարի դասին: Պարզապես հիշեք, որ առավելագույն համատեղելիության համար օգտագործեք -webkit- եւ -moz- նախածանցերը:
-հրամանատար-սահման-շառավիղ `15px;
-մոզ-սահման-շառավիղ `15px;
սահմանագիծ `15px;
Ավելացնել փայլը արկղի ստվերով
Պայծառը ստեղծվում է արկղերի ստվերով: Քանի որ դուք ցանկանում եք, որ այն ամբողջ տարրը դառնա եւ ոչ թե նախագիծը, որը ստվերում նման մի կողմն է, դուք սահմանել եք հորիզոնական եւ ուղղահայաց երկարությունները 0px: Այս օրինակում, blur radius- ը սահմանվում է 15px եւ բլուրի տարածումը 5 պիքս է, բայց կարող եք սեղմել այդ պարամետրերը `որոշելու համար, թե որքան լայն եւ ցրված եք ուզում փայլը լինել: Գույնը rgb (255,255,190) դեղին գույն է, RGBa ալֆա թափանցիկությամբ, որը սահմանվում է մինչեւ 75% -ggba (255,255,190, .75): Ընտրեք գույնի գույն, որն աշխատում է ձեր նախագծի համար: Ինչպես անկյունները կլորացնելիս, մի մոռացեք օգտագործել լավագույն դիտարկիչի նախածանցերը (-webkit- եւ -moz-):
-հարցատուփ-ստվերային: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
Փորձեք փայլուն տուփ
Փորձեք փայլուն տուփը մեկ կամ ավելի բրաուզերների մեջ եւ կատարեք ցանկացած ճշգրտումներ, որոնք անհրաժեշտ են ձեր վեբ էջի համար աշխատող փայլի ազդեցությունը: