❦
Menos efectos, más efectividad
Mejor optimización, más efectos
❦
❦
Se puede hacer lo mismo, pero de otra manera
Se puede visualizar igual, pero diferente
El mensaje permanece
❦
❦
Diseñar pensando en el código
Diseñar sabiendo cómo se va a implementar
Diseñar conociendo las limitaciones y virtudes de la plataforma
❦
❦
El contenido es el rey
La reina es:
* La semiótica es el mago de la corte
❦
Menor <
Mayor >
box-orient box-pack box-align box-flex box-flex-group box-ordinal-group box-direction box-lines
<div id="flexbox"> <p>hijo 1</p> <p>hijo 2</p> <p>hijo 3</p> </div>
hijo 1
hijo 2
hijo 3
hijo 1
hijo 2
hijo 3
hijo 1
hijo 2
hijo 3
:nth-child(N) :nth-last-child(N) :nth-of-type(N) :nth-last-of-type(N)
hijo 2
hijo 3
hijo 2
hijo 3
círculo: border-radius = anchoalto/2
triángulo: lado triángulo = border-opuesto solid + lados laterales transparent;
box-shadow: [inset] | offset-x | offset-y | radio | color
background: url() | offset-x | offset-y | repeat, url() | offset-x | offset-y | repeat
background-size: percentage-x | porcentaje-y
border-image: url() | ancho corte | repeat/round/strech
rgba(R,G,B,opacidad)
outline: ancho | solid/dashed/dotted... | color
text-shadow: [inset] | offset-x | offset-y | radio | color
text-shadow: [inset] | offset-x | offset-y | radio | color
text-stroke: grueso | color
@font-face {
font-family: "Super Font";
src: url(superfont.otf) format("opentype || truetype");
}
text-overflow: ellipsis | clip
selector[attr=valor] (es igual a) selector[attr^=valor] (comienza con) selector[attr*=valor] (contiene) selector[attr$=valor] (termina en)
<div id="atributos"> <h1 data-type="hijo1">hijo 1 (h1)</h1> <p rel="hijo2">hijo 2</p> <p class="hijo3">hijo 3</p> </div>
hijo 2
hijo 3
transition: propiedad | tiempo | física | delay
animation: nombre | duración | iteración
* antes de grabar este mini-curso me preparé un cebiche el cual comparto la receta a continuación:
Dejar reposar por 10 minutos y disfruta con un buen vino blanco chileno, de preferencia Sauvignon blanc.