Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

CSS3 Para imprimir

No description
by

José Pol Lezcano

on 18 October 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of CSS3 Para imprimir

Brainstorm
"Mind Mapping" Method
Main Idea
BRAINSTORM
ELEMENTS
copy and paste as needed and take advantage of an infinite canvas!
Write the primary idea of the mind map in the center. Use different color notes to differentiate between topics. Use lines and arrows to create branches that connect ideas to each other.
CSS3 Introducción
CSS3 es una ampliación de los "módulos" disponibles para dar formato al HTML.
Dispondremos de más selectores, opciones de background, texto, de animaciones...
CSS3 está todavía en desarrollo pero la mayoría de navegadores lo reconocen.
CSS3 Bordes
border-radius:
redondea las esquinas.
div
{
border:2px solid;
border-radius:25px 25px 25px 25px;
}
box-shadow:
coloca sombras en las cajas. Funciona igual que text-shadow.
div
{
box-shadow: 10px 10px 5px #888888;
}
CSS3
border-image:
permite cargar una imagen y utilizarla como borde.
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 y anteriores */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
El funcionamiento no es nada intuitivo. En mi opinión es más eficaz cargar una imagen como fondo en un div.
Tenéis dos ejemplos w3schools:
http://www.w3schools.com/cssref/css3_pr_border-image.asp
Fíjaos en el uso de -webkit- y de -o- para hacer compatible las instrucciones con los navegadores opera y safari
CSS3 background
background-size:
permite dar tamaño a la imagen del fondo de la misma manera que a cualquier img, o div. También en tanto por ciento (%).
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
background-origin:
permite definir el origen de la imagen de fondo en la caja de contenido, en la del padding o en la del borde. Los valores posibles són
content-box
,
padding-box
, y
border-box
.
CSS3 efectos de texto
text-shadow:
ya vimos esta propiedad, aplica sombras a un texto.
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
}
h1 {text-shadow: 5px 5px 5px #FF0000;}
text-overflow:
en combinacion con la propiedad
overflow:hidden; white-spacing:no-wrap;
esconde el texto sobrante en, por ejemplo, un div. Los valores son:
clip;
que corta el texto al final del div
ellipsis;
que muestra tres puntos "..." al final del texto para indicar la interrupción.
Hay muchas otras propiedades nuevas para textos en CSS3, pero los navegadores actuales todavía no las reconocen
word-break:
permite que se rompan las palabras en los cambios de línea con el valor
break-all
. Con valor
normal
o
keep-all
, mashomenosh (como diría Rajoy) hace lo mismo.
.d01
{
width:200px;
border:1px solid black;
word-break:break-all;
}
CSS3 fuentes, @font-face
Con la regla
@font-face
solventaremos el problema de tener que recurrir a las fuentes seguras. Veamos la sintaxis y cómo funciona primero, y un par de webs que pueden ayudarnos en esa tarea.
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Se declara
@font-face
y se abren llaves. En su interior
font-family:
indica el nombre con el que se llamará a la fuente.
src:
indica dónde debe estar guardada la fuente.
Ejemplo de recursos web que pueden hacernos el trabajo
dafont.com
es una web de fuentes gratuitas que proporciona los archivos en formato .ttf
fontsquirrel.com
tiene una erramienta que nos proporciona el css con la regla @font-face y los archivos necesarios de forma ordenada.
CSS3 transformaciones 2D
la propiedad
transform:
permite hacer transformaciones en 2D de los elementos.
Podremos mover, girar, y estirar, elementos.
Explorer 10, Firefox y Opera soportan este método.
Chrome y Safari necesitan el prefijo
-webkit-
.
Explorer 9 necesita el prefijo
-ms-
.
transform: translate (x,y)
, produce un desplazamiento en el eje x y en el eje y.
translaciones, translate(x,y)
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
Recordad los prefijos -webkit- y -ms-
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
transform: rotate (ángulo)
, produce una rotación con el ángulo indicado (un ángulo se indica con el sufijo deg).
rotaciones, rotate(ángulo)
Recordad los prefijos -webkit- y -ms-
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}
transform: scale (x,y)
, produce la variación en escala del elemento en tanto por uno (no funciona con %).
escalar, escale(x,y)
Recordad los prefijos -webkit- y -ms-
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
transform: skew (x,y)
, estira el elemento en vertical y horizontal determinado por ángulo con el sufijo deg.
estirar, skew(x,y)
Recordad los prefijos -webkit- y -ms-
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
transform: matrix (x,a,b,y,c,d,)
, reune todas las propiedades en una.
x, y, determinan la escala.
a, b, determinan el skew.
c, d, determina la translación.
se puede conseguir girar un objeto con una nada intuitiva combinación de ambas. De hecho el ejemplo produce un giro de 30º (cos 30º = 0.886; sen 30º =0.5).
el método matrix(a,b,c,d,e,f)
Recordad los prefijos -webkit- y -ms-
la propiedad transform
translateX(x)
translateY(y)
scaleX(x)
scaleY(y)
skewX(x o ángulo x)
skewY(y o ángulo y)
otros métodos de transform
CSS3 transformaciones 3D
Si bien existen otras opciones de transformaciones en 3D, estas no están implantadas todavía en mucho de los navegadores. Nos quedaremos con las rotaciones en 3D en el eje x y en el eje y.
Para que nos entendamos. Una rotación 3D es lo que hacemos al girar una hoja de papel para ver su reverso. Una rotación en 2D es lo que hacemos cuando giramos esa hoja sobre la mesa y la ponemos con las letras al revés, por ejemplo.
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
transform: rotateX (Xdeg)
, produce una rotación segun el eje X.
rotaciones 3D
transform: rotateY (Ydeg)
, produce una rotación segun el eje Y.
no funciona para opera. Para crhome y safari es necesario -webkit-
CSS3 transiciones
Se pueden aplicar la transición a varias propiedades simultaneamente enumerándolas con comas. Las propiedades son:
transition:
como propiedad corta que puede aplicar todos los valores del resto de propiedades.
transition-property:
indica que propiedades se transforamrán.
transition-duration:
indica el tiempo que dura la transición en segundos.
transition-timing-function:
indica cómo se aplica la transición en el tiempo. Los valores son:
linear
, la velocidad es constante
ease
, la velocidad es lenta en el principio y en el final y rápida en medio. Es la que se aplica por defecto.
(luego hay más opciones,
ease-in, ease-out, ease-in-out, y cubic-bezier(a,b,c,d)
para definir la función uno mismo)
transition-delay:
especifica un retraso en segundos para el inicio de la transición.
div
{
transition: transform 2s, background 2s;
-webkit-transition: -webkit-transform 2s, background 2s;
}
Las transiciones nos permiten aplicar cambios de estilos en determinados eventos si tener que utilizar animaciones flash o JavaScript.
es necesario usar -webkit- para chorme y safari
Google Fonts
permite incrustar fuentes desde un enlace. Todas las fuentes que aparecen son públicas y está totalmente garantizado si se tiene conexión a internet y mientras Google no quiebre o cierre el servicio (¿alguien se acuerda de Google Reader?)
CSS3 animaciones
Para crear animaciones hay que aplicar la regla @keyframe.

Primero hemos de crear la animación con un nombre. En el ejemplo la animación se llama "myfirst":
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
Cuando la animación ha sido creada la llamamos desde un selector (un id, class, tipo de elemento,...). Si no, la animación no sabe dónde se ha de aplicar.
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
Podemos hacer la animación tan compleja como queramos gracias a que podemos definir cuando a de suceder algo en un porcentaje de la duración total de la animación. Mira este ejemplo que aplica cambio de posición y de color de fondo.
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
Las propiedades completas de las animaciones son:
@keyframes
animation:
animation-name:
animation-duration:
animation-timing-function: linear, ease, ease-in, ease-out, cubic-bezier(n,n,n,n)
animation-delay:
animation-iteration-count: puede ser un número o valor infinite.
animation-direction: normal, reverse, alternate, alternate-reverse
animation-play-state: paused, running (para pararla o ponerla en marcha desde un evento externo, JavaScript)
CSS3 Columnas Múltiples
Con CSS3 podemos crear mútliples columnas de texto al estilo de los periódicos. Las principales propiedades son:
column-count: define el número de columnas.
column-gap: define la separación entre columnas.
column-rule: define una línea de separación entre columnas.

Estas propiedades para funcionar necesitan los prefijos:
-moz- para firefox
-webkit- para chrome y safari..
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
Ojo, hacen falta los prefijos -moz- y
-webkit- para Firefox, Chrome y Safari
Full transcript