Cartão de Natal em CSS

Bloggermin deseja a todos um feliz Natal..,

Este post,na verdade, tem dois motivos, o primeiro é para desejar a cada um dos leitores deste blog, um Feliz Natal, porém, mais ainda, que estas datas são um pretexto para se reconciliar com quem discutimos, desfrutar de nossos entes queridos, e apreciar tudo o que temos para assim compartilhar com os outros um pouco do quanto que a vida nos dá.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.





Feliz Natal!

deseja o Bloggermin


A outra razão é para compartilhar com vocês este cartão de Natal feito apenas com CSS , as únicas imagens que estão nele são de flocos de neve.

Como é feito com CSS só ficam bem em navegadores modernos, por isso, se você vê meio abstrato, saberá a razão.

Este é o código para copiar e colar em um post:
<link href='http://fonts.googleapis.com/css?family=Clicker+Script' rel='stylesheet' type='text/css'/>
<style>
@keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-ms-keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
#xmas-contenedor {
height: 380px;
width:580px;
background-color: #6b92b9;
background-image: url(http://lh3.googleusercontent.com/-k6mAvDmeu4Q/UMefU6JI32I/AAAAAAAADpM/zdjTclnGDhM/s500/snow.png), url(http://lh6.googleusercontent.com/-8wOkQAdxfgg/UMefVfmte0I/AAAAAAAADpU/aE4HxfiXD88/s400/snow3.png), url(http://lh5.googleusercontent.com/-fhO2tXwKP9M/UMefVCohCOI/AAAAAAAADpQ/nFVnzK1W0xw/s300/snow2.png);
-webkit-animation: xmas-snow 20s linear infinite;
-moz-animation: xmas-snow 20s linear infinite;
-ms-animation: xmas-snow 20s linear infinite;
animation: xmas-snow 20s linear infinite;
position:relative;
border:5px solid #98BF21;
z-index:1;
}
#xmas-contenedor:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom:0;
border: 5px solid #fff;
}
#xmas-contenedor:after {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border: 6px dotted #98BF21;
}
#xmas-contenedor h4, #xmas-contenedor p {
font-family: 'Clicker Script', cursive;
font-size:60px;
font-weight:bold;
text-align:center;
text-shadow: 2px 2px 4px #000000;
color:#fff;
margin-top:200px;
margin-bottom:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#xmas-contenedor p {
font-size:25px;
line-height:0;
margin-top:50px;
}
html>/**/body #xmas-contenedor h4, x:-moz-any-link, x:default {
font-weight:normal;
}
html>/**/body #xmas-contenedor p, x:-moz-any-link, x:default {
font-weight:normal;
}
#xmas-contenedor h4:hover {
font-size:75px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#bauble-container {
list-style: none;
width: 568px;
margin: 40px auto;
padding: 0;
}
#bauble-container li {
margin: 0 20px;
float: left;
}
#bauble-container li:before {
content: "";
background: #dadada;
background: -moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0) );
background: -webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0)));
height: 50px;
width: 2px;
display: block;
margin: 0 auto;
}
#bauble-container li:nth-child(odd) {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
}
#bauble-container li:nth-child(odd):hover {
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
}
#bauble-container li:nth-child(even) {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
}
#bauble-container li:nth-child(even):hover {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}
.bauble {
border-radius: 100px;
box-shadow: 0 0 5px #777777;
border: 1px solid rgba(0,0,0,0.3);
position: relative;
height: 100px;
width: 100px;
}
.bauble:before {
content: "";
background: #fff;
background: -moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c );
background: -webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c));
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
border: 1px solid #dadada ;
height: 10px;
width: 20px;
position: absolute;
left: 50%;
top: -12px;
margin-left: -10px;
}
.bauble:after {
content: "";
border-radius: 100px;
background: #fff;
background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1) );
background: -webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1)));
position: absolute;
top: 0;
left: 50%;
margin-left: -40px;
opacity: 0.15;
height: 80px;
width: 80px;
}
.red-bauble {
background: #c8171f;
background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f));
}
.blue-bauble {
background: #00a1ee;
background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee));
}
.yellow-bauble {
background: #fcb83d;
background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d));
}
.green-bauble {
background: #4d8d00;
background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00));
}
</style>

<div id="xmas-contenedor">
<ul id="bauble-container">
<li>
<div class="bauble red-bauble">
</div>
</li>
<li>
<div class="bauble blue-bauble">
</div>
</li>
<li>
<div class="bauble yellow-bauble">
</div>
</li>
<li>
<div class="bauble green-bauble">
</div>
</li>
</ul>
<h4>Feliz Natal!</h4>
<p>deseja o Bloggermin</p>
</div>
Dito isso, Feliz Natal para todos!


COMENTÁRIOS

BLOGGER: 1
Loading...
Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Cartão de Natal em CSS
Cartão de Natal em CSS
Bloggermin deseja a todos um feliz Natal..,
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/12/cartao-de-natal-em-css.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/12/cartao-de-natal-em-css.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar