10 de agosto de 2013

Modelos para sidebar


Hi!

Trouxe alguns modelos para sidebar

Para usar procure por: /*Widget
E depois de : -----------------
Apague até chegar em /*Mobile (Não apague essa tag)


.sidebar .widget {
background:#Cor;
padding: 10px;
margin-left: -13px;
margin-top: 0px;
margin-bottom:25px;
border-top: 4px solid #Cor;
border-bottom: 4px solid #Cor;
border-radius:0px;
box-shadow:inset 0 0 8px #Cor; 0 0 3px #Cor;
}
.sidebar .widget h2 {
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
margin-bottom: -6px;
margin-top: -5px;
font: normal bold 25px'Sail', cursive;
text-align: center;
color: #Cor;
}
.sidebar .widget h2:hover {
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
color: #Cor;
}



.sidebar .widget {
width:100% !important;
background:#fafafa;
border-radius:2px 15px 2px 15px;
padding:10px;
-webkit-box-shadow: 0px 0px 10px #b5b5b5;
-moz-box-shadow: 0px 0px 10px #b5b5b5;
box-shadow: 0px 0px 10px #b5b5b5;
}
.sidebar h2 {
font-family: Century Gothic;
color: #ffa6a4;
font-size: 18px;
text-align: right;
text-shadow:0 1px #b5b5b5;
padding: -5px;
border-bottom: 1px dotted #b5b5b5;
-webkit-transition-duration: 1.00s;
}
.sidebar h2:hover {
letter-spacing: -3px;
color: #bcdbe4;
-webkit-transition-duration: 1.00s;
}


.sidebar .widget {
border-bottom: 3px solid #d887b9;
border-top: 3px solid #d887b9;
background: #fafafa;
box-shadow: inset 0 0 5px #e0e0e0, 0 0 2px #b5b5b5;
padding:12px;
padding-bottom: 20px;
}
.sidebar h2 {
font-family: Century Gothic;
color: #fff;
font-size: 18px;
text-align: right;
text-shadow:0 1px #b5b5b5;
background: url(http://2.bp.blogspot.com/-7KvBwgzzQLc/UY58ChdssaI/AAAAAAAACUA/dBRIZvYsPzY/s1600/ribbonspsd.png) no-repeat left;
height: 28px;
width: 260px;
margin-top:-5px ;
margin-left:-45px ;
padding:5px;
width:128%;
 ANTES DE B:SKIN


.sidebar .widget {
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 10px 0;
  background: #fff;
  box-shadow: 0px 0px 2px #ccc;
}
.sidebar h2 {
margin-top: 8px;
border-bottom: 1px  solid #eee;
text-align: center;
height: 15px;
font-size: TAMANHODAFONTEpx;
font-family: NOMEDAFONTE;
color: #CORDAFONTE;
text-shadow: 0px 0px 5px #CORDASOMBRADAFONTE;
text-transform: uppercase;
}


2 comentários: