CSS3 este într-adevăr începe să se amplifice, cu multe din comenzile prezentate în proiectul de CSS3 de lucru susţinute de Firefox, Safari şi Google Chrome. Ne-am gandit pune împreună unele dintre favoritele noastre. Înainte de a începe CSS3 comenzi necesită sintaxa anumit browser pentru ei să lucreze.

Pentru Mozilla Firefox avem nevoie pentru a utiliza-moz-prefix, de exemplu:

-Moz-border-radius:

Şi pentru Safari-WebKit-prefix, de exemplu:

-WebKit-border-radius:

1. Rază de frontieră

Comanda CSS3 rază de frontieră creează colturi curbate pe un element. În loc de a folosi 4 sau mai multe imagini pentru a crea colturi curbate utilizaţi următoarele comenzi:

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

/ * Pentru Safari şi Google Chrome * /
-WebKit-border-radius: 20px;
}

2. Caseta de umbra

O umbra poate fi aplicat la elemente utilizând comanda CSS3 umbra caseta. Umbra caseta acceptă trei valori numerice, plus o culoare pentru a aplica acest sens. Aceste numere sunt:

1. Distanţa orizontală de compensare de umbra - O valoare pozitivă înseamnă umbra va exprimate pentru a dreapta şi de o valoare negativă la stânga
2. Distanţa pe verticală de compensare de umbra - O valoare pozitivă înseamnă că umbra se va arunca de mai jos şi o valoare negativă de mai sus
3. Cum neclare doreşti umbra

Cu adăugarea unei valori de culoare umbra este complet:

/ * Pentru Mozilla Firefox * /
-Moz-box-shadow: 5pixeli 5pixeli 5pixeli # b6ebf7;

/ * Pentru Safari şi Google Chrome * /
-WebKit-box-shadow: 5pixeli 5x 5pixeli # b6ebf7;

3. Transparenţă sau RGBA

Transparenţa a fost întotdeauna dificil. Browsere diferite istoric au aplicat transparenta folosind comenzi diferite. Continuând această inconsecvenţă cross-browser avem adăugarea de noi proprietăţi CSS3 fundal RGBA, cu toate acestea, în principiu, aceasta comanda este mai logic. Comanda este compusa din 4 valori - primul, al doilea şi al treilea sunt valorile roşu, verde şi albastru (0-255), respectiv, urmată de canal alfa sau transparenţă (0-1).

Pentru comanda RGBA prefixele anumit browser (-moz-,-WebKit-) nu sunt necesare:

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

Comanda culoare de fundal adaugă un frumos albastru-gri fundal la 0.5 sau opacitate de 50% din browserele care inteleg CSS3 proprietate RGBA.

Din păcate, Internet Explorer va încerca, de asemenea, pentru a face comanda culoarea de fundal, dar nu înţeleg RGBA. Pentru a se asigura că culoarea de fundal este, de asemenea, situat într-un hack IE IE-doar este necesar. În următorul exemplu: ultima-copil selectorul de pseudo care Internet Explorer nu se înţelege este folosit pentru a-l exclude.

Organismul: ultima-copil # box3 {
/ * Exclude toate browserele IE folosind: ultima-copil * /
background-color: rgba (110, 142, 185, 0.5) importante;!
}

4. Coloane

Abilitatea de a adăuga coloane a fost adăugată la CSS3. Mai degrabă decât elemente plutitoare în containere putem seta numărul de coloane, lăţimea şi de regulă:

/ * Pentru Mozilla Firefox * /
-Moz-coloană-count: 2;
-Moz-coloană-decalaj: 20px;
-Moz-coloană-regulă: 1px solid # 6e8eb9;

/ * Pentru Safari şi Google Chrome * /
-WebKit-coloană-count: 2;
-WebKit-coloană-decalaj: 20px;
-WebKit-coloană-regulă: 1px solid # 6e8eb9;
}

5. Mai multe imagini de fundal

Imagini de fundal a fost întotdeauna restrictive atunci când vine vorba să datorită faptului puteţi aplica doar o imagine de fundal pentru fiecare element de CSS. Acest lucru nu este cazul cu CSS3, care permite mai multor imagini pe elementul de către pur şi simplu le-virgula de separare.

Pentru a plasa o imagine pe ambele din stânga şi din dreapta ale unui element aveţi posibilitatea să utilizaţi următoarele comenzi, cu un stil puţin:

padding: 0 20px;
}

Aceasta comanda va fi greşit prestate de către Internet Explorer, deoarece nu acceptă 2 imagini de fundal pe un singur element. Un exclude toate hack IE este necesar.

# Box5 blockquote {
/ * Pentru toate browserele, doar un citat deschis * /
background: url (/ i / quotel.gif) 0 0 nu-repeat;
padding: 0 20px;
}

Organismul: ultima-copil # box5 blockquote {
/ * Exclude toate browserele IE folosind: ultima-copil * /
/ * Apoi, cele două imagini * /
background: url (/ i / quotel.gif) nu-repeat 0 0, url (/ i / quoter.gif) nu-repeat 100% 0;
}

6. Context degradeuri

CSS3 degradeuri de fond sunt extrem de flexibile si pot fi folosite pentru a crea modele complexe. La cea mai simplă înclinare CSS permite un gradient linear care urmează să fie aplicat la un element de sus în jos şi de la stânga la dreapta.

Acest exemplu de o pantă CSS3 în Mozilla Firefox aplică un gradient de culoare albastru deschis în partea de jos de o cutie de doar 20% din înălţimea Dulapuri cu "

Safari foloseste o abordare mai puţin intuitivă, dar mai flexibil, utilizând valori de culoare opri. Un exemplu de cod specific Safari urmează (a se vedea liniar este inclusă în paranteze în loc de exterior):

# Box8 {
fundal:-WebKit-gradient (liniar, stânga jos, stanga sus, culoare-stop (0, # b6ebf7), de culoare-stop (0,20, # fff));
}

7. Rotaţie

CSS3 permite, de asemenea, rotaţia elementelor utilizând comanda transforma, cu proprietatea de grade rotire accepta ca un parametru.

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

8. Contururi

Outilines sunt incluse în caietul de sarcini CSS3 şi să permită atât o bordură şi o schiţă care urmează să fie aplicat la un singur element.

Proprietatea contur este identică cu comanda de frontieră. Proprietate suplimentare de compensare cu toate acestea permite frontieră care urmează să fie mutate în continuare în interiorul sau în afara elementului.

Filed under: Css de către admin