Creando un banner con CSS3

comentar

Como ya sabreis, los banners son esas imagenes (tambien los hay flash) que sirven para anunciar algo o para que enlacen con nuestro blog o web. Hay varias paginas que nos permiten realizarlos online, pero algunas llevan publicidad o simplemente no tienen el diseño que nosotros quisieramos. Por eso mismo, os voy a mostrar en unos pocos pasos como se va 'gestando' utilizando CSS3 y alguna imagen que otra. Asi conseguiremos, personalizandolo poco a poco, que obtenga el diseño mas acorde que teniamos en nuestra mente.


Para empezar, primero de todo necesitamos el fondo. Aqui podemos utilizar una imagen, pero este caso usare solamente CSS3 con degradados en color azul para darle un toque mas elegante. Tambien añadire el tamaño del banner, en este caso como ejemplo lo haremos de 300px de ancho por 300px de alto.







Tambien le pongo un borde, unas sombritas y le redondeo un poco las esquinas.







Le pongo el texto que quiera y que combine bien con el resto.

Visita
REDEANDO







Y por ultimo, se le pone una imagen o logo y lo animamos todo un poco. ¡Listo, banner hecho!

Visita
REDEANDO






Se le pueden añadir mas elementos, colores y efectos, pero eso ya es cuestion de cada un@. Yo os dejo el codigo que he utilizado y vosotros podeis personalizarlo como querais. Donde esta en color rojo teneis que poner la url de vuestro blog o web, la url de la imagen o logotipo y el texto

Ver/Ocultar Codigo
<center><a href="URL WEB" target="_blank"><div id="bannercss" style="-webkit-box-shadow: 5px 5px 6px rgba(50, 50, 50, 0.75);-moz-box-shadow:    5px 5px 6px rgba(50, 50, 50, 0.75);box-shadow:         5px 5px 6px rgba(50, 50, 50, 0.75);border:4px solid #cdcdcd;-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;background: #d0e4f7; background: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); background: -ms-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); background: -o-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea)); background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); background: linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 ); height: 300px; width: 300px;"><span style="font-family: 'Nunito', sans-serif;font-size:60px;position:relative;left:6px;top:10px;font-weight: normal;color:#ffffff;text-shadow: -1px 0 #cdcdcd, 0 1px #cdcdcd, 1px 0 #cdcdcd, 0 -1px #cdcdcd, -1px 1px 2px #cdcdcd;">TEXTO 1</span>
<span style="font-family: 'Sirin Stencil', cursive;font-size:60px;position:relative;left:5px;top:120px;font-weight: normal;color:#ffffff;text-shadow: -1px 0 #cdcdcd, 0 1px #cdcdcd, 1px 0 #cdcdcd, 0 -1px #cdcdcd, -1px 1px 2px #cdcdcd;">TEXTO 2</span><img class="bannercss" src="URL IMAGEN"  height="150" width="150"></div></a></center>
<link href="http://fonts.googleapis.com/css?family=Sirin+Stencil" rel="stylesheet" type="text/css"></link>
<style>.bannercss {position:relative;left:5px;bottom:90px;}@-webkit-keyframes bannercss {from { -webkit-transform: rotateY(0deg);    }to   { -webkit-transform: rotateY(-360deg); }}@-moz-keyframes paranoia {from { -moz-transform: rotateY(0deg);    }to   { -moz-transform: rotateY(-360deg); }}.bannercss {-webkit-animation-name: bannercss;-moz-animation-name: bannercss;animation-name: bannercss;-webkit-animation-timing-function: linear;-moz-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-duration: 15s;-moz-animation-duration: 15s;animation-duration: 15s;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;}#bannercss:hover {-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;-moz-transform:scale(1.1) rotate(-0deg); -webkit-transform:scale(1.1) rotate(-0deg); -o-transform:scale(1.1) rotate(-0deg); -ms-transform:scale(1.1) rotate(-0deg); transform:scale(1.1) rotate(-0deg);cursor:pointer;}</style>