mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-17 02:24:12 +02:00
Code Issues Releases Wiki Activity

bg with a frame=[class*="background"].frame

Browse Source
This commit is contained in:
José Luis Antúnez
2017-04-20 11:49:10 +02:00
committed by GitHub
parent 34d8ca3cdb
commit 8cc71eb804
2 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
static/css/base.css
View File

@@ -1,8 +1,8 @@
/*--------------------------------------------------------------------------------- /*---------------------------------------------------------------------------------
App: WebSlides App: WebSlides
Version: 1.0.0 Version: 1.3.0
Date: 2017-02-11 Date: 2017-04-20
Description: A simple and versatile framework for building HTML presentations, landings, and portfolios. Description: A simple and versatile framework for building HTML presentations, landings, and portfolios.
Authors: @jlantunez, @belelros, and @luissacristan Authors: @jlantunez, @belelros, and @luissacristan
Author URI: http://twitter.com/webslides Author URI: http://twitter.com/webslides
@@ -410,6 +410,7 @@ width: 90%;
.frame,.shadow { .frame,.shadow {
padding: 2.4rem; padding: 2.4rem;
} }
.radius {border-radius: .4rem;} .radius {border-radius: .4rem;}
.alignright { .alignright {
@@ -1474,8 +1475,8 @@ Vertically and horizontally centered
* = All HTML elements will have those styles.*/ * = All HTML elements will have those styles.*/
section * { section * {
-webkit-animation: fadeIn 0.3s ease-in-out; -webkit-animation: fadeIn 0.6s ease-in-out;
animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.6s ease-in-out;
} }
section .background,section .light,section .dark { section .background,section .light,section .dark {
-webkit-animation-duration:0s; -webkit-animation-duration:0s;
@@ -1596,8 +1597,8 @@ padding: 2.4rem;
z-index: 4; z-index: 4;
} }
#navigation { #navigation {
-webkit-animation: fadeIn 16s; -webkit-animation: fadeIn 8s;
animation: fadeIn 16s; animation: fadeIn 8s;
opacity:0; opacity:0;
} }
#navigation:hover { #navigation:hover {
@@ -1683,6 +1684,7 @@ a#previous {
background-size: cover; background-size: cover;
} }
/*fullscreen video /*fullscreen video
<video class="background-video"> <video class="background-video">
*/ */
@@ -1772,6 +1774,13 @@ a#previous {
animation: anim 80s linear infinite; animation: anim 80s linear infinite;
} }
/*=== Background with a frame === */
/*<span class="background" style="background-image:url('image.jpg')"></span>
<span class="background frame"></span>*/
[class*="background"].frame {
margin: 2.4rem;
}
/*=============================================================== /*===============================================================
6. Magic blocks with flexbox (Auto-fill & Equal Height) 6. Magic blocks with flexbox (Auto-fill & Equal Height)

4
static/css/colors.css
View File

@@ -258,7 +258,9 @@ text-shadow: none;
.frame { .frame {
border: .8rem solid #fff; border: .8rem solid #fff;
} }
[class*="background"].frame {
border-width: .2rem;
}
/*Layer/Box Shadow*/ /*Layer/Box Shadow*/
.shadow,.pre { .shadow,.pre {
position: relative; position: relative;