CSS3 është me të vërtetë duke filluar për të mbledhur me shumë vrullin e komandave të përshkruara në projekt CSS3 punës mbështetur nga Firefox, Safari dhe të Google Chrome. Ne menduam se do të vënë së bashku disa nga të preferuarat tonë. Para se të filloni CSS3 komandat kërkojnë sintaksë shfletues të veçantë për ta që të punojnë.

Për Mozilla Firefox ne duhet të përdorim-moz-prefix, për shembull:

-Moz-kufirit-rreze:

Dhe për Safari-WebKit-prefix, për shembull:

-WebKit-kufirit-rreze:

1. Rreze kufirit

Rreze kufirit CSS3 komandën e krijon qoshet lakuar në një element. Në vend të përdorimit 4 ose më shumë imazhe të krijuar qoshet lakuar të përdorni komandat e mëposhtme:

/ * Për Mozilla Firefox * /
-Moz-kufirit-rreze: 20px;

/ * Për Safari & Google Chrome * /
-WebKit-kufirit-rreze: 20px;
}

2. Hije Box

Një hije mund të aplikohet në elementë duke përdorur komandën CSS3 hije kuti. Hije kuti pranon tre vlerat numerike plus një ngjyrë për të aplikuar këtë efekt. Këto numra janë:

1. Largësia horizontale e kompensuar e hijes - Një vlerë pozitive do të thotë se do të hedhin hije në të djathtë dhe një vlerë negative në të majtë
2. Largësia e vertikale kompensuar e hijes - Një vlerë pozitive do të thotë hija do të hedhin poshtë dhe një vlerë negative mbi
3. Si blurry ju dëshironi hije

Me shtimin e një vlerë të ngjyrës hije është i plotë:

/ * Për Mozilla Firefox * /
-Moz-box-hije: 5px 5px 5px # b6ebf7;

/ * Për Safari & Google Chrome * /
-WebKit-box-hije: 5px 5x 5px # b6ebf7;

3. Transparenca ose RGBA

Transparenca ka qenë gjithmonë i ndërlikuar. Shfletuesit të ndryshme historikisht kanë aplikuar transparencën duke përdorur komandat e ndryshme. Vazhdimi i kësaj mospërputhje ndër-browser kemi shtimin e pasurisë të ri sfond CSS3 RGBA, megjithatë në parim këtë komandë është më logjike. Komanda përbëhet nga 4 vlera - të parë, dytë dhe të tretë janë të kuqe, të gjelbër dhe blu vlerat (0-255), e ndjekur përkatësisht nga kanali alfa ose transparenca (0-1).

Për komandën RGBA prefikset shfletuesit të veçanta (-moz-,-WebKit-) nuk janë të nevojshme:

# Box3 {
background-color: rgba (110, 142, 185, 0,5);
}

Ngjyrën e sfondit komandën shton një e bukur sfond blu-gri në 0,5 ose perde 50% në shfletues që e kuptojnë të pronës RGBA CSS3.

Për fat të keq Internet Explorer do të përpiqet që të merr komandën ngjyrën e sfondit, por nuk e kuptojnë RGBA. Për të siguruar që ngjyrën e sfondit është vendosur edhe në IE një IE-hack vetëm është e nevojshme. Në shembullin e mëposhtëm: fundit-fëmijë përzgjedhës pseudo që Internet Explorer nuk e kupton është përdorur për të përjashtojë atë.

trupit: e fundit-fëmijë # box3 {
/ * Përjashto të gjithë shfletuesit IE përdorur: fundit-fëmijë * /
background-color:! rgba (110, 142, 185, 0,5) të rëndësishme;
}

4. Columns

Aftësinë për të shtuar kolona është shtuar në CSS3. Në vend se të elementeve lundrues brenda kontejnerë ne mund të vendosni numrin e kolonë, gjerësia dhe rregull:

/ * Për Mozilla Firefox * /
-Moz-kolona-count: 2;
-Moz-kolona-gap: 20px;
-Moz-kolona-rregull: solid 1px # 6e8eb9;

/ * Për Safari & Google Chrome * /
-WebKit-kolona-count: 2;
-WebKit-kolona-gap: 20px;
-WebKit-kolona-rregull: solid 1px # 6e8eb9;
}

5. Imazhe të shumta background

Imazhet sfond ka qenë gjithmonë e kufizuar, kur është fjala për CSS shkak të faktit që ju mund të aplikoni vetëm një imazh sfond per element. Ky nuk është rasti me CSS3 e cila lejon imazhe të shumta për një element nga thjesht presje-ndan ato.

Për të vendosur një imazh në të dy majtë dhe të djathtë e një element ju mund të përdorni komandat e mëposhtme, me pak styling:

padding: 0 20px;
}

Kjo komandë do të jetë keq-e kryera nga Internet Explorer si ajo nuk e pranon 2 images sfond në një element të vetëm. Një përjashton të gjitha hack IE është e nevojshme.

# Box5 blockquote {
/ * Për të gjithë shfletuesit, vetëm një kuotë të hapur * /
background: url (/ i / quotel.gif) 0 0 nuk-repeat;
padding: 0 20px;
}

trupit: e fundit-fëmijë # box5 blockquote {
/ * Përjashto të gjithë shfletuesit IE përdorur: fundit-fëmijë * /
/ * Pastaj dy imazhet * /
background: url (/ i / quotel.gif) no-përsëritur 0 0, url (/ i / quoter.gif) no-përsëritur 100% 0;
}

6. Gradients Historiku

Background gradients CSS3 janë jashtëzakonisht fleksibël dhe mund të përdoret për të krijuar modele të ndërlikuara. Në të thjeshtë linear gradient saj CSS lejon një gradient të zbatohen për një element nga lart poshtë dhe e majta në të djathtë.

Ky shembull i një gradient CSS3 në Mozilla Firefox aplikon një gradient dritë blu në fund të një kuti për vetëm 20% e lartësisë së kutive '

Safari përdor një qasje më pak intuitiv, por më fleksibël duke përdorur vlerat e ngjyra të ndaluar. Një shembull i kodit Safari specifike më poshtë (vini re lineare është e përfshirë në kllapa në vend të jashtme):

# Box8 {
background:-WebKit-gradient (lineare, në fund majtas, lartë e majtë, ngjyra-stop (0, # b6ebf7), ngjyra-stop (0.20, # FFF));
}

7. Rrotullim

CSS3 gjithashtu lejon rrotullimin e elementeve duke përdorur komandën transformuar, me pronën rrotullohen pranuar gradë, si një parametër.

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

8. Përshkruan

Outilines janë të përfshira në specifikim CSS3 dhe të lejojë të dyja kufirit një dhe një skicë për të aplikuar për një element të vetëm.

Prona të përshkruajë është identike me komandën e kufirit. Pronës shtesë offset megjithatë lejon kufirit për të lëvizur më tej brenda ose jashtë e elementit.

Paraqitur sipas: Css nga admin