PHP Classes

File: kb/style.css

Recommend this page to a friend!
  Classes of Barton Phillips   Slide Show   kb/style.css   Download  
File: kb/style.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Slide Show
Present a slide show of local or remote images
Author: By
Last change: Update of kb/style.css
Date: 2 months ago
Size: 2,792 bytes


Class file image Download
/* KENBURNS STYLES -------------------------------------------------------*/ /* kenburns_slideshow is the wrapper div. Our list of Images scrolls inside of this frame To compute the minimum frame size needed:; image width * scale image height * scale if the image size is smaller than the frame size, gaps may appear. If image sizes are exactly the same, the images will fade over one another and not move. */ #kenburns-slideshow { position: relative; width: 600px; height: 360px; border: 10px solid darkred; box-sizing: border-box; z-index: 1; overflow: hidden; } /* The plugin wraps the images in div.kb-slide. This allows me to run separate animations simultaneously. */ .kb-slide{ position: absolute; z-index: 1; opacity: 0; } /* I used position relative here because IE8 didnt like the opacity when the img was set to absolute* translate3d(000) kicks them into HW acceleration, and backface-visibility gives some performance boosts.*/ .kb-slide img{ position: relative; -webkit-transform: translate3d(0,0,0) -moz-transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } /* If the script encounters an image that hasnt loaded, it pops up a little loading wheel. I used a little CSS3 but you could also use a gif to better handle ie8*/ .loader { width:32px; height:32px; top:6px; left:550px; border:5px solid rgba(128,128,128,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px dotted rgba(0,0,0,0); border-radius:32px; -moz-animation:spin .7s infinite linear; -webkit-animation:spin .7s infinite linear; } @-moz-keyframes spin { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); } } @-moz-keyframes spinoff { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(-360deg); } } @-webkit-keyframes spin { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); } } @-webkit-keyframes spinoff { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(-360deg); } } #kenburns-description{ width: 600px; background-color:#191919; color:#999; padding:0 22px 22px 22px; } #kenburns-description p{ margin:0; padding:0; line-height: 18px; font-size:12px; } #kenburns-description a{ color:white; text-decoration: none; } #kenburns-description a:hover{ color:green; text-decoration: none; } #kenburns-description a:visited{ color:white; } .title { clear: left; margin:0; padding:15px 0 0 0; } #slide-title{ margin-top: 5px; font-weight: bold; } #status{ color:#333; font-size: 12px; } /* #### CSS that's applied when the viewing area's height is 600px or less #### */ @media screen and (max-width: 600px){ #kenburns-slideshow{ width: 100%; height: 200px; border: none; } }