ALGUNAS RAZONES PORLAS QUE CSS3 LO PETAI BETABEERS HUELVA - 25 DE OCTUBRE 2013

IGNACIO G. DÍAZ

SELECTORS

SELECTORS: SHOW ME THE CODESelectores de atributos:

Selectores de hermanos:

input[type="text"]a[href̂="mailto:"]a[href$=".php"]elem[att̂="val"]elem[att$="val"]elem[att̂="val"]

h1 + h2h1 ~ h2

SELECTORS: SHOW ME THE CODEPseudo elementos:

Pseudo clases:

:first-line:first-letter:before:after::selection

:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n):first-of-type:last-child:only-child:only-of-type:root:empty:enabled:disabled:checked:not(selector)

 

SELECTORS: EJEMPLOHTML

Ejemplo...

<span></span><span></span><span color="azul"></span><span>ejemplo</span>

CSSspan { display: inline-block; width: 60px; height: 60px; border: 1px solid; margin: 5px;}span:first-of-type { background-color: #500; }span:nth-of-type(2) { background-color: #050; }span[color="azul"] { background-color: #005; }

span:not(:empty) { display: block; height: auto; width: auto;}span:not(:empty):after { content: '...'; }span:not(:empty):first-letter { text-transform: uppercase;}

TEXTO

TEXTO: SHOW ME THE CODECARGANDO FUENTES EXTERNASCamino fácil: Google FontsAlgo más

EFECTO BÁSICO DE TEXTO

@fontface { fontfamily: src:

] [fontstyle: ]}

font:

<alias>;<fuente>[, <fuente> ...];

[fontweight: <peso>;<estilo>;

<tamaño> <alias>;

color: textshadow:

<color>;<sombra-h> <sombra-v> <desenfoque> <color>

[, <sombra-h> <sombra-v> <desenfoque> <color>...];

 

TEXTO: EJEMPLO"MORDOR"

<img src="images/titulo.png">

Tráfico de redCSS responsiveActualización externaSEO

WTF?

 

TEXTO: EJEMPLO"TO INFINITY AND BEYOND!"

.efecto-1 { color: #FFF; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}

.efecto-2 { color: #FFF; text-shadow: 0px 0px 6px rgba(255,255,255,0.7);}

.efecto-3 { color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 2px 2px;}

.efecto-4 { color: rgba(0,0,0,0.6); font-weight: bold; text-shadow: 2px 2px 3px rgba(255,255,255,0.1);}

.efecto-5 { position: relative; color: rgba(0, 0, 255, .5); }

.efecto-5:after {

Efecto 1Efecto 1

Efecto 1

Efecto 2

Efecto 3

Efecto 4

Efecto 4

Efecto 5Efecto 5

BORDES, FONDOS Y COLOR

BORDES: SHOW ME THE CODEborder-radius: border-image:

<r>;<src> <%t> <%r> <%d> <%l> <h-repeat> <v-repeat>

FONDOS: SHOW ME THE CODEbackground: background: url(images/fondo-l.png) no-repeat left center, url(images/fondo-r.png) no-repeat right center;background-origin: border-box | padding-box | content-box;background-size:

<color> <pos> <size> <repeat> <origin> <clip> <attachment> <image>;

<tamaño> | <porcentaje> | cover | contain;

 

COLOR: SHOW ME THE CODE<nombre>#<rr><gg><bb>#<r><g><b>rgb(<r>, <g>, <b>)

rgba(<r>, <g>, <b>, <a>)hsl(<ton>, <sat>, <bri>)hsla(<ton>, <sat>, <bri>, <a>)

red#FF0000#F00rgb(255, 0, 0)

transparentrgba(255, 0, 0, .2)hsl(300, 100%, 20%)hsla(320, 80%, 56%, 20%)

 

BORDES, FONDOS Y COLOR: EJEMPLO<div class="wrapper"><div></div></div>

.wrapper { display: inline-block; overflow: hidden; height: 200px; width: 160px; border-radius: 50%; border: 6px solid; transition: width 1s;}.wrapper:hover { width: 250px; }

.wrapper>div { width: 100%; height: 100%; background: url(../images/gatito.jpg) no-repeat center center; background-size: cover;}

TRANSFORMACIONES

TRANSFORMACIONES: SHOW ME THE CODEtransform: rotate(α);transform: skew(α, φ);transform: scale(β, γ);transform: translate(β, γ);

 

TRANSFORMACIONES: EJEMPLOHTML

<div class="wrapper"><div><img src="images/gatito.jpg"></div></div>

CSS.wrapper { position: relative; background-color: #300; width: 100px; height: 250px;}

.wrapper>div { position: absolute; overflow: hidden; top: 50%; left: 50%; width: 160px; height: 160px;

background-color: #030; transform: translate(-50%, -50%) rotate(45deg);}

.wrapper>div>img { transform: rotate(-45deg) scale(.6); }

.wrapper>div>img:hover { transform: rotate(-45deg) scale(1); }

TRANSFORMACIONES: EJEMPLOLISTA MAKISU JS

CSS3 LO PETA...

SOLO CON

ESTA LISTA

DESPLEGABLE MEDIANTE

CSS 3D TRANSFORMS...

DE LOCOS.

ANIMACIÓN

ANIMACIÓN: SHOW ME THE CODETransiciones:

Animaciones:

transition: tranition-property: tranition-duration: tranition-timing-function: tranition-delay:

<propiedad> <duracion> <funcion> <delay>;<propiedad>;

<duracion>;<funcion>;

<delay>;

animation-name: animation-duration: animation-iteration-count: animation-direction: animation-delay: animation-timing-function:

@keyframe <nombre> { ... }, ...}

<nombre-keyframes>;<duracion>;<contador>;<dirección>;

<delay>;<funcion>;

<porcentaje> { <propiedad>: <valor>;

 

ANIMACIÓN: EJEMPLOSPRITE

"ESTO E AZÍN DE TOA LA VIDA"<img src="images/sprite.gif">

"UN POQUITO DE POR FAVOR"<i class="pez-volador"></i>

.pez-volador { width: 104px; height: 80px; animation: aleteo 1.3s steps(33) infinite; background-image: url('images/sprite.png'); background-position: 0px 0px; background-size: auto 100%;}

@keyframes aleteo { 0% { background-position: 0% 0px; } 100% { background-position: 97% 0px; }}

RECURSOSVarios CSS3: Parche de colores: Selectors: Prefijos: Transiciones: Gradientes:  , Implantación CSS3 (y más):  , 

css3generator.comlea.verou.me/rgba.php

lea.verou.me/demos/nth.htmlleaverou.github.io/prefixfree

cubicbezier.comcolorzilla.com/gradienteditor dabblet.com

caniuse.com css3test.com

¿QUIERES MÁS?Antonio Navajas  @ajnavajas

Lea Verou  @LeaVerouPaul Irish  @paul_irishRemy Sharp  @remArley McBlain  @ArleyMChris Coyier  @chriscoyier

YoMizmo  @naxyomizmoOXIK STUDIO  @OXIKstudio

¿PREGUNTAS?