Advertisement
  1. Code
  2. HTML & CSS
Code

10 Propietats de CSS3 amb les quals Necessites estar Familiaritzat

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called CSS3 Mastery.
The 30 CSS Selectors You Must Memorize

Catalan (Català) translation by Óscar Salas Fernández (you can also view the original English article)

Ja hem tractat els trenta selectores de CSS que tots hauríem de memoritzar; però què passa amb les noves propietats de CSS3? A pesar que la majoria d'elles necessiten un prefix específic del proveïdor, encara així pots usar-les en els teus projectes avui dia. De fet, està fomentat!

La clau és determinar primer si estàs d'acord o no amb una lleugera diferència de presentació de navegador a navegador. Estàs d'acord, diguem, amb IE mostrant les cantonades de 90º en comptes d'unes arrodonides polides? És la teva decisió. De tota manera, recorda sempre que els llocs web no necessiten veure's igual en cada navegador. En la conclusió d'aquest article, treballarem en un divertit projecte final.

1. border-radius

Border-radius
Veure Demo

Fàcilment la propietat CSS3 més popular en el grup, border-radius va ser una espècie de propietat insígnia de CSS3. Mentre moltsdissenyadors encara estaven aterrorizados amb la idea que un dissenypogués presentar-se de forma diferent de navegador a navegador, un pasde bebè, com les cantonades arrodonides, va ser una manera fàcil d'atreure'ls!

La ironia és que tots estem perfectament bé amb la idea que s'ofereixi una experiència de visió alternativa per als navegadors dels mòbils. No obstant això, d'una forma estranya, alguns no senten el mateix pel que fa als navegadors de l'escriptori.

Per favor adona't que tant Safari com IE9 implementen la sintaxi oficial de "border-radius".

Cercles

Pot ser que alguns lectors no estiguin al tant que també podem crear cercles amb aquesta propietat.

Circles
Veure Demo

...I, si volem passar-ho bé, també podem aprofitar el Model de Caixa Flexible (detallat en #8) per centrar el text dins del cercle tant vertical com horitzontalment. Requereix una mica de codi, però només a causa de la necessitat de compensar a diversos proveïdors.

2. box-shadow

Box-Shadow
Veure Demo

A continuació, tenim a l'ubic box-shadow, el qual et permet aplicar profunditat als teus elements immediatament. No siguis massa insofrible amb els valors que estableixis!

box-shadow reconeix quatre paràmetres:

  • desplaçar-x
  • desplaçar-y
  • difuminat
  • color de l'ombra

Ara, del que molts no s'adonen és que pots aplicar diversos box-shadows alhora. Això pot portar a alguns efectes realment interessants. En la següent captura de pantalla, uso una ombra blava i verd per magnificar cada ombra.

Multiple box shadows
Veure Demo

Ombres Intel·ligents

Aplicant ombres a les pseudo-classes ::before i ::after, podem crear algunes perspectives realment interessants. Aquí hi ha una perquè comencis:

El HTML

El CSS

Cool Shadows
Veure Demo

Vols més efectes genials? Consulta aquest tutorial en Nettuts+.

3. text-shadow

Text-shadow
Veure Demo

text-shadow és una de les poques propietats de CSS3 en la qual podem ometre l'ús del prefix del proveïdor. Bastant similar a box-shadow, ha de ser aplicat al text, i admet els mateixos quatre paràmetres:

  • desplaçar-x
  • desplaçar-y
  • difuminat
  • colors de l'ombra

Text-Outline

De nou, igual que el seu germà, box-shadow, podem aplicar múltiples ombres, utilitzant una coma com a separador. Per exemple, diguem que volem crear un efecte d'esborrany per al text. Encara que webkit ofereix un efecte stroke, podem arribar a més navegadors utilitzant el següent mètode (encara que no tan bonic):

Text Outline
Veure Demo

4. Text-Stroke

Text-Stroke
Veure Demo

Ves amb compte amb aquest mètode. Només webkit, durant els últims anys, ho admet (Safari, Chrome, iPhone). De fet, encara que podria estar equivocat, `text-stroke` encara no és part de l'especificació CSS3. En aquest cas, amb text en blanc, Firefox mostrarà una pàgina aparentment en blanc. Pots o utilitzar la detecció de funcions Javascript per evitar això o assegurar-te que el color del text basi no és el mateix que el del fons del cos.

Detectar Funcionalitats

Com podem proporcionar un lot d'estil per, per exemple, Firefox, i un altre lot per a Safari o Chrome? Una solució és usar detectar funcionalitats.

Amb detectar funcionalitats, podem usar Javascript per comprovar si certa propietat està disponible. Si no ho està, preparem un fallback.

Anem a consultar enrere en el punt de text-stroke. Anem a establir un fallback de color negre per als navegadorsque no admeten aquesta propietat (tots menys webkit de moment).

Primer, creem un element h1 simulat.   Després, realitzem una cerca completa perdeterminar si la propietat -webkit-text-stroke està disponible per a aquestelement, a través de l'atribut style. Si no ho està, agafarem l'encapçalat Hello Readers, i establim el seu color de blanc a negre.

Per favor adona't que estem sent genèrics aquí. Si necessites reemplaçar vàries etiquetes h1 a la pàgina, necessitaràs usar una sentència while per filtar a través de cada encapçalat, i actualitzar l'estil o el nom de la classe, degudament.

A més estem provant només per webkit, quan és possible que altres navegadors amb el temps admetin la propietat text-stroke també. Recorda això!

Si vols una solució detectar-funcionalitat més completa, consulta Modernizr.

5. Múltiples Fons

Multiple Background Images
Veure Demo

La propietat background ha estat ajustada per permetre múltiples fons en CSS3.

Anem a crear un exemple ximple, simplement com una prova de concepte. A causa de la falta d'imatges adequades a prop, vaig a utilitzar dues imatges tutorials com els nostres fons. Per descomptat, en una aplicació del món real, pot ser que utilitzis una textura i, tal vegada, un degradat per als teus fons.

A dalt, usant una coma com a separador, estem fent referència a dues imatges de fons diferents. Observa com, en el primer cas, es col·loca en la posició superior esquerra (0 0), i, en el segon, en la posició superior dreta (100% 0).

Assegura't de proporcionar un fallback als navegadors que no ofereixen suport per a diversos fons. Se saltaran la propietat per complet, deixant el teu fons en blanc.

Compensació per a Navegadors Antics

Per agregar una sola imatge de fons per als navegadors antics, com IE7, declara la propietat de background dues vegades: primer per als navegadors antics, i segon com una anul·lació. Alternativament, podries, de nou, usar Modernizr.

6. background-size

Fins fa poc temps, ens vam veure obligats a usar tècniques solapades per permetre imatges de fons redimensionables.

El codi anterior dirigirà la imatge de fons per ocupar tot l'espai disponible. Com a exemple,i si volem que una imatge en particular ocupi tot el fons de l'element del cos, independentment de l'ample de la finestra delnavegador?

Això és tot sobre aquest tema. La propietat background-size admetrà dos paràmetres: les amplàries x i y, respectivament.

Encara queles versions més recents de Chrome i Safari admeten background-size de forma nativa, encara necessitem usar prefixos de proveïdorper als navegadors antics.

Veure Demo

7. text-overflow

Originalment desenvolupada per Internet Explorer, la propietat text-overflow pot acceptar dos valors:

  • abreujar
  • el·lipsi

Aquesta propietat es pot utilitzar per tallar el text que excedeixi el seu contenidor, mentre que encara proporciona una mica de retroinformación per a l'usuari, com una el·lipsi.

Text-Overflow
Veure Demo

Sabies? Internet Explorer ha proporcionat suport per a aquesta propietat des de IE6? Ells ho van crear!

En aquest punt, pots considerar mostrar la totalitat del text quan un usuari se situa sobre el quadre.

Una micaestrany (tret que m'equivoqui), no sembla ser una manera derestablir la propietat text-overflow, o de "apagar-la". Per imitar aquesta funcionalitat "off", en :hover, podem configurar la propietat white-space de nou a normal. Això funciona, perquè text-overflow depèn d'això per funcionar correctament.

Sabies? També pots especificar la teva pròpia cadena, que hauria d'usar-se en lloc de l'el·lipsi. Fent això es renderizará la cadena per representar el text retallat.

8. Model de Caixa Flexible

El Model de Caixa Flexible, ens permetrà finalment allunyar-nos d'aquests desagradables flotadors. Encara que es necessita una mica de treball per fer-te en el teu cap amb les noves propietats, una vegada que ho facis, tot hauria de tenir sentit.

Anem a construir una ràpida demo, i a crear un senzill format a dues columnes.

Ara pel CSS: primer necessitem donar instruccions al contenidor per ser tractat com una caixa. A més aplicaré una amplària i altura genèrica, ja que no tenim cap contingut real en joc.

A continuació, anem a aplicar, per la demo, colors de fons únics al #main div, i al aside.

En aquest punt, no hi ha molt a veure.

Flexible Box Model

Una cosa que val la pena notar, no obstant això, és que, quan s'estableix per mostrar: manera de quadre, els elements secundaris ocuparan tot l'espai vertical; Aquest és el valor predeterminat d'alineació de quadre: estirament.

Observa el que ocorre quan establim específicament una amplària a l'àrea de contingut #main.

Flexbox Example 2

Bé, això està una mica millor, però encara tenim aquest problema on el aside no està ocupant tot l'espai restant. Podem arreglar això usant la nova propietat box-flex.

box-flex dona instruccions a l'element perquè ocupi tot l'espai disponible.

Ambaquesta propietat en el seu lloc, independentment de l'ample de l'àrea decontingut #main, el aside consumirà totes les especificacions d'espai disponible. Fins i tot millor, no has de preocupar-te dels problemes d'aquests fastidiosos flotadors,com els elements que cauen per sota de l'àrea de contingut principal.

Example 3 of Flexible Box Model
Veure Demo

Aquí només hem gratat la superfície. Consulta l'excel·lent article de Paul Irish per a més informació. A més, ves amb compte quan usis aquest mètode, ja que no està totalment admès, per descomptat, en els navegadors antics. En aquests casos, pots usar detecció de funcionalitats o Modernizr per detectar suport, i proporcionar els fallbacks necessaris.

9. Resize

Només disponible, a partir de Firefox 4 i Safari 3, la propietat resize -- part del mòdul CSS3 UI -- et permet especificar com redimensionar una zona de text.

Observa que, per defecte, els navegadors webkit i Firefox 4 permeten a les zones de text ser redimensionades, tant vertical com horitzontalment.

Valors Possibles

  • tots dos: Redimensionar vertical i horitzontalment.
  • horitzontal: Limita el redimensionat horitzontalment.
  • vertical: Limita el redimensionat verticalment.
  • cap: Deshabilita el redimensionat
Resize
Veure Demo

10. Transició

Potser la incorporació més excitant de CSS3 és la capacitat d'aplicar animacions a elements, sense l'ús de Javascript.

Encara que sembla que el condemnat IE9 no admetrà transicions CSS, això sens dubte no significa que no hauries d'usar-les. La clau és millorar.

Anem a imitar l'efecte comú, on, una vegada que col·loquis un enllaç en una barra lateral, el text es lliscarà cap a la dreta sempre tan lleugerament.

El HTML

El CSS

transició reconeixerà tres paràmetres:

  • La propietat de transició. (Estableix aquest valor en tot si fos necessari)
  • La durada
  • El tipus de flexibilització

La raó per la qual no apliquem directament la transició a l'estat hover de l'etiqueta d'ancoratge és perquè, si el hicieramos, l'animació només tindria efecte en passar el ratolí per damunt. En llevar el ratolí, l'element tornaria immediatament al seu estat inical.

Veure Demo

Ja que només hem millorat l'efecte, no hem fet absolutament cap dany als navegadors més antics.

Projecte Final

Anem a combinar la major part de les tècniques que hem après en aquest article, i a crear un efecte nítid. Primer revisa l'efecte final (es veu millor en navegadors Webkit).

Pas 1 El Marcat

Ho farem simple; Dins del nostre contenidor .box, anem a afegir dos divs: un per a la grandària frontal, i l'altre per enrere.

Pas 2. Centrat Horitzontal i Verticalment

A continuació, necessito que la nostra targeta estigui perfectament centrada en la pantalla. Per fer això, aprofitarem el Model de Caixa Flexible. Només assegura't de, més tard, usar Modernizr per proporcionar un fallback per IE.

Com a nostra pàgina només contendra aquesta targeta, podem usar eficaçment l'element del cos com el nostre embolcall.

centered

Pas 3. Dissenyar la Caixa

Ara dissenyarem la nostra "targeta".

Observa que a més hem donat instruccions a aquest element perquè pari esment a qualsevol canvi en l'estat de l'element. Quan succeeixin, convertirem els canvis (si és possible) en el transcurs d'un segon (transition: all 1s).

styling the box

Pas 4. Una ombra eficient

A continuació, com vam aprendre anteriorment en aquest article, aplicarem una ombra genial utilitzant la pseudo classe :: after.

effective shadows

Pas 5. Dissenyar els Divs Secundaris

En aquest moment, els divs secundaris estan encara just damunt de cadascun. Anem a posicionar-los totalment, i a donar-los instruccions que ocupin tot l'espai disponible.

styling the children divs

Pas 6. Arreglar el "Front"

Consulta la imatge d'a dalt; t'adones de com la part posterior de la nostra targeta s'està mostrant per defecte? Aixòes deu al fet que, a causa del fet que l'element es produeix més baixen el marcat, en conseqüència, rep un índex-z més alt. Anem a arreglar això.

fixing the front-side

Pas 7. Girar la Targeta

Ara ve la part divertida; Quan tornem sobre la targeta, ha de donar la volta, i mostrar la "part posterior" de la targeta (almenys la il·lusió de la "part posterior"). Per aconseguir aquest efecte, utilitzem transformacions i la funció rotateY.

rotating the card

Pas 8. Text reflectit

No sembla increïble? Però, ara, el text sembla estar reflectit. Això, per descomptat, és perquè transformem el contenidor. Anem a desplaçar això girant el div secundari 180º també.

I amb aquest últim fragment de codi, hem aconseguit el nostre efecte nítid!

Final product
Revisa l'efecte final (es veu millor en navegadors Webkit)

Conclusió

Moltíssimes gràcies per llegir-ho i espero que aprenguessis una mica!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.