Ang CSS3 ay talagang panimulang upang lumikom ng momentum na may maraming ng mga utos na nakabalangkas sa ang CSS3 nagtatrabaho draft na suportado ng Firefox, Safari at Google Chrome. Naisip namin na kami ay magkasama ang ilan sa aming mga paborito. Bago natin umpisahan ang CSS3 utos ay nangangailangan ng browser tukoy na syntax para sa kanila upang gumana.

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

-Moz-border-radius:

At para sa Safari ang-WebKit-prefix, halimbawa :

-WebKit-border-radius:

1. Border radius

Ang radius ng command ng hangganan ng CSS3 ay lumilikha ng hubog sulok sa isang elemento. Sa halip ng paggamit ng 4 o higit pa sa mga imahe upang lumikha hubog sulok gamitin ang sumusunod na command:

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

/ * Para sa Safari at Google Chrome * /
-WebKit-border-radius: 20px;
}

2. Box anino

Anino ay maaaring ilapat sa mga elemento na gamit ang CSS3 anino command box. Ang anino ng kahon ay tumatanggap ng tatlong numerong halaga kasama ang isang kulay upang ilapat ito epekto. Ang mga numerong ito ay:

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

Sa karagdagan ng isang kulay na halaga kumpleto na ang anino ng:

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

/ * Para sa Safari at Google Chrome * /
-WebKit-box-anino: 5x 5px 5px # b6ebf7;

3. Transparency o RGBA

Transparency ay palaging mapandaya. Iba't ibang browser kasaysayan inilapat transparency gamit ang iba't ibang mga utos. Patuloy ang cross-browser na hindi pagkakatugma namin ang karagdagan ng bagong ari-arian ng CSS3 RGBA background, gayunpaman sa prinsipyo ng command na ito ay mas lohikal. Command ay binubuo ng 4 na mga halaga - ang una, ikalawa at ikatlong ay ang pula, berde at bughaw na mga halaga (0-255) na ayon sa pagkakasunud-sunod na sinundan ng alpha channel o transparency (0-1).

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

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

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

Kasamaang palad ang Internet Explorer ay ring pagtatangkang render ang command ng kulay ng background ngunit hindi maunawaan RGBA. Upang matiyak na ang kulay ng background ay ring itakda sa IE ng IE-lamang pataga ay kinakailangan. Sa sumusunod na halimbawa: huling-anak palsipikado na pili kung saan Internet Explorer ay hindi maunawaan ay ginamit upang ibukod ito.

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

4. Haligi

Ang kakayahang magdagdag ng mga haligi ay naidagdag na sa CSS3. Kaysa sa mga lumulutang na mga elemento sa loob ng lalagyan na maaari naming itakda ang hanay ng numero, lapad at patakaran:

/ * Para sa Mozilla Firefox * /
-Moz-haligi-count: 2;
-Moz-haligi-agwat sa: 20px;
-Moz-haligi-tuntunin: 1px solid # 6e8eb9;

/ * Para sa Safari at Google Chrome * /
-WebKit-haligi-count: 2;
-WebKit-haligi-agwat sa: 20px;
-WebKit-haligi-tuntunin: 1px solid # 6e8eb9;
}

5. Maramihang mga background mga imahe

Background imahe ay palaging mahigpit pagdating sa CSS dahil sa ang katunayan na maaari ka lamang mag-aplay ng isang imahe sa background bawat elemento. Ito ay hindi ang kaso sa CSS3 na nagpapahintulot sa maramihang mga imahe sa bawat elemento sa pamamagitan ng simpleng comma-separating kanila.

Upang maglagay ng isang imahe sa parehong kaliwa at kanan ng isang sangkap na maaari mong gamitin ang mga sumusunod na utos, na may isang maliit na styling:

padding: 0 20px;
}

Ang command na ito ay ay di-render sa pamamagitan ng Internet Explorer bilang hindi ito tanggapin ng 2 mga imahe background sa isang solong elemento. Isang ibukod ang lahat ng mga IE pataga ay kinakailangan.

# Box5 Blockquote {
/ * Para sa lahat ng mga browser, isang open quote * /
background: url (/ i / quotel.gif) 0 0 walang-ulitin;
padding: 0 20px;
}

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

6. Background gradients

CSS3 background gradients ay lubos na kakayahang umangkop at maaaring magamit upang lumikha ng mga kumplikadong pattern. Sa nito pinakasimpleng CSS guhit greydyent ay nagbibigay-daan sa greydyent na inilalapat sa isang elemento mula sa tuktok sa ilalim at kaliwa sa kanan.

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

Safari ay gumagamit ng isang mas intuitive ngunit mas nababaluktot diskarte na gamit ang mga kulay halaga stop. Isang halimbawa ng tiyak na code ng Safari sumusunod (tandaan ang linear ay kasama sa mga bracket sa halip ng sa labas):

# Box8 {
background:-WebKit-greydyent (linear, pakaliwa ibaba, kaliwa itaas, kulay-stop (0, # b6ebf7), kulay-stop (0.20, # fff));
}

7. Pag-ikot

CSS3 ay nagpapahintulot din sa pag-ikot ng mga elemento na gamit ang transform command, na may ang iikot degrees sa pagtanggap ng ari-arian bilang isang parameter.

<code> # box9 {
-Moz-transform: paikutin (2deg);
-WebKit-transform: paikutin (2deg);
} </ Code>

8. Guhit-balangkas

Outilines ay kasama sa ang mga detalye CSS3 at payagan ang parehong isang hangganan at isang balangkas na inilapat sa isang solong elemento .

Ang balangkas ari-arian ay kapareho ng command hangganan. Ang karagdagang offset ari-arian ay gayunpaman ay nagpapahintulot sa hangganan ang ililipat pa sa loob o sa labas ng elemento.

Na file sa ilalim ng: CSS ng admin