Espero que se les sea Util
HTML:
<nav>
<ul>
<li><a href="#">View</a></li>
<li class="drop">
<a href="#">You</a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan</li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</li>
<li><a href="#">Help</a></li>
</ul>
</nav>
CSS:
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;}
/*---------- BODY --------------------------------*/
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
a {
text-decoration: none;
}
/*---------- Wrapper --------------------*/
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: center;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
HTML:
<div class="page-curl shadow-bottom">
<h2>Bottom shadow, both sides</h2>
<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>
<div class="page-curl shadow-bottom shadow-right">
<h2>Bottom shadow, right side</h2>
<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>
<div class="page-curl shadow-bottom shadow-left">
<h2>Bottom shadow, left side</h2>
<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>
<div class="page-curl shadow-top-bottom shadow-right">
<h2>Top & Bottom shadow, right side</h2>
<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>
<div class="page-curl shadow-top-bottom shadow-left">
<h2>Top & Bottom shadow, left side</h2>
<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>
CSS:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html {
background: #DEF;
background: -moz-linear-gradient(45deg, #EFF, #DEF);
background: -ms-linear-gradient(45deg, #EFF, #DEF);
background: -webkit-linear-gradient(45deg, #EFF, #DEF);
background: linear-gradient(45deg, #EFF, #DEF);
min-height: 100%;
font-family: "Open Sans", Helvetica, sans-serif;
font-weight: 300;
}
h1, h2 {
font-weight: 400;
text-shadow: 0 1px 0 #FFF;
}
h1 {
width: 800px;
margin: 0 auto;
}
p {
font: 300 13px/20px Arial,sans-serif;
color: #888;
}
.page-curl {
background: #FFFFFF;
background: -moz-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
background: -ms-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
background: -webkit-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
background: linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
border: 1px solid #777777;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
margin: 50px auto;
padding: 15px;
position: relative;
width: 800px;
}
.page-curl:before, .page-curl:after {
background: none;
bottom: 12px;
-moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
content: "";
height: 10px;
left: 12px;
position: absolute;
width: 40%;
z-index: -1;
-moz-transform: skew(-4deg) rotate(-4deg);
-webkit-transform: skew(-4deg) rotate(-4deg);
transform: skew(-4deg) rotate(-4deg);
}
.page-curl:after {
-moz-transform: skew(4deg) rotate(4deg);
-webkit-transform: skew(4deg) rotate(4deg);
transform: skew(4deg) rotate(4deg);
left: auto;
right: 12px;
}
.page-curl.shadow-left {
background: -moz-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
background: -ms-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
background: -webkit-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
background: linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
}
.page-curl.shadow-right {
background: -moz-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
background: -ms-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
background: -webkit-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
background: linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
}
.shadow-bottom:before, .shadow-bottom:after {
top: auto;
bottom: 12px;
-moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
}
.shadow-left:after {
display: none;
}
.shadow-right:before {
display: none;
}
.shadow-top-bottom.shadow-left:after {
display: block;
bottom: auto;
top: 15px;
right: auto;
left: 12px;
-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
}
.shadow-top-bottom.shadow-right:before {
display: block;
bottom: auto;
top: 15px;
right: 12px;
left: auto;
-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
}
HTML:
<div id="wrapper">
<div id="columns">
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Nullam eget lectus augue.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
</div>
</div>
CSS:
body {
background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
}
#wrapper {
width: 90%;
max-width: 1100px;
min-width: 800px;
margin: 50px auto;
}
#columns {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.pin {
display: inline-block;
background: #FEFEFE;
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 0 2px 15px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 15px;
padding-bottom: 5px;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.pin img {
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}
.pin p {
font: 12px/18px Arial, sans-serif;
color: #333;
margin: 0;
}
@media (min-width: 960px) {
#columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
@media (min-width: 1100px) {
#columns {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
}
#columns:hover .pin:not(:hover) {
opacity: 0.4;
}
<h2>Pure CSS3 Slideshow Without Page Jump</h2>
<ul id="css3-slider">
<li>
<input type="radio" id="s1" name="num" checked="true" />
<label for="s1">1</label>
<a href="javascript:void(0);">
<img src="http://cssdeck.com/uploads/media/items/0/0UeVZv3.jpg" />
<span>Why do you put the egg yolks on your eyes?</span>
</a>
</li>
<li>
<input type="radio" id="s2" name="num" />
<label for="s2">2</label>
<a href="javascript:void(0);">
<img src="http://cssdeck.com/uploads/media/items/9/9J2jvF6.jpg" />
<span>How can you look ahead if your eyes are on the side?</span>
</a>
</li>
<li>
<input type="radio" id="s3" name="num" />
<label for="s3">3</label>
<a href="javascript:void(0);">
<img src="http://cssdeck.com/uploads/media/items/0/0ckDaQF.jpg" />
<span>Keep praying to God</span>
</a>
</li>
<li>
<input type="radio" id="s4" name="num" />
<label for="s4">4</label>
<a href="javascript:void(0);">
<img src="http://cssdeck.com/uploads/media/items/3/3oMnVPz.jpg" />
<span>Stay relaxed</span>
</a>
</li>
<li>
<input type="radio" id="s5" name="num" />
<label for="s5">5</label>
<a href="javascript:void(0);">
<img src="http://cssdeck.com/uploads/media/items/1/1hZPTaR.jpg" />
<span>And you will forever be relaxed</span>
</a>
</li>
</ul>
<footer>Images from anywhere</footer>
CSS:
/**
* Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman
* 26 April 2012
* http://hompimpaalaihumgambreng.blogspot.com
*/
body {
background-color:black;
height:2000px;
color:#999;
text-align:center;
font:normal 12px 'Century Gothic',Arial,Sans-Serif;
}
a {
color:blue;
text-decoration:none;
}
h2 {
margin:30px 0px;
font-weight:normal;
}
/* General */
#css3-slider {
margin:20px auto;
padding:0px 0px;
width:448px;
height:286px;
position:relative;
}
#css3-slider li {
list-style:none;
margin:0px 0px;
padding:0px 0px;
}
/* Navigation */
#css3-slider li input + label {
position:absolute;
bottom:5px;
left:10px;
z-index:999;
font:bold 11px/16px Arial,Sans-Serif;
background-color:black;
color:white;
padding:0px 0px;
width:16px;
text-align:center;
cursor:pointer;
}
#css3-slider li:nth-child(2) label {left:28px;}
#css3-slider li:nth-child(3) label {left:46px;}
#css3-slider li:nth-child(4) label {left:64px;}
#css3-slider li:nth-child(5) label {left:82px;}
/* Images */
#css3-slider li img {
border:none;
outline:none;
position:absolute;
top:50%;
left:50%;
width:0px;
height:0px;
visibility:hidden;
opacity:0;
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
-webkit-transform:rotate(0deg) scale(0);
-moz-transform:rotate(0deg) scale(0);
-ms-transform:rotate(0deg) scale(0);
-o-transform:rotate(0deg) scale(0);
transform:rotate(0deg) scale(0);
}
/* Captions */
#css3-slider a {
text-decoration:none !important;
}
#css3-slider li a span {
cursor:default;
display:block;
position:absolute;
right:0px;
bottom:0px;
left:0px;
background-color:rgba(0,0,0,0.8);
font:normal 11px/26px Arial,Sans-Serif;
color:white;
padding:0px 10px;
text-align:right;
opacity:0;
viibility:hidden;
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
}
/* Active navigation */
#css3-slider li input:checked + label {
background-color:#39f;
color:white;
}
/* Show the image with transition */
#css3-slider li input:checked ~ img,
#css3-slider li input:checked ~ a img {
top:0%;
left:0%;
width:448px;
height:286px;
visibility:visible;
-webkit-transform:rotate(720deg) scale(1);
-moz-transform:rotate(720deg) scale(1);
-ms-transform:rotate(720deg) scale(1);
-o-transform:rotate(720deg) scale(1);
transform:rotate(720deg) scale(1);
opacity:1;
z-index:99;
}
/* Show the caption with fade effect */
#css3-slider li input:checked ~ a span {
opacity:1;
z-index:100;
}
/* Hide the radio */
#css3-slider input {
display:none;
}
HTML:
<a class="one" href="#"></a>
<a class="two" href="#"></a>
<a class="san" href="#"></a>
<br>
<a class="yon" href="#"></a>
<a class="goo" href="#"></a>
<a class="rok" href="#"></a>
<a class="ryk" href="#"></a>
<br>
<a class="x7" href="#"></a>
<a class="x8" href="#"></a>
<a class="x9" href="#"></a>
CSS:
body {
padding: 10px 0 0 10px;
}
a {
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:100px;
height:100px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
background-image:url(data:image/gif;base64,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);
background-repeat:no-repeat;
background-origin:border-box;
background-position:50% 50%;
border-width:50px;
border-color:rgba(0,0,0,0);
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-ms-transition:0.5s ease;
-o-transition:0.5s ease;
transition:0.5s ease;
}
a:hover {
border-width:0;
border-color:rgba(0,0,0,0.5);
}
a.one {border-style:solid;}
a.two {border-style:dashed;}
a.san {border-style:dotted;}
a.yon {border:50px solid rgba(0,0,0,0.7);}
a.goo {border:50px dashed rgba(0,0,0,0.7);}
a.rok {border:50px dotted rgba(0,0,0,0.7);}
a.ryk {border:50px double rgba(0,0,0,0.7);}
a.yon:hover {border: 1px solid rgba(0,0,0,0.7);}
a.goo:hover {border: 1px dashed rgba(0,0,0,0.7);}
a.rok:hover {border: 1px dotted rgba(0,0,0,0.7);}
a.ryk:hover {border: 1px double rgba(0,0,0,0.7);}
a.x7,
a.x8,
a.x9 {
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
}
a.x7 {border:50px solid rgba(0,0,0,0.7);}
a.x8 {border:50px dashed rgba(0,0,0,0.7);}
a.x9 {border:50px dotted rgba(0,0,0,0.7);}
a.x7:hover {border: 1px solid rgba(0,0,0,0.7);}
a.x8:hover {border: 1px dashed rgba(0,0,0,0.7);}
a.x9:hover {border: 1px dotted rgba(0,0,0,0.7);}
Bueno hasta aca llego el Post, si les gusto, voy a seguir posteando estos recursos, capaz me tiro alguno mio, si quieren dejar algun PSD aquel que haga Diseño Grafico para alguna web y no saben como hacerlo, diganme y lo paso, no tengo problema.
Hubo menos que la otra vez por tiempo, pero tengo pensado poner de a 5 ahora, ya tengo planeado para un parte 3
Saludos
