CSS3

CSS3
STYLING

Diego Alejandro Carrera Gallego
dcarrera@dit.upm.es

CONTENIDO • Introducción CSS
• CSS 3
• Object Oriented CSS
• Diseño web sensible (responsive
Design)
• SASS
• LESS

Para que sirve
PCascading Style Sheets (CSS) ?

+ CSS =

Plantilla HTML 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
*{
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 { ... }

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; }

Módulos CSS3
Borders

Transformaciones

HSLA & RGBA
Fondos múltiples http://www.css3.info/
http://css3test.com/

Selectores
word-wrap: break-word

CSS3
Módulos Niveles W3C
1. Efectos visuales de imágenes:
– Fondos y bordes 1. Working Draft, primera
publicación disponible con las
– Gradientes
especificaciones
2. Transformaciones 2. Last Call, borrador con fechas
3. 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, un
5. Transiciones y animaciones, cambios y documento bien revisado, para
movimientos sin usar FLASH o Javascript. su aprobacion final.
5. Recommendation, completo y
6. Media Queries finalizado ~ standard.
7. 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 …

#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-corners
http://www.css3.info/preview/rounded-border/
http://www.w3.org/TR/css3-background/

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-1
http://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-2
http://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-gradients
http://www.w3.org/TR/css3-background/

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-opacity
http://slides.html5rocks.com/#css-color
http://www.css3.info/preview/hsla/
http://www.w3.org/TR/css3-color/

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 {
}
.rotate90 {
}

http://playground.html5rocks.com/#2d_transforms
http://www.w3.org/TR/css3-2d-transforms/

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-fonts
http://www.w3.org/TR/css3-fonts/

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-wrapping
http://www.w3.org/TR/css3-text/

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: • 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-shadow
http://playground.html5rocks.com/#text_and_box_shadow

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/#selectors
http://dev.l-c-n.com/CSS3-selectors/browser-support.php
www.w3.org/TR/css3-selectors
http://slides.html5rocks.com/#css-selectors

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 */
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/

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/

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-columns
http://www.w3.org/TR/css3-multicol/

Evolución de los CSS

Responsive CSS

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/wiki
http://www.slideshare.net/stubbornella/object-oriented-css
http://www.stubbornella.org/content/

Object Oriented CSS

1. Crear librerías 6. Minimizar uso de selectores
2. Usar estilos con semántica 7. Separar estructura del skin
consistente 8. Separar contenedores y
3. Diseñar módulos que sean contenidos
transparente (png8) 9. Extender objetos y aplicar
4. Ser flexible múltiples clases a los
5. Utiliza grids (utiliza UML para elementos
describir HTML & CSS) 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 Anidación

Mezcla Herencia selectores

http://sass-lang.com/tutorial.html

Anidación

Referencias
padre


Variables

Operaciones &
funciones


Variables

Interpolaciones

Mixins are defined using the “@mixin” directive, which takes a block Mezclas
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 { @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

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/

CSS3
STYLING
¿Preguntas?
Diego Alejandro Carrera Gallego
dcarrera@dit.upm.es

CSS3

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (9)

Similar a CSS3

Similar a CSS3 (20)

Último

Último (20)

CSS3