Created
March 26, 2013 19:51
-
-
Save anonymous/5248598 to your computer and use it in GitHub Desktop.
Flexbox demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Flexbox demo | |
*/ | |
footer { | |
background-image: url(http://mirrorfashion.net/loja/img/fundo-rodape.png); | |
width: 100%; | |
text-align: center; /* Para centralizar o container */ | |
} | |
.container { | |
width: 940px; | |
/* | |
* O container vira um container flex. | |
* Os filhos dele terão o tamanho flexível, | |
* de acordo com as regras que escrevermos | |
*/ | |
display: box; | |
/* | |
* Os filhos desse container devem ficar | |
* centralizados verticalmente. Outras possibilidades: | |
* - stretch: estica as caixas | |
* - start: as caixas ficam grudadas no topo | |
* - end: as caixas ficam grudadas na base | |
*/ | |
box-align: center; | |
} | |
footer h1 { | |
height: 52px; | |
text-indent: -9999px; | |
background-image: url(http://mirrorfashion.net/loja/img/logo-rodape.png); | |
background-repeat: no-repeat; | |
/* | |
* Essa caixa deve ocupar um espaço com uma proporção | |
* 1 dentro do footer. Como a lista .social não tem | |
* essa proporção definida, isso faz com que esse | |
* elemento ocupe todo o espaço disponível antes do | |
* .social | |
*/ | |
box-flex: 1; | |
} | |
.social li { | |
display: inline-block; | |
list-style: none; | |
margin-left: 25px; | |
} | |
.social li a { | |
height: 32px; | |
width: 32px; | |
display: block; | |
text-indent: -9999px; | |
} | |
.social li a[href*="facebook.com"] { | |
background-image: url(http://mirrorfashion.net/loja/img/facebook.png); | |
} | |
.social li a[href*="twitter.com"] { | |
background-image: url(http://mirrorfashion.net/loja/img/twitter.png); | |
} | |
.social li a[href*="plus.google.com"] { | |
background-image: url(http://mirrorfashion.net/loja/img/googleplus.png); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- content to be placed inside <body>…</body> --> | |
<footer> | |
<div class="container"> | |
<h1>Mirror Fashion</h1> | |
<ul class="social"> | |
<li><a href="http://facebook.com/mirrorfashion">Facebook</a></li> | |
<li><a href="http://twitter.com/mirrorfashion">Twitter</a></li> | |
<li><a href="http://plus.google.com/mirrorfashion">Google+</a></li> | |
</ul> | |
</div> | |
</footer> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment