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

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

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