Algunas razones por las que CSS3 lo peta
-
Upload
betabeers -
Category
Technology
-
view
148 -
download
4
description
Transcript of Algunas razones por las que CSS3 lo peta
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?