• Artikulo Nakasulat
  • sa 2011/01/27
  • sa 12:08
  • sa pamamagitan ng admin

Nangungunang mga utos ng CSS3

CSS3 ay talagang simula upang lumikom momentum sa marami sa mga utos ng nakabalangkas sa CSS3 working draft na suportado ng Firefox, Safari at Google Chrome. Naisip naming pagsamahin ang ilan sa aming mga paborito. Bago kami makapagsimula nangangailangan ng mga utos ng CSS3 tiyak na syntax browser para sa mga ito upang gumana.

Para sa Mozilla Firefox kailangan naming gamitin ang-moz-prefix, halimbawa:

-Moz-border-radius:

At para sa Safari the-webkit-prefix, halimbawa:

-Webkit-border-radius:

1. Radius Border

Ang CSS3 radius hangganan command na lumilikha ng hindi tuwid na sulok sa isang elemento. Sa halip na gamitin 4 o higit pang mga larawan upang lumikha ng hubog sulok gamitin ang sumusunod na command:

Ang hubog sulok ng command hindi ipapakita sa Internet Explorer

border-radius

#box1 {
border: 1px solid #699;

/ * Para sa Mozilla Firefox * /
-Moz-border-radius: 20px;

/ * Para sa Safari & Google Chrome * /
-Webkit-border-radius: 20px;
}

2. Kahon ng anino

Isang anino maaaring ilapat sa mga elemento gamit ang command box CSS3 anino. Tinanggap ang kahon anino tatlong mga halaga ng pang-numero kasama ang isang kulay upang ilapat ang effect na ito. Ang mga numerong ito ay ang mga:

1. Distansya ng offset ng anino pahalang - Ang positibong halaga ay nangangahulugan na ang anino ay cast sa kanan at isang negatibong halaga sa kaliwa
2. Distansya ng vertical offset ng anino - Ang positibong halaga ay nangangahulugan na ang anino ay nagsumite sa ibaba at isang negatibong halaga sa itaas
3. Paano malabo nais mo ang anino

Gamit ang pagdaragdag ng isang halaga ng kulay ang anino ay kumpleto na:

box-shadow
#box2 {
/* Not mandatory for the box shadow effect */
border:1px solid #699;x

/ * Para sa Mozilla Firefox * /
-Moz-box-shadow: 5px 5px 5px # b6ebf7;

/ * Para sa Safari & Google Chrome * /
-Webkit-box-shadow: 5x 5px 5px # b6ebf7;

3. Transparency o RGBA

Transparency ay palagi nang naging nakakalito. Iba't ibang mga browser kasaysayan Inilapat transparency gamit ang iba't ibang mga utos. Ang pagpatuloy na ito hindi pagkakatugma sa cross-browser na mayroon kami ng pagdaragdag ng mga bagong CSS3 RGBA background ari-arian, gayunpaman sa prinsipyo ng command na ito ay mas lohikal. Utos ay binubuo ng 4 na mga halaga - ang una, ikalawa at ikatlong ay ang mga pula, berde at asul na mga halaga (0-255) ayon sa pagkakabanggit kasunod ang alpha channel o transparency (0-1).

Para sa command RGBA ang browser tukoy na prefix (-moz-,-webkit-) ay hindi kinakailangan:

# Box3 {
background-kulay: rgba (110, 142, 185, 0.5);
}

Ang background command na kulay ay nagdadagdag ng isang masarap na asul-abuhin na background sa 0.5 o 50% ng opacity sa mga browser na maunawaan ang ari-arian ng CSS3 RGBA.

Sa kasamaang palad ay magkakaroon din magtangkang Internet Explorer upang mag-render sa background utos kulay ngunit hindi maunawaan RGBA. Upang matiyak na ang kulay ng background ay naka-set din sa IE isang IE-lamang pataga ay kinakailangan. Sa mga sumusunod na halimbawa ang: psuedo-pili huling-anak na hindi maunawaan ang Internet Explorer ay ginagamit upang ibukod ito.

transparency


#box3 {
/* For all browsers */
background-color: #6e8eb9;
}

katawan: huling-anak # box3 {
/ * Ibukod ang lahat ng mga browser IE gamit ang: huling-anak * /
background-kulay: rgba (110, 142, 185, 0.5) mahalaga;!
}

4. Haligi

Ang kakayahang magdagdag ng mga haligi ay idinagdag sa CSS3. Kaysa sa mga lumulutang na mga elemento sa loob ng container maaari naming itakda ang numero ng haligi, lapad at panuntunan:

colums

#box4 {
/* Not mandatory for the column property */
border: 1px solid #699;

/ * Para sa Mozilla Firefox * /
-Moz-hanay pagbilang: 2;
-Moz-hanay-agwat sa: 20px;
-Moz-hanay-panuntunan: 1px solid # 6e8eb9;

/ * Para sa Safari & Google Chrome * /
-Webkit-hanay pagbilang: 2;
-Webkit-hanay-agwat sa: 20px;
-Webkit-hanay-panuntunan: 1px solid # 6e8eb9;
}

5. Maramihang mga larawan sa background

Koleksyon ng imahe ng background ay palaging mahigpit pagdating sa CSS dahil sa ang katunayan maaari ka lamang mag-apply sa isang imahe sa background sa bawat elemento. Ito ay hindi ang kaso sa CSS3 na nagpapahintulot sa maraming mga imahe sa bawat elemento sa pamamagitan ng simpleng pinaghihiwalay ng naghihiwalay sa kanila.

Upang maglagay ng isang imahe sa parehong kaliwa at kanan ng isang elemento maaari mong gamitin ang mga sumusunod na utos, na may kaunti sa istilo ng:

multiple

#box5 blockquote{
background:url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0;
border:1px solid #699;

padding: 0 20px;
}

Utos na ito ay di-render sa pamamagitan ng Internet Explorer bilang ito ay hindi tumatanggap 2 ng background sa mga imahe sa isang solong elemento. May naganap na ibukod ang lahat ng IE pataga ay kinakailangan.

# Box5 blockquote {
/ * Para sa lahat ng mga browser, tulad lamang ng isang bukas na quote * /
background: url (/ i / quotel.gif) 0 0 no-umuulit;
padding: 0 20px;
}

katawan: huling-anak # box5 blockquote {
/ * Ibukod ang lahat ng mga browser IE gamit ang: huling-anak * /
/ * Pagkatapos ng dalawang larawan * /
background: url (/ i / quotel.gif) no-umuulit 0 0, url (/ i / quoter.gif) walang-ulitin 100% 0;
}

6. Gradients Background

CSS3 background gradients ay lubos na kakayahang umangkop at maaaring magamit upang lumikha ng kumplikadong mga pattern. Sa nito pinakasimpleng ay nagbibigay-daan sa CSS linear gradient ng gradient na ilalapat sa isang elemento mula sa itaas hanggang sa ibaba at kaliwa hanggang kanan.

Ang halimbawa ng gradient ng CSS3 sa Mozilla Firefox Nalalapat mapusyaw na asul na gradient sa ilalim ng isang kahon para sa% 20 lamang ng taas ang mga kahon sa '

gradients

#box8 {
/* for Mozilla Firefox */
background: -moz-linear-gradient(bottom, #b6ebf7, #fff 20%);
}

Safari ay gumagamit ng isang mas intuitive ngunit mas may kakayahang umangkop na diskarte gamit ang stop mga halaga ng kulay. Ang isang halimbawa ng Safari tukoy na code mga sumusunod (tandaan ang mga linear ay kasama sa mga bracket sa halip ng sa labas):

# Box8 {
background:-webkit-gradient (linear, kaliwang ibaba, kaliwang tuktok, kulay-stop (0, # b6ebf7), kulay-stop (0.20, # fff));
}

7. Pag-ikot

Pinapayagan din ng CSS3 pag-ikot ng mga elemento gamit ang pagbabagong-anyo na utos, na may Paikutin ari-arian tumatanggap ng grado bilang isang parameter.
rotation

<code> # box9 {
-Moz-ibahin ang anyo: Paikutin (2deg);
-Webkit-ibahin ang anyo: Paikutin (2deg);
} </ Code>

8. Guhit-balangkas

Outilines ay kasama sa pagtutukoy ng CSS3 at payagan ang parehong mga border at isang balangkas upang ilapat sa isang solong elemento.

Ang balangkas ari-arian ay kapareho ng command na hangganan. Gayunpaman Pinapayagan ka ng mga karagdagang offset ari-arian ng hangganan upang mailipat ang karagdagang loob o sa labas ng mga elemento.
outlines
#box7 {
border: 1px solid #000;
outline: 1px solid #699;
outline-offset: -9px;
}

Maging palakaibigan, Ibahagi!

Kung tatangkilikin mo ang post na ito, siguraduhin mong mag-subscribe sa aking RSS feed !

I-promote sa Amin

  • Idagdag sa Mixx!
Ace Hosting Indya
Walang pamagat na Dokumento

5 Mga Puna

  1. Nice post ... panatilihin up ito

  2. Magaling. Ko talagang tulad ng "anino Box" technique.Good trabaho.

  3. .... At fot ang Internet Explorer mayroon kang gamitin ang alinman-moz ni-webkit!!!!!

  4. Sa tingin ko Pag-ikot ng ari-arian ay ang pinakamahusay na nag-aalok ng CSS3, ito ay talagang gumawa kami ng isang bit mamahinga.

  5. Magandang .... gusto ko

Magsumite ng isang Puna

XHTML: Maaari mong gamitin ang mga tag na ito: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> < del DATETIME = ""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge