Como criar um Banner Animado com css e script para blog

Unknown 23:36 banner animado , blog , css , javascript Nenhum comentário

Banner animado

Se você tem interesse em saber como criar um banner animado no blog para divulgar, vender ou apenas mostrar algum artigo, você está no tutorial certo!

Aqui, vamos explicar como criar e inserir em seu blog, um banner com imagem, descrição e link, usando css e javascript.

Os trabalhos de portfólio, vendas, descrição e tudo que o blogueiro que divulgar, merece um destaque especial.

E, atendendo a pedidos, resolvemos ensinar você a fazer seu próprio banner!

Abaixo, o nosso tutorial em vídeo:

Para começarmos, analise o código da caixa de auto seleção a seguir:

<style>

h3 {
 /*14px via YUI Fonts CSS foundation*/
 font-size:108%;  
}
h1,h2,h3 {
 /* top & bottom margin based on font size */
 margin:1em 0;
}
h1,h2,h3,h4,h5,h6,strong {
 /*bringing boldness back to headers and the strong element*/
 font-weight:bold; 
}
abbr,acronym {
 /*indicating to users that more info is available */
 border-bottom:1px dotted #000;
 cursor:help;
} 
em {
 /*bringing italics back to the em element*/
 font-style:italic;
}
blockquote,ul,ol,dl {
 /*giving blockquotes and lists room to breath*/
 margin:1em;
}
ol,ul,dl {
 /*bringing lists on to the page with breathing room */
 margin-left:2em;
}
ol li {
 /*giving OL's LIs generated numbers*/
 list-style: decimal outside; 
}
ul li {
 /*giving UL's LIs generated disc markers*/
 list-style: disc outside;
}
dl dd {
 /*giving UL's LIs generated numbers*/
 margin-left:1em;
}
th,td {
 /*borders and padding to make the table readable*/
 border:1px solid #000;
 padding:.5em;
}
th {
 /*distinguishing table headers from data cells*/
 font-weight:bold;
 text-align:center;
}
caption {
 /*coordinated marking to match cell's padding*/
 margin-bottom:.5em;
 /*centered so it doesn't blend in to other content*/
 text-align:center;
}
p,fieldset,table {
 /*so things don't run into each other*/
 margin-bottom:1em;
}

/* Style */

#mainwrapper {
 font: 16pt normal Arial, sans-serif;
 height: auto;
 text-align: center;
 width: 100%;
}

/* Image Box Style */
#mainwrapper .box {
 border: 5px solid #fff;
 cursor: pointer;
 height: 300px;
 float: left;
 margin: 5px;
 position: relative;
 overflow: hidden;
 width: 300px;
  -webkit-box-shadow: 1px 1px 1px 1px #ccc;
  -moz-box-shadow: 1px 1px 1px 1px #ccc;
  box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
 position: absolute;
 left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out; 
 transition: all 300ms ease-out;
}

/* Caption Common Style */
#mainwrapper .box .caption {
 background-color: rgba(0,0,0,0.8);
 position: absolute;
 color: #fff;
 z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out; 
  transition: all 300ms ease-out;
 left: 0;
}

/** Caption 2: Full Width & Height **/
#mainwrapper .box .full-caption {
 width: 300px;
 height: 300px; 
 top: -300px;
 text-align: left;
 padding: 1px;
}

/** Full Caption :hover Behaviour **/
#mainwrapper .box:hover .full-caption {
 -moz-transform: translateY(100%);
 -o-transform: translateY(100%);
 -webkit-transform: translateY(100%);
 opacity: 1;
 transform: translateY(100%);
}

/** Fade Caption :hover Behaviour **/
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption  {
 opacity: 1;
}

</style><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><br />
<script>

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c

+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r

[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k

[c]);return p}('(2(){$("9").3("16-l","N");6 c=5.K+"//"+5.I+"/";u(0==$(".4-18").n){6 e=$("<10>");e.h

({Q:"7/3",R:"Z",i:c+"o/3/8-1b.3"});$("1d").1e(e);$.H(c+"o/M.O",2(b){b=b.x("<9>");b=b[1].x("</9>");$("9").11(b

[0]);$(".4-14 a").h("i",c)})}$.19(c+"o/s/t.s",2(){6 b=j.5.G.v("/","").v("/",""),d=$.J(t,2(a){m a[0]}),e=$.L

(b,d),f=$(".8-p").7(),g=$(".8-P").7();$(".4-p").7(f);$(".4-w").7(g);$(".F a").h("i",c);$(".S a").h

("i","T://U.V.W/X/"+b+"/");$("#8-Y").q("y",2(a){a.z();a=e+1;j.5=a>=d.n?c+d[0]:c+d[a]});$("#8-12").q("y",2(a)

{a.z();a=d.n-1;6 b=e-1;j.5=0>b?c+d[a]:c+d[b]});$(".4-w").13(2(){6 a=A,b=!1,c=!1,d=$(15).3("k",0);$(".4-p").17

(2(){a&&B(a);u(!b&&!c)m b=!0,d.3({C:"1a"}).D({l:"+1c",k:1},E,"r",2(){b=!1;c=!0}),!1}).1f(2(){a&&B(a);a=1g(2()

{a=A;d.D({l:"-1h",k:0},E,"r",2(){c=!1;d.3("C","1i")})},1j);m!1})})})})();',62,82,'||function|css|nav|location|

var|text|demo|body||||||||attr|href|window|opacity|top|return|length|_nav|title|on|linear|js|db|if|replace|

10px|none|150'.split('|'),0,{}))

</script><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<center>
<div id="mainwrapper">
<div id="box-2" class="box">
   <a href = ""><img alt='Thumb'

border='0' height='300' src='http://images02.olx.com.br/ui/8/65/18/1377450911_539675718_1-presto-servico-de-informatica-servico-de-qualidade-e-preco-acessivel-jd-planalto.jpg' width='300'/></a><br />
<span class="caption full-caption"><br />
<h3>
Serviços BG</h3>
<p>
Peça seu template exclusivo. Configuramos novos domínios, corrigimos códigos <br />
<br />
quebrados, preparamos e inserimos gadgets & widgets, menus, slides e todo trabalho de portfolio que precisar e <br />
<br />
quiser.</p>
<a href = "http://servicobg.blogspot.com.br/">Clique aqui para saber mais. <br />
<br />
</a><br />
<br />
</span><br />
</div>
</div>
</center>

O código, acima, contém três linguagens diferentes, que juntas formam um banner. Estamos falando de css, javascript e html.

Veja o mesmo código, destacado em cores, abaixo:

<style>

h3 {

/*14px via YUI Fonts CSS foundation*/

font-size:108%;

}

h1,h2,h3 {

/* top & bottom margin based on font size */

margin:1em 0;

}

h1,h2,h3,h4,h5,h6,strong {

/*bringing boldness back to headers and the strong element*/

font-weight:bold;

}

abbr,acronym {

/*indicating to users that more info is available */

border-bottom:1px dotted #000;

cursor:help;

}

em {

/*bringing italics back to the em element*/

font-style:italic;

}

blockquote,ul,ol,dl {

/*giving blockquotes and lists room to breath*/

margin:1em;

}

ol,ul,dl {

/*bringing lists on to the page with breathing room */

margin-left:2em;

}

ol li {

/*giving OL's LIs generated numbers*/

list-style: decimal outside;

}

ul li {

/*giving UL's LIs generated disc markers*/

list-style: disc outside;

}

dl dd {

/*giving UL's LIs generated numbers*/

margin-left:1em;

}

th,td {

/*borders and padding to make the table readable*/

border:1px solid #000;

padding:.5em;

}

th {

/*distinguishing table headers from data cells*/

font-weight:bold;

text-align:center;

}

caption {

/*coordinated marking to match cell's padding*/

margin-bottom:.5em;

/*centered so it doesn't blend in to other content*/

text-align:center;

}

p,fieldset,table {

/*so things don't run into each other*/

margin-bottom:1em;

}

/* Style */

#mainwrapper {

font: 16pt normal Arial, sans-serif;

height: auto;

text-align: center;

width: 100%;

}

/* Image Box Style */

#mainwrapper .box {

border: 5px solid #fff;

cursor: pointer;

height: 300px;

float: left;

margin: 5px;

position: relative;

overflow: hidden;

width: 300px;

-webkit-box-shadow: 1px 1px 1px 1px #ccc;

-moz-box-shadow: 1px 1px 1px 1px #ccc;

box-shadow: 1px 1px 1px 1px #ccc;

}

#mainwrapper .box img {

position: absolute;

left: 0;

-webkit-transition: all 300ms ease-out;

-moz-transition: all 300ms ease-out;

-o-transition: all 300ms ease-out;

-ms-transition: all 300ms ease-out;

transition: all 300ms ease-out;

}

/* Caption Common Style */

#mainwrapper .box .caption {

background-color: rgba(0,0,0,0.8);

position: absolute;

color: #fff;

z-index: 100;

-webkit-transition: all 300ms ease-out;

-moz-transition: all 300ms ease-out;

-o-transition: all 300ms ease-out;

-ms-transition: all 300ms ease-out;

transition: all 300ms ease-out;

left: 0;

}

/** Caption 2: Full Width & Height **/

#mainwrapper .box .full-caption {

width: 300px;

height: 300px;

top: -300px;

text-align: left;

padding: 1px;

}

/** Full Caption :hover Behaviour **/

#mainwrapper .box:hover .full-caption {

-moz-transform: translateY(100%);

-o-transform: translateY(100%);

-webkit-transform: translateY(100%);

opacity: 1;

transform: translateY(100%);

}

/** Full Caption :hover Behaviour **/

#mainwrapper .box:hover .full-caption {

-moz-transform: translateY(100%);

-o-transform: translateY(100%);

-webkit-transform: translateY(100%);

opacity: 1;

transform: translateY(100%);

}

/** Fade Caption :hover Behaviour **/

#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption {

opacity: 1;

}

</style>