styles and demo slide for inner navigation

This commit is contained in:
Vadim Makeev 2011-07-23 08:28:57 +04:00
parent c58e59445a
commit a69fdf5654
2 changed files with 44 additions and 20 deletions

View File

@ -144,6 +144,19 @@
</blockquote> </blockquote>
</section> </section>
</div></div> </div></div>
<div class="slide" id="InnerNavigation"><div>
<section>
<header>
<h2>Inner Navigation</h2>
</header>
<ol class="inner">
<li class="active">This tool is provided</li>
<li>Without warranty, guarantee</li>
<li>Or much in the way of explanation
<li>Erase your hard drive…</li>
</ol>
</section>
</div></div>
<div class="slide" id="ThankYou"><div> <div class="slide" id="ThankYou"><div>
<section> <section>
<header> <header>

View File

@ -8,28 +8,26 @@ BODY {
/* Slide /* Slide
---------------------------------------- */ ---------------------------------------- */
.slide { .slide:after {
counter-increment:paging;
content:counter(paging, decimal-leading-zero);
} }
.slide:after { .slide SECTION {
counter-increment:paging; padding:80px 120px 0;
content:counter(paging, decimal-leading-zero); width:784px;
height:560px;
background:#FFF;
color:#000;
}
.slide SECTION:before {
position:absolute;
top:0;
right:120px;
width:40px;
height:120px;
background:url(../images/ribbon.svg) no-repeat;
content:'';
} }
.slide SECTION {
padding:80px 120px 0;
width:784px;
height:560px;
background:#FFF;
color:#000;
}
.slide SECTION:before {
position:absolute;
top:0;
right:120px;
width:40px;
height:120px;
background:url(../images/ribbon.svg) no-repeat;
content:'';
}
/* Header */ /* Header */
.slide HEADER { .slide HEADER {
@ -327,6 +325,19 @@ BODY {
content:''; content:'';
} }
/* Inner Navigation */
.inner > * {
opacity:0;
-webkit-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear;
-o-transition:opacity 0.5s linear;
transition:opacity 0.5s linear;
}
.inner > .active {
opacity:1;
}
/* Progress */ /* Progress */
.full .progress { .full .progress {
position:absolute; position:absolute;