Yes we can!Yes we can!
vw / vhvw / vh
vmin / vmaxvmin / vmax
Entre os nossos clientes:Entre os nossos clientes:
93,63% - Navegadores de Verdade
4,64% - Internet Explorer 10 e 11
1,73% - Internet Explorer 9 ou menor
IE 8 morreuIE 8 morreu
IE 9 subiu no telhadoIE 9 subiu no telhado
::placeholder::placeholder
https://css-tricks.com/snippets/https://css-tricks.com/snippets/
css/style-placeholder-text/css/style-placeholder-text/
CountersCounters
http://davidwalsh.name/css-couhttp://davidwalsh.name/css-cou
ntersnters
Background position edgesBackground position edges
background-position:background-position:
bottom 50px right 20pxbottom 50px right 20px
Background sizeBackground size
background-size: 20px 30px;background-size: 20px 30px;
background-size: contain;background-size: contain;
background-size: cover;background-size: cover;
https://css-tricks.com/almanachttps://css-tricks.com/almanac
/properties/b/background-size//properties/b/background-size/
Multiple backgroundsMultiple backgrounds
http://www.css3.info/preview/http://www.css3.info/preview/
multiple-backgrounds/multiple-backgrounds/
Box-shadowBox-shadow
http://www.cssmatic.com/boxhttp://www.cssmatic.com/box
-shadow-shadow
RGBARGBA
http://tableless.com.br/css3-bhttp://tableless.com.br/css3-b
reve-introducao-a-rgba/reve-introducao-a-rgba/
GradientesGradientes
http://www.colorzilla.com/gradhttp://www.colorzilla.com/grad
ient-editor/ient-editor/
Text-shadowText-shadow
Text-shadow
Text-shadow
Text-shadow
Text-shadow
Text-shadow
Text-shadow
min-width / max-widthmin-width / max-width
min-height / max-heightmin-height / max-height
.slide {.slide {
width: 100vw;width: 100vw;
height: 100vh;height: 100vh;
}}
#quadrado {#quadrado {
width: 90vmin;width: 90vmin;
height: 90vmin;height: 90vmin;
}}
remrem
http://tableless.com.br/unidadhttp://tableless.com.br/unidad
e-pixels-em-rem/e-pixels-em-rem/
box-sizingbox-sizing
http://www.binvisions.com/artihttp://www.binvisions.com/arti
cles/box-sizing-property-diffecles/box-sizing-property-diffe
rence-content-border/rence-content-border/
ColunasColunas
http://www.css3.info/preview/http://www.css3.info/preview/
multi-column-layout/multi-column-layout/
CálculosCálculos
http://www.maujor.com/tutorialhttp://www.maujor.com/tutorial
/css3-funcao-css-calc.php/css3-funcao-css-calc.php
div {div {
width: calc(50% - 100px);width: calc(50% - 100px);
height: calc(100vh - 50px);height: calc(100vh - 50px);
}}
FlexboxFlexbox
https://css-tricks.com/snippets/https://css-tricks.com/snippets/
css/a-guide-to-flexbox/css/a-guide-to-flexbox/
Que mais?Que mais?
Mais:Mais:
OutlineOutline
word-break: break-allword-break: break-all
text-overflowtext-overflow
TransformaçõesTransformações
Mais:Mais:
border-radiusborder-radius
::before e ::after::before e ::after
Transições e animaçõesTransições e animações
Elcio FerreiraElcio Ferreira
elcio@visie.com.brelcio@visie.com.br
twitter: @elciotwitter: @elcio
http://elcio.com.br/http://elcio.com.br/

Yes we can!