Skip to content

M
my-cucumbers-ru-github-io
Commit 92f110a6 authored by Vadim Makeev's avatar Vadim Makeev
Browse files
Options

bg slide type replaced by cover with additional option

parent f2247078
Hide whitespace changes
Inline Side-by-side
Showing with 69 additions and 26 deletions
en.htm
View file @ 92f110a6
......@@ -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>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>Picture</h2>
<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>
\ No newline at end of file
pictures/picture.jpg
View replaced file @ f2247078 View file @ 92f110a6
pictures/picture.jpg

86.1 KB | W: | H:

pictures/picture.jpg

196 KB | W: | H:

pictures/picture.jpg
pictures/picture.jpg
pictures/picture.jpg
pictures/picture.jpg
  • 2-up
  • Swipe
  • Onion skin
ru.htm
View file @ 92f110a6
......@@ -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>
</header>
<img src="pictures/picture.jpg" alt="">
</section>
</div></div>
<div class="slide cover w" id="FitToWidth"><div>
<section>
<header>
<h2>Картинка</h2>
<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>
\ No newline at end of file
themes/ribbon/styles/style.css
View file @ 92f110a6
......@@ -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:'';
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment