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
Show whitespace changes
Inline Side-by-side
Showing with 69 additions and 26 deletions
en.htm
View file @ 92f110a6
...@@ -10,11 +10,16 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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>
<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> <section>
<header> <header>
<h2>Picture</h2> <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 @@ ...@@ -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>
\ 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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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>
<header>
<h2>Вписана по высоте</h2>
</header>
<img src="pictures/picture.jpg" alt="">
</section>
</div></div>
<div class="slide cover w" id="FitToWidth"><div>
<section> <section>
<header> <header>
<h2>Картинка</h2> <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 @@ ...@@ -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>
\ No newline at end of file
themes/ribbon/styles/style.css
View file @ 92f110a6
...@@ -176,23 +176,42 @@ BODY { ...@@ -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 { ...@@ -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:'';
} }
......
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