Your SlideShare is downloading. ×
0
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS3

1,028

Published on

A brief of CSS3 properties

A brief of CSS3 properties

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,028
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
33
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS3 STYLINGDiego Alejandro Carrera Gallego dcarrera@dit.upm.es
  • 2. CONTENIDO • Introducción CSS • CSS 3 • Object Oriented CSS • Diseño web sensible (responsive Design) • SASS • LESS
  • 3. Para que sirve PCascading Style Sheets (CSS) ? + CSS =Plantilla HTML HTML
  • 4. 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; }
  • 5. Selectores …• Selectores básicos *{ margin: 0; – Selector universal padding: 0; } h1, h2, h3 { – Selector de tipo o etiqueta color: #8A8E27; font-weight: normal;} – Selector descendiente p span { color: red; } a span{color:blue} – Selector de clase .destacado { color: red; } p.destacado{color:blue} – Selector de ID #destacado { color: red; } p#destacado{color:blue} – Combinación de selectores básicos div.aviso span.especial { ... } ul#menuPrincipal li.destacado a#inicio { ... }
  • 6. Selectores• Selectores avanzados – Selector de hijo <p><span>Texto1</span></p> (CUMPLE) <p><a href="#"><span>Texto2</span></a></p> (NO CUMPLE) p > span{ margin: 0; padding: 0; } – Selector adyacente <body> H1 + h2 { color: red;} <h1>Titulo1</h1> (APLICA) Deben cumplir dos condiciones: <h2>Subtítulo</h2> (APLICA) elemento1 y elemento2 deben ser hermanos, por lo <h2>Otro subtítulo</h2> (NO APLICA h1 +h2) que su elemento padre debe ser el mismo. </body> elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML de la página. – Selector de atributos / * 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; }
  • 7. Módulos CSS3Borders Transformaciones HSLA & RGBA Fondos múltiples http://www.css3.info/ http://css3test.com/ Selectores word-wrap: break-word
  • 8. CSS3 Módulos Niveles W3C1. Efectos visuales de imágenes: – Fondos y bordes 1. Working Draft, primera publicación disponible con las – Gradientes especificaciones2. Transformaciones 2. Last Call, borrador con fechas3. Fuentes con mejores tipografías limites para comentarios finales – Fuentes 3. Candidate recommendation, es estable y puede ser – Texto implementado.4. Selectores mejorados 4. Proposed recommendation, un5. Transiciones y animaciones, cambios y documento bien revisado, para movimientos sin usar FLASH o Javascript. su aprobacion final. 5. Recommendation, completo y6. Media Queries finalizado ~ standard.7. Múltiple columnas
  • 9. Prefijosdiv {-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 )
  • 10. Bordes e imágenes … #mydiv{ -webkit-border-radius:50px; -moz-border-radius: 50px; } #mydiv{ -webkit-border-top-left- Rounded corners radius:50px; -webkit-border-bottom-left- radius:50px; -moz-border-radius- topleft:50px; -moz-border-radius- bottomright: 5px; }http://slides.html5rocks.com/#rounded-cornershttp://www.css3.info/preview/rounded-border/http://www.w3.org/TR/css3-background/
  • 11. Bordes e imágenes #header { -moz-border-image: url(border.png) 27 27 27 27 round round; }http://slides.html5rocks.com/#border-imagehttp://css-tricks.com/understanding-border-image/http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri
  • 12. 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_modelhttp://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/
  • 13. 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
  • 14. 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/
  • 15. Opacidad & color Fondos semitransparentes: color: rgba(255, 0, 0, 0.75); • RGBA (red-green-blue-alpha) or • HSLA (Hue / saturation / luminance / alpha) background: rgba(0, 0, 255, 0.75); Hexadecimal: #A6DADC RGB: 166, 218, 220 RGBA: 166, 218, 220, 1 HSL: 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);http://slides.html5rocks.com/#css-opacityhttp://slides.html5rocks.com/#css-colorhttp://www.css3.info/preview/hsla/http://www.w3.org/TR/css3-color/
  • 16. 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/
  • 17. Webfonts @font-face { header { font-family: LeagueGothic; font-family: LeagueGothic; src: url(LeagueGothic.otf); } } @font-face { font-family: Droid Sans; src: url(Droid_Sans.ttf); }http://slides.html5rocks.com/#web-fontshttp://www.w3.org/TR/css3-fonts/
  • 18. Text wrapping div { 1 text-overflow: ellipsis } 2 … overflow: hidden; 3 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/
  • 19. 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
  • 20. Sombras • text-shadow: • box-shadow: rgba(64, 64, 64, 0.5) rgba(0, 0, 128, 0.25) 5px -3px 5px 6px 2px; 1px;http://slides.html5rocks.com/#css-shadowhttp://playground.html5rocks.com/#text_and_box_shadow
  • 21. Selectores CSS3 tr:nth-of-type(even){ background-color: #F3F3F3; } Bolding the Last Row with :last-child tr:nth-of-type(odd) { p{ margin-bottom: 20px } background-color:#ddd; #sidebar p:last-child{ } margin-bottom: 0; } td:last-child{ Negation :not(.box){ font-weight: bolder; color: #00c; } } tr:last-child td:last-child{ font-size:24px; } Counting Backward with :nth-last- child tr:nth-last-child(2){ color: green; } tr:nth-last-child(-n+3) td{ text-align: right; }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
  • 22. Animaciones y transiciones/* We are defining the "timeline" of the animation,* each line representing a keyframe.*/ •animation-delay@-moz-keyframes bounce { •animation-direction /* Translate the element 400px to the right */ /* Here we are animating "-moz-tranform", •animation-iteration-count* but most CSS properties can be animated: •animation-name* width, color, font-size, box-shadow, ... •animation-play-state*/ •animation-timing-function 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 */ http://animatable.com/demos/madmanimation/ -moz-animation-iteration-count: infinite; http://www.cssplay.co.uk/menu/css3-animation.html#x http://playground.html5rocks.com/#transitions /* the animation will play 3s after being applied */ http://animatable.com/demos/madmanimation/ -moz-animation-delay: 3s; 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/
  • 23. 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{ @media all and (min-width: 640px) { float: none; #media-queries-1 { background-color: #0f0;} width: 100%; } } } @media screen and (max-width: 2000px) { #media-queries-2 { background-color: #0f0; } }http://www.w3.org/TR/css3-mediaqueries/
  • 24. Multiple Columns Layout #newsletter{ -webkit-column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; -webkit-column-rule: 1px solid #bbb; -moz-column-gap: 20px; -webkit-column-gap: 20px; -webkit-column-gap: 2em; -moz-column-rule: 1px solid #ddccb5; -webkit-column-rule: 1px solid #ddccb5; }http://slides.html5rocks.com/#css-columnshttp://www.w3.org/TR/css3-multicol/
  • 25. Evolución de los CSS Responsive CSS
  • 26. Object Oriented CSS diseño consistente = código limpio = sitio rápido Iniciado por: Nicole Sullivan C Basado en 2 principios: • Separar la estructura de la interface (CSS). Usar clases lo más posible. • Separar los contenedores de los contenidos. OOCSS ofrece separar las características más comunes en módulos u objetos que pueden ser reusados. ….evolución de los CSS….Usar múltiples clases para simular OO.http://github.com/stubbornella/oocss/wikihttp://www.slideshare.net/stubbornella/object-oriented-csshttp://www.stubbornella.org/content/
  • 27. Object Oriented CSS1. Crear librerías 6. Minimizar uso de selectores2. Usar estilos con semántica 7. Separar estructura del skin consistente 8. Separar contenedores y3. Diseñar módulos que sean contenidos transparente (png8) 9. Extender objetos y aplicar4. Ser flexible múltiples clases a los5. Utiliza grids (utiliza UML para elementos describir HTML & CSS) 10. Usa fuentes de YUi
  • 28. Que cosas no se deberían hacer en OOCSSRedundanciaNunca ser específico en un elemento: div.myClass {….}A menos que se extienda de clasespara trabajar en varios elementos.
  • 29. Diseño web sensible (responsive)Es diseñar una web considerando el comportamiento del usuariobasado en el tamaño de pantalla, plataforma y la orientación.Su practica consiste en el uso de mallas flexibles y layouts, imágenes yun uso inteligente de CSS media query.
  • 30. 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 browserhttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design
  • 31. Imágenes flexibles<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">img {width: 20em;max-width: 500px;}
  • 32. 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
  • 33. SCSS Variables Anidación Mezcla Herencia selectoreshttp://sass-lang.com/tutorial.html
  • 34. Anidación Referencias padrehttp://sass-lang.com/tutorial.html
  • 35. Variables Operaciones & funcioneshttp://sass-lang.com/tutorial.html
  • 36. Variables InterpolacionesMixins are defined using the “@mixin” directive, which takes a block Mezclasof styles that can then be included in another selector using the“@include” directive.
  • 37. Mezclas Argumentos @import
  • 38. SASS Referencias $type: monster; p { @if $type == ocean { @for $i from 1 through 3 { color: blue; } .item-#{$i} { width: 2em * $i; @else if $type == matador { color: red; } } @else if $type == monster { color: green; } } @else { color: black; } } $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } @each $animal in puma, sea-slug, egret, $i: $i - 2; salamander { } .#{$animal}-icon { background-image: url(/images/#{$animal}.png); } }http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
  • 39. 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/
  • 40. CSS3 STYLING¿Preguntas? Diego Alejandro Carrera Gallego dcarrera@dit.upm.es

×