CSS-scáth: conas a dhéanamh

Gan dorchadas nach bhfuil aon solas gan scáth aon fhoirm. Fiú bhun-a dhéanamh-suas uirlis do mhná ar a dtugtar "an scáth." Más mian leat áilleacht a thabhairt do do leathanaigh, ní mór duit a chur ar an bhéim ceart - Cuir CSS-scáth áit a bhfuil sé ag teastáil.

Beidh an t-ábhar i láthair thíos cabhrú leat foghlaim conas a shuiteáil scáth nó íomhánna bloc ag baint úsáide as CSS-cód.

CSS-scáth. error

Iarbhír bosca-scáth, i gcás an bosca - bloc agus scáth - tá sé seo é féin scáth.

Cód scríofa i braces:

{Bosca-scáth: 11px 22px 33px 44px # 333333;}.

Insíonn Líne dúinn go bhfuil an t-aonad a leagtar a Caighdeán le ga picteilín scáth. Tá na sonraí decrypted mar seo a leanas:

• 11px - scáth fhritháireamh i gcomparáid leis an bloc ar an ais X (luach deimhneach (20px) Beidh aistriú chuig an scáth ceart, diúltach (-37px) - ar an taobh clé);
• 22px - displacements scáth maidir leis an Y-ais an bhloic (luach deimhneach (5px) mar thoradh ar athrú ar an scáth síos diúltach (-17px) - suas);
• 33px - an paraiméadar Doiléirigh, dá airde an uimhir, an níos láidre an éifeacht;
• 44px - an ga an scáileanna, agus go díreach i gcomhréir;
• # 333333 - an dath, atá péinteáilte sa scáth.

Is iad na trí paraiméadair seo caite roghnach agus is féidir a fhágáil ar lár go simplí sa téad, .i {bosca-scáth: 10px 13px; } - .. Níl a leithéid de líne mícheart (Tá dath scáth comhionann leis an dath an téacs sa bhloc).

Dá bhrí sin, tá Shadows chruthú ar na leathanaigh ar do shuíomh nach deacracht, ach tá go leor éifeachtaí deas ag lorg féidir leat a chruthú! Déan do leanbh uathúil, inimitable, toisc go bhfuil an dearadh tábhachtach, gach mion, gach mion. Anseo, is cosúil, aon rud speisialta, ach tá sé i bhfad níos suimiúla agus níos tarraingtí.

Smaoinigh ar roinnt samplaí léiritheacha, tá sé cosúil le scáth CSS-bloc i gcomhréir leis an códú:

1. {Bosca-scáth: 25px 25px;} - CSS-scáth fhritháireamh aiseanna 25 pixel.
2. {Bosca-scáth: 25px 25px 10px;} - aiseanna CSS-scáth fhritháireamh 25 pixel agus imill blurring 10 pixel.
3. {Bosca-scáth: 25px 25px 10px 5px;} - CSS-scáth fhritháireamh aiseanna 25 picteilíni, imill Doiléirigh 10 pixel agus ga réamhshocraithe 5 pixel
4. {Bosca-scáth: 25px 25px 10px 5px # 9e9e9e;} - CSS-scáth fhritháireamh aiseanna 25 picteilíni, imill Doiléirigh 10 picteilíni, a shonrú de gha de 5 pixel agus dath.

titim scáth

Chun a chruthú go bhfuil a shades níos áille, galánta agus bunaidh éifeachtaí éagsúla. Is féidir leat a dhéanamh ar an scáth istigh. Tá sé go leor cód a shonrú pharaiméadair "inset", cur síos breise ar na paraiméadair a théann mar is gnách:

{Bosca-scáth: inset 4px 2px 6px # 9e9e9e;}.

Is féidir a chur faoi an mbloc cúpla scáthanna le paraiméadair go hiomlán difriúil sa chód, tá siad (na scáthanna) liostaithe scartha le camóga:

{Bosca-scáth: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

pictiúir scáth

Chomh maith leis na haonaid ar an suíomh seo a bheith cinnte pictiúir, grianghraif, cúlraí - gach ceann de na heilimintí freisin breathnú i bhfad níos suimiúla le scáthanna. Is féidir leat pictiúir a tharraingt sna eagarthóirí réamh-íomhá agus iad a ghreamú ar an leathanach cheana féin le scáthanna. Ach, sa chéad áit, nach bhfuil sé indéanta i gcónaí ar chúiseanna éagsúla, lena n-áirítear mar gheall ar an easpa scileanna i ag obair le grafaicí, an dara dul síos, aon ionramháil an íomhá seo a leanas leis: "meáchan", agus féadfaidh sé a leithéid de pictiúr mall go maith síos ualaí leathanach. Sa chás seo, is féidir leat a dhéanamh ar íomhánna CSS-scáth.

An réiteach is simplí agus syntactically ceart go dtí an bhfadhb seo - an cruthú an t-aonad, beidh an cúlra i do phictiúr Kotormo. Next, a dhéanann tú an scáth is gá chun an t-aonad agus tá siad ar taispeáint ar an cúlra-image:

• .block1 {bosca-scáth: inset 0 0 11px 9PX # 9e9e9e; width: 480px; airde: 360px; Cúlra: url (íomhánna / charlize_theron_2.jpg) 0 0 no-athuair;}

Sa sampla seo, a chruthú dúinn scáth istigh agus ní fhritháireamh ar na haiseanna, le ga Doiléirigh, dath sainithe, airde agus leithead an bhloic, agus an cúlra (cúlra) arna cheapadh kuartinku. Mar thoradh air sin, a fháil againn pictiúr ar an scáth istigh.

Aontaigh chun scáthanna baint úsáide as CSS-cód a chruthú - tá sé simplí go leor, ach spreagúil, agus is tábhachtaí - a fheidhmiú úsáideach.