Skip to content

Instantly share code, notes, and snippets.

@jrudenstam
Created April 23, 2012 20:09
Show Gist options
  • Save jrudenstam/2473488 to your computer and use it in GitHub Desktop.
Save jrudenstam/2473488 to your computer and use it in GitHub Desktop.
Mixed CSS3 demo
/**
* Mixed CSS3 demo
*/
body {
background: hsla(5,20%,70%,1);
font: 16px/22px sans-serif;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
h2 {
display: inline-block;
margin-right: 20px;
}
nav ul {overflow: hidden; padding: 0;}
nav li {float: left; list-style: none;}
nav>ul>li>ul>li {
float: none;
}
nav>ul>li>ul {
background: rgba(255,255,255,0.5);
border-radius: 3px;
padding: 10px; margin-top: 15px;
position: absolute; z-index: 2;
overflow: visible;
opacity: 0;
min-width: 100px;
transition: visibility 0s linear 0.25s , opacity 0.25s ease-in;
}
nav>ul>li:hover>ul {
opacity: 1;
visibility: visible;
}
nav>ul>li>ul:before {
content:"";
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent rgba(255,255,255,0.5) transparent;
position: absolute; top: -20px; left: 10px;
}
.main section {
border-top: 1px solid rgba(255,255,255,0.3);
border-bottom: 1px solid rgba(0,0,0,0.2);
padding: 40px 0;
}
.main section:first-of-type {border-top: none;}
.main section:last-of-type {border-bottom: none;}
.global-width{
width: 960px;
margin: 0 auto;
}
/* Button */
.button {
background-color: hsla(90,40%,50%,1);
border-style: solid;
border-width: 1px;
border-color: rgba(255,255,255,0.7) rgba(0,0,0,0.2) rgba(0,0,0,0.2) rgba(255,255,255,0.4);
box-shadow: 0 0 3px rgba(0,0,0,0.2);
border-radius: 3px;
color: rgba(58,128,80,1);
display: inline-block;
padding: 10px;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
text-align: center;
letter-spacing: 0.1em;
}
/* Transitions */
.transition .button {
transition: all 1s cubic-bezier(1,0.5,0.8,1.2) 0.25s;
}
.transition .button:hover {
background: hsla(200,50%,50%,1);
color: #333;
padding: 10px 80px;
}
/* Animation */
@keyframes shake {
from {
margin-left: 0;
}
25% {
margin-left: 10px;
}
75% {
margin-left: -10px;
}
to {
margin-left: 0;
}
}
@keyframes pound {
from { transform: scale(1); background-color:#333;}
to { transform: scale(1.2); background-color:#fff;}
}
.animation .button:hover {
animation: shake .25s ease-in 4 0.25s;
}
.animation h2 {
animation: pound 2s 5s infinite alternate both;
background-color: #f00;
padding: 20px;
}
/* Gradients */
.gradient h2 {
background-image: repeating-linear-gradient(45deg, #f00, #f00 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 15px);
padding: 20px;
}
<header class="global-width">
<h1>Mixed CSS3 stuff</h1>
<nav>
<ul>
<li><a class="button" href="#">Lorem sub</a>
<ul>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
</ul>
</li>
<li><a class="button" href="#">Ipsum</a></li>
<li><a class="button" href="#">Dolor</a></li>
<li><a class="button" href="#">Sit</a></li>
</ul>
</nav>
</header>
<div class="main global-width">
<section class="animation">
<h2>Animation</h2>
<a class="button" href="#">Shake me</a>
</section>
<section class="transition">
<h2>Transition</h2>
<a class="button" href="#">Transist me?</a>
</section>
<section class="gradient">
<h2>Gradients</h2>
</section>
</div>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment