Hacer una tarjeta de navidad

Hoy vamos a mostraros como podemos hacer un tarjeta de navidad con CSS.

¡Feliz Navidad!

les desea Ciudad Blogger

Simplemente tenemos que poner en nuestra entrada en la edición  HTML este código CSS.

CÓDIGO

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9nlrbMRaeY5YGyz-w0u4xXlonOb4cQgffbWGA3jP2fuz1c-b03yocBwTiTOUuQWYHDfa3AlHsvBai-SEK4SASj0UHsyU7eWq82OeEDS6wkV502UfEfm7m33HhaLVyR8o76N5dWkgzARs/s500/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihehUusLZD1nC2n_vSxihANwMplRPMvVYDo2oCO13AHOfXJ9PxaSzp5C82lTyhwyvpUMlA55SCpL3qitvdRHyPylzogACHqrjiEgN47yyiyWFBZvcJO5uflRgdhLB843St5pAF9pBqLzI/s400/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8XzW5MawUKMcIFTnxY9p3zeZ2mP6ZdGO2ECXOiIFC2tf9zv93TlNVQAV8wCQy1DZLavJX4bNJ5hbuX3pJFdWotwmjLvLg28CePhbd7UzSHhsjzjSwfPv39bHyI0JhZh7XjQrfGLolngs/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 Navidad!</h4>

<p>les desea Ciudad Blogger</p>

</div>

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso