css3
DESCRIPTION
A brief of CSS3 propertiesTRANSCRIPT
• Introducción CSS• CSS 3 • Object Oriented CSS• Diseño web sensible (responsive
Design)• SASS• LESS
CON
TEN
IDO
Para que sirve PCascading Style Sheets (CSS) ?
Plantilla HTML
+ CSS =
HTML
Cascading Style Sheets (CSS)
Una regla CSS está formada por una parte llamada "selector" y otra parte llamada "declaración“
– El selector indica "a quién hay que hacérselo".– La declaración indica "qué hay que hacer“
*{ margin: 0; padding: 0;}
Selectores …
• Selectores básicos
– Selector universal
– Selector de tipo o etiqueta
– Selector descendiente
– Selector de clase
– Selector de ID
– Combinación de selectores básicos
*{ margin: 0; padding: 0; }
h1, h2, h3 { color: #8A8E27; font-weight: normal;}
p span { color: red; }a span{color:blue}
.destacado { color: red; }p.destacado{color:blue}
#destacado { color: red; }p#destacado{color:blue}
div.aviso span.especial { ... }ul#menuPrincipal li.destacado a#inicio { ... }
Selectores
• Selectores avanzados– Selector de hijo
– Selector adyacente
– Selector de atributos
p > span{ margin: 0; padding: 0; }
H1 + h2 { color: red;}
<p><span>Texto1</span></p> (CUMPLE)<p><a href="#"><span>Texto2</span></a></p> (NO CUMPLE)
Deben cumplir dos condiciones:elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre debe ser el mismo.elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML de la página.
<body><h1>Titulo1</h1> (APLICA)<h2>Subtítulo</h2> (APLICA)<h2>Otro subtítulo</h2> (NO APLICA h1 +h2)</body>
/ * Se muestran de color azul todos los enlaces que tengan un atributo "class", independientemente de su valor */a[class] { color: blue; } /* Se muestran de color azul todos los enlaces que tengan un atributo "class" con el valor "externo" */a[class="externo"] { color: blue; } /* Se muestran de color azul todos los enlaces que apunten al sitio "http://www.ejemplo.com" */a[href="http://www.ejemplo.com"] { color: blue; } /* Se muestran de color azul todos los enlaces que tengan un atributo "class" en el que al menos uno de sus valores sea "externo" */a[class~="externo"] { color: blue; }
Borders
Selectores
Transformaciones
Fondos múltiplesHSLA & RGBA
word-wrap: break-word
http://www.css3.info/http://css3test.com/
Módulos CSS3
CSS3
Niveles W3C
1. Working Draft, primera publicación disponible con las especificaciones
2. Last Call, borrador con fechas limites para comentarios finales
3. Candidate recommendation, es estable y puede ser implementado.
4. Proposed recommendation, un documento bien revisado, para su aprobacion final.
5. Recommendation, completo y finalizado ~ standard.
Módulos1. Efectos visuales de imágenes:
– Fondos y bordes– Gradientes
2. Transformaciones3. Fuentes con mejores tipografías
– Fuentes– Texto
4. Selectores mejorados 5. Transiciones y animaciones, cambios y
movimientos sin usar FLASH o Javascript.
6. Media Queries7. Múltiple columnas
Prefijos
div {-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);}
Herramientas que pueden ayudar:• Sass (http://sass-lang.com ), • LESS (http://lesscss.org ),• eCSStender (www.alistapart.com/articles/stop-forking-withcss3 )
Bordes e imágenes …
http://slides.html5rocks.com/#rounded-cornershttp://www.css3.info/preview/rounded-border/http://www.w3.org/TR/css3-background/
#mydiv{ -webkit-border-radius:50px;-moz-border-radius: 50px;
}
#mydiv{ -webkit-border-top-left-radius:50px;-webkit-border-bottom-left-radius:50px;
-moz-border-radius-topleft:50px;-moz-border-radius-bottomright: 5px;
}
Rounded corners
Bordes e imágenes
#header { -moz-border-image: url(border.png) 27 27 27 27 round round; }
http://slides.html5rocks.com/#border-image http://css-tricks.com/understanding-border-image/http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri
Flexible Box Model
• .box { display: -webkit-box; -webkit-box-orient: horizontal/vertical ;}.box .one, .box .two { -webkit-box-flex: 1;}.box .three { -webkit-box-flex: 3;}
http://slides.html5rocks.com/#flex-box-1http://playground.html5rocks.com/#flex_box_model http://developer.palm.com/blog/2011/07/css-3-flexible-box-model-and-enyo-flex-layout/http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/
Flexible Box Model
.box { display: -webkit-box; -webkit-box-pack: start/end/center ; -webkit-box-align: start/end/center/strech ; }
http://slides.html5rocks.com/#flex-box-2http://playground.html5rocks.com/#flex_box_model_-_complex
Fondos Múltiple, gradientes
#wrapper{ Margin:12px auto;
width: 940px;height:480px;padding: 10px;
-webkit-border-radius: 4px;-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);background: url(‘../images/screenshot.png’) 370px
60px no-repeat, url(‘../images/paint.png’) top left no-repeat;
}
background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))
http://slides.html5rocks.com/#css-gradientshttp://www.w3.org/TR/css3-background/
Opacidad & color
color: rgba(255, 0, 0, 0.75);background: rgba(0, 0, 255, 0.75);
http://slides.html5rocks.com/#css-opacityhttp://slides.html5rocks.com/#css-color http://www.css3.info/preview/hsla/ http://www.w3.org/TR/css3-color/
Fondos semitransparentes: • RGBA (red-green-blue-alpha) or • HSLA (Hue / saturation / luminance / alpha)
Hexadecimal: #A6DADCRGB: 166, 218, 220RGBA: 166, 218, 220, 1HSL: 182, 44%, 76%HSLA: 182, 44%, 76%, 1 HSLA = (0-36, the percentage level of saturation, and the percentage level of lightness)
color: hsla( 128, 75%, 33%, 1.00);
Box transformations (2d)
div{ transform:rotate(30deg);transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);}.rotate-45 { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); }.rotate75 { -webkit-transform: rotate(75deg); -moz-transform: rotate(75deg); -o-transform: rotate(75deg); }.rotate90 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); }
http://playground.html5rocks.com/#2d_transformshttp://www.w3.org/TR/css3-2d-transforms/
Webfonts
http://slides.html5rocks.com/#web-fonts http://www.w3.org/TR/css3-fonts/
@font-face { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf);}
@font-face { font-family: 'Droid Sans'; src: url(Droid_Sans.ttf);}
header { font-family: 'LeagueGothic';}
Text wrapping
div { text-overflow: ellipsis}… overflow: hidden; text-overflow: ellipsis; (3) white-space: nowrap; (2,3)
blockquote {… padding: 10px 15px 5px 15px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border-top: 1px solid #fff; background-color: hsl(182,44%,76%); word-wrap: break-word;}
http://slides.html5rocks.com/#text-wrappinghttp://www.w3.org/TR/css3-text/
1
2
3
Text stroke
• div { -webkit-text-fill-color: black;
-webkit-text-stroke-color: red; -webkit-text-stroke-width: 2.20px; }
http://slides.html5rocks.com/#css-stroke
Sombras
• text-shadow: rgba(64, 64, 64, 0.5) 5px 5px 2px;
http://slides.html5rocks.com/#css-shadow http://playground.html5rocks.com/#text_and_box_shadow
• box-shadow: rgba(0, 0, 128, 0.25) -3px 6px 1px;
Selectores CSS3
http://www.w3.org/TR/css3-selectors/#selectorshttp://dev.l-c-n.com/CSS3-selectors/browser-support.phpwww.w3.org/TR/css3-selectorshttp://slides.html5rocks.com/#css-selectors
Bolding the Last Row with :last-childp{ margin-bottom: 20px }#sidebar p:last-child{ margin-bottom: 0; }td:last-child{ font-weight: bolder;}tr:last-child td:last-child{ font-size:24px;}Counting Backward with :nth-last-childtr:nth-last-child(2){ color: green;}tr:nth-last-child(-n+3) td{ text-align: right;}
tr:nth-of-type(even){ background-color: #F3F3F3;}tr:nth-of-type(odd) { background-color:#ddd;}
Negation:not(.box){ color: #00c;}
Animaciones y transiciones
/* We are defining the "timeline" of the animation,* each line representing a keyframe.*/@-moz-keyframes bounce { /* Translate the element 400px to the right */ /* Here we are animating "-moz-tranform",* but most CSS properties can be animated:* width, color, font-size, box-shadow, ...*/ from { -moz-transform: translate(0px); } 60% { -moz-transform: translate(400px); } /* and then bounce twice */ 73% { -moz-transform: translate(360px); } 86% { -moz-transform: translate(400px); } 93% { -moz-transform: translate(380px); } to { -moz-transform: translate(400px); }} #anim { /* use the "bounce" animation */ -moz-animation-name: bounce; /* animation on this element will last 1 second */ -moz-animation-duration: 1s; /* the animation will loop indefinitely */ -moz-animation-iteration-count: infinite; /* the animation will play 3s after being applied */ -moz-animation-delay: 3s;}
http://animatable.com/demos/madmanimation/http://www.cssplay.co.uk/menu/css3-animation.html#xhttp://playground.html5rocks.com/#transitions http://animatable.com/demos/madmanimation/http://hacks.mozilla.org/2011/05/advanced-animations-in-aurora-with-css3-animations/ http://paulrouget.com/e/css3animations/ http://www.w3.org/TR/css3-animations/
•animation-delay•animation-direction•animation-iteration-count•animation-name•animation-play-state•animation-timing-function
Media Query
We can use media queries to determine the following:– Resolution– Orientation (portrait or landscape mode)– Device width and height– Width and height of the browser window
@media only screen and (max-device-width: 480px) {body{ width:460px;}section#sidebar, section#posts{ float: none; width: 100%;}}
http://www.w3.org/TR/css3-mediaqueries/
@media all and (min-width: 640px) { #media-queries-1 { background-color: #0f0;} }
@media screen and (max-width: 2000px) { #media-queries-2 { background-color: #0f0; } }
Multiple Columns Layout
-webkit-column-count: 2; -webkit-column-rule: 1px solid #bbb;-webkit-column-gap: 2em;
#newsletter{-moz-column-count: 2;-webkit-column-count: 2;-moz-column-gap: 20px;-webkit-column-gap: 20px;-moz-column-rule: 1px solid #ddccb5;-webkit-column-rule: 1px solid #ddccb5;}
http://slides.html5rocks.com/#css-columnshttp://www.w3.org/TR/css3-multicol/
Responsive CSS
Evolución de los CSS
Object Oriented CSS
Basado en 2 principios:• Separar la estructura de la interface (CSS).
Usar clases lo más posible.• Separar los contenedores de los
contenidos.
http://github.com/stubbornella/oocss/wiki http://www.slideshare.net/stubbornella/object-oriented-csshttp://www.stubbornella.org/content/
Iniciado por: Nicole Sullivan C
OOCSS ofrece separar las características más comunes en módulos u objetos que pueden ser reusados.
….Usar múltiples clases para simular OO.
diseño consistente = código limpio = sitio rápido
….evolución de los CSS
Object Oriented CSS
1. Crear librerías2. Usar estilos con semántica
consistente3. Diseñar módulos que sean
transparente (png8) 4. Ser flexible5. Utiliza grids (utiliza UML para
describir HTML & CSS)
6. Minimizar uso de selectores7. Separar estructura del skin8. Separar contenedores y
contenidos9. Extender objetos y aplicar
múltiples clases a los elementos
10. Usa fuentes de YUi
Que cosas no se deberían hacer en OOCSS
Redundancia
Nunca ser específico en un elemento:
div.myClass {….}
A menos que se extienda de clases para trabajar en varios elementos.
Diseño web sensible (responsive)
Es diseñar una web considerando el comportamiento del usuario basado en el tamaño de pantalla, plataforma y la orientación.
Su practica consiste en el uso de mallas flexibles y layouts, imágenes y un uso inteligente de CSS media query.
Tipos de layouts
• Fixed-width: Rigid Pixels• Liquid or Fluid: Adapts to the
Viewport– Improving readability
• Elastic: Adapts to the Text Size– familiar with ems– Zooming is not the same as resizing
text, which is a separate browser
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design
Imágenes flexibles
<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">img {width: 20em;max-width: 500px;}
Sass makes CSS fun again (SCSS)
Es una extensión de CSS3, añade:• reglas de anidamiento, • mezcla de variables, • herencia de selectores • y más.
Hay dos sintaxis:• Archivos SCSS que usa la extensión .scss.• Sintaxis anterior es conocido como Sass (.sass).
http://sass-lang.com NOTA: Sólo para RUBY
SCSS
Variables
Herencia selectoresMezcla
Anidación
http://sass-lang.com/tutorial.html
Variables
Operaciones & funciones
http://sass-lang.com/tutorial.html
Variables
Interpolaciones
MezclasMixins are defined using the “@mixin” directive, which takes a block of styles that can then be included in another selector using the “@include” directive.
Mezclas
Argumentos
@import
SASS Referencias
$type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } }
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
@for $i from 1 through 3 { .item-#{$i} { width: 2em *
$i; } }
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon { background-image:
url('/images/#{$animal}.png'); } }
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
The dynamic stylesheet language (LESS)
• LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
• LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js and Rhino.
http://lesscss.org/
