css3
DESCRIPTION
A brief of CSS3 propertiesTRANSCRIPT
![Page 2: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/2.jpg)
• Introducción CSS• CSS 3 • Object Oriented CSS• Diseño web sensible (responsive
Design)• SASS• LESS
CON
TEN
IDO
![Page 3: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/3.jpg)
Para que sirve PCascading Style Sheets (CSS) ?
Plantilla HTML
+ CSS =
HTML
![Page 4: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/4.jpg)
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;}
![Page 5: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/5.jpg)
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 { ... }
![Page 6: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/6.jpg)
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; }
![Page 7: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/7.jpg)
Borders
Selectores
Transformaciones
Fondos múltiplesHSLA & RGBA
word-wrap: break-word
http://www.css3.info/http://css3test.com/
Módulos CSS3
![Page 8: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/8.jpg)
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
![Page 9: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/9.jpg)
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 )
![Page 10: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/10.jpg)
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
![Page 11: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/11.jpg)
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
![Page 12: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/12.jpg)
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/
![Page 13: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/13.jpg)
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
![Page 14: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/14.jpg)
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/
![Page 15: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/15.jpg)
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);
![Page 16: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/16.jpg)
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/
![Page 17: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/17.jpg)
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';}
![Page 18: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/18.jpg)
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
![Page 19: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/19.jpg)
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
![Page 20: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/20.jpg)
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;
![Page 21: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/21.jpg)
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;}
![Page 22: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/22.jpg)
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
![Page 23: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/23.jpg)
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; } }
![Page 24: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/24.jpg)
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/
![Page 25: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/25.jpg)
Responsive CSS
Evolución de los CSS
![Page 26: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/26.jpg)
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
![Page 27: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/27.jpg)
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
![Page 28: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/28.jpg)
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.
![Page 29: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/29.jpg)
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.
![Page 30: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/30.jpg)
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
![Page 31: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/31.jpg)
Imágenes flexibles
<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">img {width: 20em;max-width: 500px;}
![Page 32: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/32.jpg)
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
![Page 33: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/33.jpg)
SCSS
Variables
Herencia selectoresMezcla
Anidación
http://sass-lang.com/tutorial.html
![Page 35: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/35.jpg)
Variables
Operaciones & funciones
http://sass-lang.com/tutorial.html
![Page 36: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/36.jpg)
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.
![Page 37: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/37.jpg)
Mezclas
Argumentos
@import
![Page 38: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/38.jpg)
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; }
![Page 39: CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c77da54a7959e4208b4572/html5/thumbnails/39.jpg)
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/