14/07/2017 4 Dicas (no to comuns) de CSS - Labs Bluesoft

(HTTP://LABS.BLUESOFT.COM.BR)
Home (http://labs.bluesoft.com.br)/ Artigos (http://labs.bluesoft.com.br/category/artigos/) / 4 Dicas (no to comuns) de CSS

PAPO RETO (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/PAPO-RETO/)

ARTIGOS (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/ARTIGOS/)

PODCAST (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/PODCAST/)

QUEM SOMOS (HTTP://LABS.BLUESOFT.COM.BR/QUEM-SOMOS/)

OPORTUNIDADES (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/OPORTUNIDADES/)

CONTATO (HTTP://LABS.BLUESOFT.COM.BR/CONTATO/)

4 Dicas (No To Comuns) De CSS

27 de abril de 2015 Ismael Soares (http://labs.bluesoft.com.br/author/ismael-soares/)

Artigos (http://labs.bluesoft.com.br/category/artigos/), Programao (http://labs.bluesoft.com.br/category/programacao-limpa/)
0 (http://labs.bluesoft.com.br/4-dicas-nao-tao-comuns-de-css/#respond)

Seja sempre o primeiro a ver nossas novidades Meu e-mail Quero receber por e-mail
As vezes na criao de uma landing page, um portflio ou at mesmo um site procuramos solues em plugins ou frameworks como bootstrap

(http://getbootstrap.com/), foundation (http://foundation.zurb.com/) ou qualquer outro. Neste post estarei dando algumas dicas de coisas que podem ser feitas
apenas com CSS.

COMPATIBILIDADE DO CSS
Preste ateno na compatibilidade, nem todas as regras funcionam no IE em todos os browsers!

http://labs.bluesoft.com.br/4-dicas-nao-tao-comuns-de-css/ 1/6
 14/07/2017 4 Dicas (no to comuns) de CSS - Labs Bluesoft

1. FULLSCREEN SECTION
comum os websites terem sees que ocupem 100% da tela.Como fazer isso? Existem algumas solues usando apenas CSS, mas elas exigemmuitas regras para
(HTTP://LABS.BLUESOFT.COM.BR)

que o elemento ocupe 100% da tela. Para algo to complexo, precisamos da regra de css abaixo:

PAPO RETO (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/PAPO-RETO/)

section {
height: 100vh;
} ARTIGOS (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/ARTIGOS/)

Sim,PODCAST
s isso. (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/PODCAST/)
1 viewport height = 1% da altura de browser, consequentemente voc pode criar sees ocupando 100% com 100vh.
QUEM SOMOS (HTTP://LABS.BLUESOFT.COM.BR/QUEM-SOMOS/)
Ver exemplo
OPORTUNIDADES (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/OPORTUNIDADES/)
(http://codepen.io/priscilang/pen/KpPoam)Compatibilidade: O viewport unit (http://caniuse.com/#feat=viewport-units) compatvel com 83,28% dos browsers.

CONTATO (HTTP://LABS.BLUESOFT.COM.BR/CONTATO/)

2. SCROLL SEM JS/JQUERY

Assim como sees fullscreen, comum encontrarmos scroll com animao. D um efeito bem mais legal na pgina em vez de usar apenas o html puro.

A soluo apresentada abaixo no funciona em todos os casos, pois necessrio que voc conhea a altura de cada seo, mas seguindo o nosso exemplo anterior,
no teremos problemas.

body {
overflow: hidden;
}

section {
height: 100vh;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}

#section-1:target ~ section {
-webkit-transform: translateY(0vh);
transform: translateY(0vh);
}

Como funciona? O pseudo-selector :target ser disparado quando o elemento com o mesmo id do atributo href for encontrado.

http://labs.bluesoft.com.br/4-dicas-nao-tao-comuns-de-css/ 2/6
 14/07/2017 4 Dicas (no to comuns) de CSS - Labs Bluesoft

Assim, combinamos com a tcnica do seletor ~ para selecionar outro elemento atravs do :target que tem um id igual ao hash da url atual.

Para cada id, passamos qual a posio da tela atravs do translateY (por isso precisamos da altura denida para cada section).

(HTTP://LABS.BLUESOFT.COM.BR)
Confuso? Veja o exemplo (http://codepen.io/priscilang/pen/RPbMpb).
Compatibilidade: O pseudo-selector (http://caniuse.com/#search=target) :target compatvel com 97,06% e o transform (http://caniuse.com/#search=transforms)
PAPO RETO (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/PAPO-RETO/)
compatvel com 91, 81% dos browsers.

ARTIGOS (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/ARTIGOS/)

PODCAST (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/PODCAST/)

QUEM SOMOS (HTTP://LABS.BLUESOFT.COM.BR/QUEM-SOMOS/)

OPORTUNIDADES (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/OPORTUNIDADES/)

CONTATO (HTTP://LABS.BLUESOFT.COM.BR/CONTATO/)

3. CENTRALIZAR O TEXTO VERTICALMENTE

Nada de table-cell, line-height ou position relative/absolute. Tudo o que voc precisa :

section {
display: flex;
justify-content: center;
flex-direction: column;
}

O display: ex nos permite deixar o elemento num nvel block exvel. O justify-content alinha o contedo no centro dependendo do ex-direction, que apresenta os
elementos verticalmente no caso de column.

Ver exemplo (http://codepen.io/priscilang/pen/GJRpeo).

Compatibilidade: Todas as propriedades ex (http://caniuse.com/#search=ex) so compatveis em 92,99% dos browsers.

http://labs.bluesoft.com.br/4-dicas-nao-tao-comuns-de-css/ 3/6
 14/07/2017 4 Dicas (no to comuns) de CSS - Labs Bluesoft

(HTTP://LABS.BLUESOFT.COM.BR)

PAPO RETO (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/PAPO-RETO/)

ARTIGOS (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/ARTIGOS/)

PODCAST (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/PODCAST/)

QUEM SOMOS (HTTP://LABS.BLUESOFT.COM.BR/QUEM-SOMOS/)

OPORTUNIDADES (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/OPORTUNIDADES/)

CONTATO (HTTP://LABS.BLUESOFT.COM.BR/CONTATO/)

4. CENTRALIZAR E CORTAR <IMG>

Outro problema comum quando temos cards, ou imagens que precisa ter um tamanho padronizado mas cada uma tem uma dimenso diferente.

Para isso, alm o tamanho necessrio (width e height) tudo que voc precisa :

img {
object-fit: cover;
}

O object-t age como o background-size para imagens no background, assim ele aceita como valores o contain e o cover.

Veja o exemplo (http://codepen.io/priscilang/pen/OVPpXR).

Compatibilidade: Esse o nosso amigo IE ainda no tem suporte, mas de resto temos uma compatibilidade (http://caniuse.com/#feat=object-t) 65.16%.

Essas foram algumas dicas no to comuns de CSS. Nos prximos posts estarei falando um pouco mais sobre html, css e js.Fique ligado

Related Articles:

API para Gerao de Grcos (http://bluesoft.wordpress.com/2007/12/29/api-para-geracao-de-gracos/)

JPA e Hibernate Existe diferena? (http://labs.bluesoft.com.br/?p=7946)
Mapeando views com Hibernate no spring-data (http://labs.bluesoft.com.br/?p=7917)
Java e JavaScript (http://labs.bluesoft.com.br/?p=7089)
Habilite o HTTP/2 no seu site hoje (http://labs.bluesoft.com.br/?p=7047)

---

Este Post um oferecimento de Acelerato Gesto de Projetos geis e Help Desk

No perca tempo, acesse acelerato.com (http://www.acelerato.com), cadastre-se gratuitamente e descubra como podemos ajud-lo.

Post Footer automatically generated by Add Post Footer Plugin (http://www.freetimefoto.com/add_post_footer_plugin_wordpress) for wordpress.

Curtir 29 pessoas curtiram isso. Cadastre-se para ver do que seus amigos gostam.

http://labs.bluesoft.com.br/4-dicas-nao-tao-comuns-de-css/ 4/6
 14/07/2017 4 Dicas (no to comuns) de CSS - Labs Bluesoft

(HTTP://LABS.BLUESOFT.COM.BR)
Artigos (Http://Labs.Bluesoft.Com.Br/Tag/Artigos/) Crop Center Img (Http://Labs.Bluesoft.Com.Br/Tag/Crop-Center-Img/)

PAPO
Css RETO (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/PAPO-RETO/)
(Http://Labs.Bluesoft.Com.Br/Tag/Css/) Dicas De CSS (Http://Labs.Bluesoft.Com.Br/Tag/Dicas-De-Css/)

Fullscreen Section (Http://Labs.Bluesoft.Com.Br/Tag/Fullscreen-Section/)

ARTIGOS (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/ARTIGOS/) Priscila Negreiros (Http://Labs.Bluesoft.Com.Br/Tag/Priscila-Negreiros/)

Smooth
PODCASTScroll (Http://Labs.Bluesoft.Com.Br/Tag/Smooth-Scroll/)
(HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/PODCAST/) Vertical Align (Http://Labs.Bluesoft.Com.Br/Tag/Vertical-Align/)

QUEM SOMOS (HTTP://LABS.BLUESOFT.COM.BR/QUEM-SOMOS/)

OPORTUNIDADES (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/OPORTUNIDADES/)

CONTATO
LEAVE (HTTP://LABS.BLUESOFT.COM.BR/CONTATO/)
A COMMENT

Name

Email

Website

Message

Notique-me sobre novos comentrios por e-mail.

SEND

Notique-me sobre novas publicaes por e-mail.

Pesquisar por:

Pesquisar PESQUISAR

CATEGORIAS

Categorias

Selecionar categoria

http://labs.bluesoft.com.br/4-dicas-nao-tao-comuns-de-css/ 5/6
 14/07/2017 4 Dicas (no to comuns) de CSS - Labs Bluesoft

(HTTP://LABS.BLUESOFT.COM.BR)

PAPO RETO (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/PAPO-RETO/)

ARTIGOS (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/ARTIGOS/)

PODCAST (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/PODCAST/)
(https://www.acelerato.com/projetos/)

QUEM SOMOS (HTTP://LABS.BLUESOFT.COM.BR/QUEM-SOMOS/)

OPORTUNIDADES (HTTP://LABS.BLUESOFT.COM.BR/CATEGORY/OPORTUNIDADES/)

CONTATO (HTTP://LABS.BLUESOFT.COM.BR/CONTATO/)

TPICOS RECENTES

Design Thinking | Larissa Ruana | Papo Reto (http://labs.bluesoft.com.br/design-thinking-larissa-ruana/)

O que UX? | Bruno Oliveira | Papo Reto (http://labs.bluesoft.com.br/o-que-e-ux/)

Bluesoft News #21 Melhores De Junho (http://labs.bluesoft.com.br/bluesoft-news-21-melhores-de-junho/)

Bluesoft News #20 Melhores De Maio (http://labs.bluesoft.com.br/bluesoft-news-20-melhores-de-maio/)

API para Gerao de Grcos (http://labs.bluesoft.com.br/api-para-geracao-de-gracos/)

TAGS

papo reto (http://labs.bluesoft.com.br/tag/papo-reto-2/)

bluesoft (http://labs.bluesoft.com.br/tag/bluesoft/)
andr faria (http://labs.bluesoft.com.br/tag/andre-faria/)
Agilidade (http://labs.bluesoft.com.br/tag/agilidade-certa/)
acelerato (http://labs.bluesoft.com.br/tag/acelerato/) Wilson Souza (http://labs.bluesoft.com.br/tag/wilson-souza/)

Bluesoft Labs (http://labs.bluesoft.com.br/tag/bluesoft-labs/)

ismael soares (http://labs.bluesoft.com.br/tag/ismael-soares/) Java (http://labs.bluesoft.com.br/tag/java/) scrum (http://labs.bluesoft.com.br/tag/scrum/)

gil (http://labs.bluesoft.com.br/tag/agil/) programao (http://labs.bluesoft.com.br/tag/programacao/)

http://labs.bluesoft.com.br/4-dicas-nao-tao-comuns-de-css/ 6/6