Inicio Uncategories Efeitos CSS

Efeitos CSS

18:01
Vou guardar aqui uns efeitos fodásticos que nesse site http://cssdeck.com. Esse é o primeiro, que parece com um post do Vampire Diaries World.
PS: Ele não fica assim automaticamente, é só ir editando ele de acordo com novas postagens e etc.
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;
}
link http://cssdeck.com/labs/css-only-pinterest-style-columns-layout
-----------------------------------------------------------------------------------------------------------



outro estilo do menu drop down :3
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; }





0 comentário "Efeitos CSS"

Postar um comentário

Obrigado por seus comentários

Assinar: Postar comentários (Atom)