bg slide type replaced by cover with additional option
This commit is contained in:
parent
f2247078e0
commit
92f110a614
26
en.htm
26
en.htm
|
@ -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>
|
Binary file not shown.
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 196 KiB |
26
ru.htm
26
ru.htm
|
@ -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>
|
|
@ -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:'';
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue