Date post: | 27-Jan-2015 |
Category: |
Design |
Upload: | jose-leiva |
View: | 108 times |
Download: | 2 times |
José Leiva - @leivajd
AÑO NUEVO, HERRAMIENTAS NUEVASDRUPALEADA ENERO 2012
2011, CSS3, HTML5, RWD,WebFonts, y más
CSS3 magic!1!
Flash killer!2!
http://code.google.com/p/html5shim/
Web fonts3!
http://www.webtypography.net/
Salvadoras!4!
RWD5!
1. Fluid Grid2. Media Queries3. Imágenes, videos, fonts, flexibles.
.col1 { width: 6.25%;} /*60 / 960*/
.col2 { width: 14.58333333333333%;} /*140 / 960*/
.col3 { width: 22.91666666666667%; } /*220 / 960*/
@media screen and (max-width: 600px) { .class { background: transparent; }}
*Aplica si es menor a 600px.
@media only screen and (min-width: 768px) {
}
*Aplica si es mayor a 768px.
@media screen and (min-width: 600px) and (max-width: 900px) { .column { float: none; }}*Aplica si es entre 600px - 900px.
img,embed,object,video { max-width: 100%;}
h2 { margin-bottom: .75em; font-size : 2em; /* 36 / 16 = 2 */ line-height : 1.2; }
Mobile First
@media only screen and (min-width: 768px) {
}
*Aplica si es mayor a 768px.
Frameworks6!
Qué tal uno propio?