CSS-itzala: nola egin

Gabe iluntasuna ez dago argi gabe itzala no inprimakia. Nahiz eta oinarrizko makillajea izeneko emakumeen tresna "itzalean". edertasuna ekarri zure orriak nahi baduzu, eskuineko nabarmenduz jarri behar duzu - Gehitu CSS-itzal non behar da.

aurkezten materiala itzalpean nola instalatu edo irudiak blokeatu CSS-kodea erabiliz ikasten lagunduko dizu.

CSS-itzal. sintaxia

Egia esan box-itzala, non kutxa - bloke bat eta itzal - hau da, berez itzala.

Kode idatzia giltza:

{Box-itzala: 11px 22px 33px 44px # 333333;}.

Line esaten digu unitatea hori Standard gisa ezartzen itzal pixel erradioak batekin. Datuak honela desenkriptatu dago:

• 11px - itzal desplazamendu blokea erlatiboa X ardatzean (balio positiboak (20px) egingo eskuineko itzala, negatiboa (-37px) filmea - ezkerrera);
• 22px - itzalean bloke of Y ardatzean dagokionez (balio positiboak (5px) k aldea itzala behera negatiboa (-17px) aldaketa bat - arte) ekin desplazamenduak;
• 33px - lausotzea parametro hau, zenbaki handiagoa, indartsuagoa eragina;
• 44px - itzalak erradioa, eta zuzenean proportzionala;
• # 333333 - kolorea, hau da itzalean margotua.

Azken hiru parametroak aukerakoak dira eta besterik ez dira katean kendutako; hau {box-itzala: 10px 13px; } - .. lerro bat, esaterako, ez da zuzena (itzal kolorea testuaren kolorea blokean berdina).

Horrela, zure gunea orrietan itzalak sortzen ez zailtasun bat, baina asko polita ari ondorioak sor dezakezu da! Egin zure seme bakarra, errepikaezina, diseinua garrantzitsua delako, xehetasun guztietan, xehetasun guztiak. Hemen, badirudi, ezer berezirik, baina askoz ere gehiago interesgarri eta erakargarria da.

Demagun ilustratzailea adibide batzuk, itxura itzal CSS-bloke bat bezala kodetze arabera:

1. {Box-itzala: 25 px 25 px;} - CSS-itzal desplazamendu ardatzak 25 pixel.
2. {Box-itzala: 25 px 25 px 10px;} - CSS-itzal desplazamendu ardatzaren 25 pixel eta ertzak lausotzen 10 pixel da.
3. {Box-itzala: 25 px 25 px 10px 5px;} - CSS-itzal desplazamendu ardatzak 25 pixel, lausotzea ertzak 10 pixel eta aldez aurretik 5 pixel erradioan
4. {Box-itzala: 25 px 25 px 10px 5px # 9e9e9e;} - CSS-itzal desplazamendu ardatzak 25 pixel, lausotzea ertzak 10 pixel, 5 pixel eta kolore erradioan zehaztu.

itzal

sortzeko ederragoa, dotore eta original tonu bat efektu ezberdinak dituzte. barruko itzal egin dezakezu. nahikoa kodea "laburtutako", parametro azalpen gehiago parametroak zehazteko egingo ohi bezala joan da:

{Box-itzala: laburtutako 4 px 2px 6px # 9e9e9e;}.

Posible da blokea kodean parametro erabat ezberdinak dituzten itzalak batzuk, haiek (itzalak) KOTIZATUETARA komaz bereizita azpian jarri:

{Box-itzala: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50 px 40px 5px 10px # ffa500}.

itzal pictures

unitateen gain gunean izango da, zalantzarik irudiak, argazkiak, jatorri izan - elementu horiek guztiak, gainera, itxura askoz interesgarriagoa itzalak. pictures marraztu ditzakezu aurrez irudi editoreak eta itsatsi orri batean dagoeneko itzalak. Baina, lehenik eta behin, ez da beti posible, hainbat arrazoirengatik, trebetasun eza grafiko lan delako, bestetik, edozein irudiaren manipulazioa zion gehitu, "pisua", eta, besteak beste irudi bat ondo motelduko orria kargak barne. Kasu honetan, CSS-itzal irudiak egin dezakezu.

errazena eta sintaktikoki zuzena arazo honen konponbidea - unitatea sortzea, zure argazki atzealde Kotormo dira. Hurrengoa, unitatea beharrezko gerizpean egin duzu eta atzeko-irudiaren gainean erakusten dira:

• .block1 {box-itzala: laburtutako 0 0 11px 9px # 9e9e9e; zabalera: 480px; altuera: 360px; hondo: url (irudiak / charlize_theron_2.jpg) 0 0 no-errepikatu;}

Adibide honetan, ez ardatzen desplazamendu batekin barneko itzal bat sortzen dugu, lausotzea erradioak definitutako kolorea, altuera eta bloke zabalera, eta atzealdean (atzealde) izendatu kuartinku. Ondorioz, barruko itzal argazki bat lortuko dugu.

Ados itzalak CSS-kodea erabiliz sortzeko - Nahiko simple, oraindik zirraragarria da, eta garrantzitsuena - ariketa erabilgarria.