Html
<!DOCTYPE html>
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<meta charset="utf-8" />
<title>Test</title>
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="main">
<div id="content">
<h1>CSS3 Toggler</h1>
<ul class="tutorialMenu">
<li id="coffeecards">
<h2><a href=
"#coffeecards">CoffeeCards</a></h2>
<p><span>CSS3 Eigenschaften: Transform
& Transition Modules, ...</span></p>
</li>
<li id="blogcomments">
<h2><a href=
"#blogcomments">BlogComments</a></h2>
<p><span>CSS3 Eigenschaften: Border-Radius,
Box-Shadow & Animation Module,
...</span></p>
</li>
<li id="onlineform">
<h2><a href=
"#onlineform">OnlineForm</a></h2>
<p><span>CSS3 Eigenschaften: MediaQueries,
Transform & Transition Modules,
...</span></p>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
background: url(http://webstandard.kulando.de/templates/blog_1575/new_greenmarinee/images/css3-transform-transition-bg_pattern.png) 0 0 repeat;
font: 12px "Yanone Kaffeesatz", arial, serif;
}
#content {
margin: 20px auto;
width: 500px;
}
h1 {
padding: 20px 10px;
margin: 0 0 20px 0;
font-size: 24px;
font-weight: normal;
background: rgb(144,144,144);
background: rgba(255,255,255,.1);
color: #FFF;
}
h1 a {
color: #ff7e00;
font-size: 20px;
}
.tutorialMenu {
padding: 10px 0;
margin: 0;
list-style-type: none;
}
.tutorialMenu h2 {
margin: 5px 0;
padding: 0;
}
.tutorialMenu h2 a {
font-size: 18px;
display: block;
font-weight: normal;
color: #FFF;
text-decoration: none;
margin: 0;
padding: 10px;
background: rgb(144,144,144);
background: rgba(255,255,255,.3);
position: relative;
}
.tutorialMenu :not(:target) h2 a {
background: rgb(59,59,59);
background: rgba(0,0,0,.4);
position: relative;
}
.tutorialMenu h2 a:hover,
.tutorialMenu h2 a:active,
.tutorialMenu h2 a:focus {
background-color: rgb(59,59,59);
background-color: rgba(255,255,255,.3);
}
.tutorialMenu :target p,
.tutorialMenu :not(:target) p {
padding: 0;
margin: 0;
height: 0;
overflow: hidden;
-moz-transition: height .5s ease;
-webkit-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
}
.tutorialMenu :target p { height: 295px }
.tutorialMenu #coffeecards p,
.tutorialMenu #blogcomments p,
.tutorialMenu #onlineform p {
position: relative;
background: url(http://webstandard.kulando.de/templates/blog_1575/new_greenmarinee/images/css3-transform-transition-coffee-cards.jpg) top left no-repeat;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.tutorialMenu #blogcomments p { background-image: url(http://webstandard.kulando.de/templates/blog_1575/new_greenmarinee/images/css3-transform-transition-blog-comments.jpg) }
.tutorialMenu #onlineform p { background-image: url(http://webstandard.kulando.de/templates/blog_1575/new_greenmarinee/images/css3-transform-transition-online-form.jpg) }
.tutorialMenu p { height: 295px }
.tutorialMenu p span {
font-size: 14px;
display: block;
height: 35px;
padding: 15px 0 0 0;
text-indent: 10px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: #FFF;
background: rgb(144,144,144);
background: rgba(0,0,0,.6);
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
h1,
.tutorialMenu h2 a,
.tutorialMenu :not(:target) p {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Html
<ul id="shadowmenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
CSS:
@import url(http://fonts.googleapis.com/css?family=Oswald);
html,body{
width:100%;
height:100%;
overflow:hidden; /*Meh, this is just an example*/
}
body {
font-family:Oswald,sans-serif;
background:#000;
color:#fff;
}
#shadowmenu {
font-size:24px;
list-style:none;
padding:0;
margin:120px auto;
width:100%;
text-align:center;
}
#shadowmenu li a, #shadowmenu li a:hover {
transition:all 100ms ease;
}
#shadowmenu li a {
text-decoration:none;
color:#666;
padding:5px 10px;
border-radius:5px;
background:rgba(255,255,255,0.2);
box-shadow:0 2px #555;
position:relative;
}
#shadowmenu li a:hover {
color:#666;
}
#shadowmenu li {
display:inline-block; margin-right:10px;
}
#shadowmenu li a:active {
box-shadow:none;
bottom:-2px;
}
#shadowmenu li a:hover{
color:#fff;
text-shadow:0 0 10px #fff;
}
Nenhum comentário
Postar um comentário