1 Barra lateral de SHOPPING. Dom Mar 17, 2013 11:49 am
RafsEstevam
Programador
Olá a todos,
Hoje iremos fazer uma barra lateral de SHOPPING
Primeiro insira o código html:
Bom, para funcionar precisa de um CSS.
TAMANHO DAS IMAGENS DO SHOPPING: 123PX x 123PX
A logomarca: 125PX x 34PX
Botão fechar: 22PX x 21PX
A aba: 64PX x 200PX
Pré-Visualização: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Hoje iremos fazer uma barra lateral de SHOPPING
Primeiro insira o código html:
- Código:
<div id="vitrine">
<p class="pub">Shopping <b>RAAFS</b>©
<a href="#" rel="nofollow" target="_blank" class="exit" onclick="document.getElementById('vitrine').style.display='none';"> </a>
<a href="#" rel="nofollow" class="oa" target="_blank"> </a>
</p>
<ul id="menuprodutos">
<a href="#" target="_blank" rel="nofollow" title="1" itemscope="" itemtype="http://schema.org/Product" itemprop="url">
<img width="90" height="90" src="/imagens/1.png" title="1" alt="1" itemprop="image">
<p class="produto" itemprop="name">Template 1</p>
<p class="valor" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"><span itemprop="price">R$15.00</span></p>
<p class="cartoes">HTML + CSS</p>
</a>
<a href="#" target="_blank" title="2" rel="nofollow" itemscope="" itemtype="http://schema.org/Product" itemprop="url">
<img width="90" height="90" src="/imagens/2.png" title="2" alt="2" itemprop="image">
<p class="produto" itemprop="name">Sistema de Notícias</p>
<p class="valor" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"><span itemprop="price">R$5.00</span></p>
<p class="cartoes">PHP + CSS</p>
</a>
<a href="#" target="_blank" rel="nofollow" title="One Piece" itemscope="" itemtype="http://schema.org/Product" itemprop="url">
<img width="90" height="90" src="/imagens/3.png" title="2" alt="2" itemprop="image">
<p class="produto" itemprop="name">Encriptador </p>
<p class="valor" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"><span itemprop="price">R$10.00</span></p>
<p class="cartoes">HTML + JS</p>
</a>
<a href="#" target="_blank" rel="nofollow" title="Fairy Tail" itemscope="" itemtype="http://schema.org/Product" itemprop="url">
<img width="90" height="90" src="/imagens/4.png" title="3" alt="3" itemprop="image">
<p class="produto" itemprop="name">Template 2</p>
<p class="valor" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"><span itemprop="price">R$20.00</span></p>
<p class="cartoes">HTML + CSS + JS</p>
</a>
</ul>
</div>
Bom, para funcionar precisa de um CSS.
- Código:
#vitrine:hover {
right:0px;
-moz-transition-delay: 0s;
-moz-transition-duration: 0.6s;
-moz-transition-property: #vitrine;
-moz-transition-timing-function: ease-in-all;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.6s;
-webkit-transition-property: #vitrine;
-webkit-transition-timing-function: ease-in-all;
}
#vitrine {
background: url("http://i.imgur.com/upNlPqJ.png") no-repeat scroll left 60px transparent !important;
display: block;
float: left;
height: 290px;
padding: 0 0 0 63px;
position: fixed;
right: -714px;
top: 30%;
width: 714px;
z-index: 99999;
-moz-transition-delay: 0s;
-moz-transition-duration: 0.6s;
-moz-transition-property: #vitrine;
-moz-transition-timing-function: ease-in-all;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.6s;
-webkit-transition-property: #vitrine;
-webkit-transition-timing-function: ease-in-all;
}
#vitrine .pub {
border-bottom: 1px solid #CBCBCB;
border-right: 1px solid #CBCBCB;
border-left: 1px solid #CBCBCB;
border-top: 1px solid #CBCBCB;
color: #5F5F5F;
display: block;
left: right;
font-family: Arial;
font-size: 14px;
height: 46px;
line-height: 50px;
margin: -14px 0 0;
overflow: hidden;
padding: 0 0 0 20px;
position: relative;
width: 692px;
z-index: -1;
background:#efefef;
text-align: left;
}
#vitrine .pub .oa {
background: url("http://i.imgur.com/2aC3TpS.png") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 34px;
margin-top: 6px;
text-indent: -5000px !important;
text-decoration:none;
width: 127px;
}
#vitrine .pub .exit {
background: url("http://i.imgur.com/u86ZYcl.jpg") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 22px;
margin: 12px 15px 10px 20px;
text-indent: -5000px !important;
width: 23px;
text-decoration:none;
}
#vitrine .pub span {
display:block;
width:10px;
height:10px;
background:#000;
}
#vitrine #menuprodutos {
background:#efefef;
border-left: 1px solid #CBCBCB;
border-right: 1px solid #CBCBCB;
border-bottom: 1px solid #CBCBCB;
height: 240px;
overflow: hidden;
padding: 5px;
width:702px;
margin:0;
}
#vitrine #menuprodutos a {
border-radius: 0 30px 0 0;
color: #000000;
display: inline-table;
font-family: Myriad Pro;
font-size: 14px;
margin-left: 10px;
margin-top:10px;
overflow: hidden;
padding: 20px 10px 0 10px;
text-align: center;
text-decoration: none;
width: 136px;
height:190px !important;
border-top:1px solid #cbcbcb;
border-left:1px solid #cbcbcb;
border-right:1px solid #cbcbcb;
background: none repeat scroll 0 0 #fff;
border-bottom: 2px solid #cbcbcb;
box-shadow:2px 2px 0 0 #cbcbcb;
}
#vitrine #menuprodutos a:hover {
background: none repeat scroll 0 0 #efefef;
text-decoration: none;
}
#vitrine #menuprodutos a img {
height: 110px;
width: 110px;
}
#vitrine_ #menuprodutos p { margin:0; text-align:right; width:133px;font-family: Arial;}
#vitrine #menuprodutos a .cartoes {color:#F2641A; font-size:12px; font-weight:bold;}
#vitrine #menuprodutos a .valor {
line-height:18px;
color:#C50000;
font-size:16px;
font-weight:bold;
text-align:center;
}
#vitrine #menuprodutos a .produto {
margin-top: 22px;
color:#222;
font-size:14px;
text-align:center;
}
TAMANHO DAS IMAGENS DO SHOPPING: 123PX x 123PX
A logomarca: 125PX x 34PX
Botão fechar: 22PX x 21PX
A aba: 64PX x 200PX
Pré-Visualização: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]