ivan-igorevich
/
bmstu-mt-wp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bg slide type replaced by cover with additional option

This commit is contained in:
Vadim Makeev 2012-02-28 14:20:18 +01:00
parent f2247078e0
commit 92f110a614
4 changed files with 69 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
en.htm
View File

@ -10,11 +10,16 @@
use slide ID to get needed elements use slide ID to get needed elements
--> -->
<style> <style>
#Cover H2 { #Cover h2 {
color:#FFF; color:#FFF;
text-align:center; text-align:center;
font-size:70px; font-size:70px;
} }
#FitToWidth h2,
#FitToHeight h2 {
color:#FFF;
text-align:center;
}
</style> </style>
</head> </head>
<body class="list"> <body class="list">
@ -22,13 +27,12 @@
<h1>Shower Presentation Template</h1> <h1>Shower Presentation Template</h1>
<p>Vadim Makeev, Opera Software</p> <p>Vadim Makeev, Opera Software</p>
</header> </header>
<div class="slide bg" id="Cover"><div> <div class="slide cover" id="Cover"><div>
<section> <section>
<header> <header>
<h2>Shower Presentation Template</h2> <h2>Shower Presentation Template</h2>
</header> </header>
<img src="pictures/cover.jpg" alt=""> <img src="pictures/cover.jpg" alt="">
<!-- © John Carey, http://fiftyfootshadows.net/ -->
</section> </section>
</div></div> </div></div>
<div class="slide" id="Header"><div> <div class="slide" id="Header"><div>
@ -96,13 +100,20 @@
</svg> </svg>
</section> </section>
</div></div> </div></div>
<div class="slide bg" id="Picture"><div> <div class="slide cover" id="FitToHeight"><div>
<section> <section>
<header> <header>
<h2>Picture</h2> <h2>Fit to height</h2>
</header>
<img src="pictures/picture.jpg" alt="">
</section>
</div></div>
<div class="slide cover w" id="FitToWidth"><div>
<section>
<header>
<h2>Fit to width</h2>
</header> </header>
<img src="pictures/picture.jpg" alt=""> <img src="pictures/picture.jpg" alt="">
<!-- © Patrick H. Lauke, http://www.flickr.com/photos/redux/ -->
</section> </section>
</div></div> </div></div>
<div class="slide" id="CodeSample"><div> <div class="slide" id="CodeSample"><div>
@ -193,6 +204,7 @@
--> -->
<div class="progress"><div></div></div> <div class="progress"><div></div></div>
<script src="scripts/script.js"></script> <script src="scripts/script.js"></script>
<!-- Copyright © 2010–2012 Vadim Makeev, http://pepelsbey.net/ --> <!-- Copyright © 2010–2012 Vadim Makeev — pepelsbey.net -->
<!-- Photos by John Carey — fiftyfootshadows.net -->
</body> </body>
</html> </html>

BIN
pictures/picture.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 196 KiB

26
ru.htm
View File

@ -10,11 +10,16 @@
ID слайда для доступа к необходимым элементам ID слайда для доступа к необходимым элементам
--> -->
<style> <style>
#Cover H2 { #Cover h2 {
color:#FFF; color:#FFF;
text-align:center; text-align:center;
font-size:70px; font-size:70px;
} }
#FitToWidth h2,
#FitToHeight h2 {
color:#FFF;
text-align:center;
}
</style> </style>
</head> </head>
<body class="list"> <body class="list">
@ -22,13 +27,12 @@
<h1>Шаблон презентаций Shower</h1> <h1>Шаблон презентаций Shower</h1>
<p>Вадим Макеев, Opera Software</p> <p>Вадим Макеев, Opera Software</p>
</header> </header>
<div class="slide bg" id="Cover"><div> <div class="slide cover" id="Cover"><div>
<section> <section>
<header> <header>
<h2>Шаблон презентации Shower</h2> <h2>Шаблон презентации Shower</h2>
</header> </header>
<img src="pictures/cover.jpg" alt=""> <img src="pictures/cover.jpg" alt="">
<!-- © John Carey, http://fiftyfootshadows.net/ -->
</section> </section>
</div></div> </div></div>
<div class="slide" id="Header"><div> <div class="slide" id="Header"><div>
@ -96,13 +100,20 @@
</svg> </svg>
</section> </section>
</div></div> </div></div>
<div class="slide bg" id="Picture"><div> <div class="slide cover" id="FitToHeight"><div>
<section> <section>
<header> <header>
<h2>Картинка</h2> <h2>Вписана по высоте</h2>
</header>
<img src="pictures/picture.jpg" alt="">
</section>
</div></div>
<div class="slide cover w" id="FitToWidth"><div>
<section>
<header>
<h2>Вписана по ширине</h2>
</header> </header>
<img src="pictures/picture.jpg" alt=""> <img src="pictures/picture.jpg" alt="">
<!-- © Patrick H. Lauke, http://www.flickr.com/photos/redux/ -->
</section> </section>
</div></div> </div></div>
<div class="slide" id="CodeSample"><div> <div class="slide" id="CodeSample"><div>
@ -193,6 +204,7 @@
--> -->
<div class="progress"><div></div></div> <div class="progress"><div></div></div>
<script src="scripts/script.js"></script> <script src="scripts/script.js"></script>
<!-- Copyright © 2010–2012 Вадим Макеев, http://pepelsbey.net/ --> <!-- Copyright © 2010–2012 Vadim Makeev — pepelsbey.net -->
<!-- Photos by John Carey — fiftyfootshadows.net -->
</body> </body>
</html> </html>

43
themes/ribbon/styles/style.css
View File

@ -176,23 +176,42 @@ BODY {
color:#888; color:#888;
} }
/* Background */ /* Cover */
.slide.bg section { .slide.cover section {
background:transparent; background:#000;
overflow:hidden;
} }
.slide.bg section:before { .slide.cover section:before {
display:none; display:none;
} }
.slide.bg img, .slide.cover img,
.slide.bg svg, .slide.cover svg,
.slide.bg video, .slide.cover video,
.slide.bg object { .slide.cover object {
position:absolute; position:absolute;
top:0; top:0;
left:0; left:50%;
z-index:-1; z-index:-1;
height:100%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
}
.slide.cover.w img,
.slide.cover.w svg,
.slide.cover.w video,
.slide.cover.w object {
top:50%;
left:0;
width:100%; width:100%;
background:#FFF; height:auto;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
} }
/* Shout */ /* Shout */
@ -373,10 +392,10 @@ BODY {
-o-transform:scale(1); -o-transform:scale(1);
transform:scale(1); transform:scale(1);
} }
.full .slide.bg { .full .slide.cover {
z-index:1; z-index:1;
} }
.full .slide.bg:after, .full .slide.cover:after,
.full .slide.shout:after { .full .slide.shout:after {
content:''; content:'';
} }