CSS3 està començant a cobrar impuls amb molts dels comandaments descrits en el projecte de treball amb el suport de CSS3 Firefox, Safari i Google Chrome. Pensem que havíem reunit alguns dels nostres preferits. Abans de començar CSS3 comandes requereixen una sintaxi navegador específic per a ells per treballar.

Per a Mozilla Firefox que hem d'utilitzar el prefix-moz-, per exemple:

-Moz-border-radius:

I per al Safari-webkit-prefix, per exemple:

-Webkit-border-radius:

1. Frontera ràdio

De la frontera amb CSS3 comanda ràdio de les cantonades són corbes en un element. En lloc d'utilitzar 4 o més imatges per crear cantonades corbes usar els següents comandaments:

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

/ * Per Safari i Google Chrome * /
-Webkit-border-radius: 20px;
}

2. Caixa de l'ombra

Una ombra es pot aplicar als elements amb la comanda quadre de CSS3 ombra. La caixa d'ombra accepta tres valors numèrics més un color que s'aplicarà aquest efecte. Aquests números són els següents:

1. Distància de desplaçament horitzontal de l'ombra - Un valor positiu significa que l'ombra es converteix en el dret i un valor negatiu a l'esquerra
2. Distància de desplaçament vertical de l'ombra - Un valor positiu significa que l'ombra tirarà baix i per sobre d'un valor negatiu
3. Com borrosa que li agradaria a l'ombra

Amb l'addició d'un valor de color de l'ombra és completa:

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

/ * Per Safari i Google Chrome * /
-Webkit-box-shadow: 5px 5px 5x # b6ebf7;

3. Transparència o RGBA

La transparència ha estat sempre difícil. Diferents navegadors, històricament, han aplicat la transparència mitjançant ordres diferents. Continuant amb aquesta manca de coherència entre navegadors tenim l'addició de la propietat CSS3 RGBA nou fons, però, en principi, aquesta comanda és més lògic. La comanda es compon de 4 valors - la primera, segona i tercera són els valors de vermell, verd i blau (0-255), respectivament, seguit pel canal de transparència alfa (0-1).

Per la comanda RGBA els prefixos navegador específic (-moz-,-webkit-) no són necessaris:

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

La comanda color de fons, afegeix un bonic color blau-gris de fons en el 0,5 o el 50% d'opacitat en els navegadors que entenguin la propietat CSS3 RGBA.

Desafortunadament Internet Explorer també s'intentarà representar el símbol del color de fons, però no entenc RGBA. Per assegurar que el color de fons també s'estableix en un hack IE IE-només és necessària. En l'exemple següent: last-child selector de pseudo-que Internet Explorer no entén que s'utilitza per excloure.

cos: last-child {# Box3
/ * Excloure tots els navegadors IE amb: l'últim fill * /
background-color: rgb (110, 142, 185, 0.5) és important;
}

4. Columnes

La possibilitat d'afegir columnes ha estat afegit a CSS3. En lloc dels elements flotants dins dels contenidors que pot establir el nombre de columna, l'amplada i l'estat:

/ * Per Mozilla Firefox * /
-Moz-column-count: 2;
-Moz-column-gap: 20px;
-Moz-column-regla: 1px solid # 6e8eb9;

/ * Per Safari i Google Chrome * /
-Webkit-columna de comptatge: 2;
-Webkit-columna-GAP: 20px;
-Webkit-columna-regla: 1px solid # 6e8eb9;
}

5. Múltiples imatges de fons

Imatges de fons sempre ha estat restrictiva a l'hora de deu al fet que només es pot aplicar una imatge de fons per element CSS. Aquest no és el cas de CSS3 que permet múltiples imatges per element amb només comes de separació.

Per posar una imatge de l'esquerra i la dreta d'un element que pot utilitzar els comandaments, amb una mica d'estil:

padding: 0 20px;
}

Aquesta ordre es mal prestats per Internet Explorer, ja que no accepta dues imatges de fons en un sol element. Un excloure tots hackejar IE és necessari.

# Box5 blockquote {
/ * Per a tots els navegadors, només un pressupost obert * /
background: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

cos: last-child # box5 blockquote {
/ * Excloure tots els navegadors IE amb: l'últim fill * /
/ * A continuació les dues imatges * /
background: url (/ i / quotel.gif) no-repeat 0 0, adreça (/ i / quoter.gif) no-repeat 100% 0;
}

6. Gradients de fons

Gradients de CSS3 de fons són extremadament flexibles i poden ser utilitzats per crear models complexos. En la seva forma més simple el gradient de CSS permet un gradient lineal que s'aplica a un element de dalt a baix i d'esquerra a dreta.

Aquest exemple d'un gradient de CSS3 en Mozilla Firefox s'aplica un gradient de color blau clar a la part inferior d'una caixa de només 20% de l'alçada de les caixes

Safari utilitza un enfocament menys intuïtiu però més flexible amb els valors de color parar. Un exemple del codi de Safari específics següents (tingueu en compte el lineal s'inclou entre parèntesis en lloc de fora):

# {Box8
de fons:-webkit-gradient (lineal, a sota a l'esquerra, a dalt a l'esquerra, el color-stop (0, # b6ebf7), color-stop (0.20, # fff));
}

7. Rotació

CSS3 també permet la rotació dels elements amb la comanda transformar, amb la propietat de rotar l'acceptació de títols com a paràmetre.

<code> Box9 # {
-Moz-transform: rotate (2deg);
-Webkit-transform: rotate (2deg);
} </ Code>

8. Esbossa

Outilines s'inclouen en l'especificació CSS3 i permetre que tant una frontera i un esquema que s'aplicarà a un sol element.

La propietat esquema és idèntic a la comanda frontera. La característica addicional de compensació però permet la frontera per allunyar una mica més dins o fora de l'element.

Filed under: Css per admin