Discover Top Posts Tagged with #multiple backgrounds

Multiple Backgrounds with CSS3

A simple and cool way to have multiple backgrounds on a single DIV element. This is a CSS3 property and works on every major browser (with always the unfortunate inconvenience of the IE Family - Works on IE9+).

The syntax:

background: url(image1.png) 600px 10px no-repeat, url(image2.png) 10px 10px no-repeat, url(image3.png);

Where:

image1 = image on top; image2 = image on the middle; image3 = image on bottom;

It's like z-index but this isn't z-index, it's parts of one single element.

Like Chris Coyier of CSS-Tricks wrote:

I think it’s slightly confusing, since it’s the opposite of how HTML works naturally. If all elements have the same z-index (and are positioned in some way and overlap) the last element will be on top, not the first. Not that big of a deal though, just need to learn it once.

For more information about multiple background images try this post from CSS-Tricks or this video tutorial from Treehouse.

#code #css #css3 #background #multiple backgrounds #web design

Pure CSS3 Progress bar

Here is my new experiment which uses only CSS to create such beautiful progress bar with fake reloading. It's really easy but some of the properties could inspire you for more.

#css3 #css gradients #multiple backgrounds #progressbar

Multiple Background Slideshow!

Live View

Paste this code under your <head> tag <link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/css/demo.css" />

Paste this code under your <style type="text/css"> tag Note: Make sure that you change YOURIMAGEURL with the url of the images you want

.cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .cb-slideshow:after { content: ''; background: transparent url(../../AppData/Local/Temp/images/pattern.png) repeat top left; } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 20s linear infinite 0s; -moz-animation: imageAnimation 23s linear infinite 0s; -o-animation: imageAnimation 23s linear infinite 0s; -ms-animation: imageAnimation 23s linear infinite 0s; animation: imageAnimation 23s linear infinite 0s; } .cb-slideshow li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 240px; padding: 0; line-height: 200px; } .cb-slideshow li:nth-child(1) span { background-image: url(YOURIMAGE1) } .cb-slideshow li:nth-child(2) span { background-image: url(YOURIMAGE2); -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; } .cb-slideshow li:nth-child(3) span { background-image: url(YOURIMAGE3); -webkit-animation-delay: 10s; -moz-animation-delay: 10s; -o-animation-delay: 10s; -ms-animation-delay: 10s; animation-delay: 10s; } .cb-slideshow li:nth-child(4) span { background-image: url(YOURIMAGE4); -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; } .cb-slideshow li:nth-child(5) span { background-image: url(YOURIMAGE5); -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -o-animation-delay: 20s; -ms-animation-delay: 20s; animation-delay: 20s; } .cb-slideshow li:nth-child(2) div { -webkit-animation-delay: 5s; -moz-animation-delay: 5s; -o-animation-delay: 5s; -ms-animation-delay: 5s; animation-delay: 5s; } .cb-slideshow li:nth-child(3) div { -webkit-animation-delay: 10s; -moz-animation-delay: 10s; -o-animation-delay: 10s; -ms-animation-delay: 10s; animation-delay: 10s; } .cb-slideshow li:nth-child(4) div { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; } .cb-slideshow li:nth-child(5) div { -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -o-animation-delay: 20s; -ms-animation-delay: 20s; animation-delay: 20s; } /* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-animation-timing-function: ease-out; } 17% { opacity: 1 } 19% { opacity: 0 -webkit-animation-timing-function: ease-out;} 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-animation-timing-function: ease-out; } 17% { opacity: 1 } 19% { opacity: 1 } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-animation-timing-function: ease-out; } 17% { opacity: 1 } 19% { opacity: 1 } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-animation-timing-function: ease-out; } 17% { opacity: 1 } 19% { opacity: 1 } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 19% { opacity: 1 } 100% { opacity: 0 } } /* Animation for the title */ @-webkit-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .cb-slideshow li span{ opacity: 1; } @media screen and (max-width: 1140px) { .cb-slideshow li div h3 { font-size: 140px } } @media screen and (max-width: 600px) { .cb-slideshow li div h3 { font-size: 80px } }

Paste this code under your <body> tag

<ul class="cb-slideshow"> <li><span>Image 01</span><div><h3></h3></div></li> <li><span>Image 02</span><div><h3></h3></div></li> <li><span>Image 03</span><div><h3></h3></div></li> <li><span>Image 04</span><div><h3></h3></div></li> <li><span>Image 05</span><div><h3></h3></div></li> <li><span>Image 06</span><div><h3></h3></div></li> </ul>

/li>

#background codes #backgrounds #multiple backgrounds