Free Photo Gallery Web Layout

[mikethedj4]

Click Here: To View The Demo!

All the divs should all fade in only if you're using -webkit meaning if you're a safari, or chrome user. (I could of easily done it in JQuery, however I wanted to make this entirely in CSS3, except you can't click and drag divs in CSS3 yet, so that was the only thing I used JQuery for)

The background was made in Gimp. Everything else was done in code, besides the images in the divs, and thoughs you can change yourself.

Also feel free to adjust the CSS however you want, like positioning adding more than 10 images, etc:

[attachment=0]photogallery-weblayout.zip[/attachment]

NOTE: If you want to takeout the fade in animation you need to takout these codes inside the style.css file.

The code below is located in div.

Code:

-webkit-animation-name:fade-in;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-iteration-count:1;

The code below is located in galleryline.

Code:

-webkit-animation-name:fade-in;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-iteration-count:1;

Also on the very top of the CSS document you'll need to remove this code,

Code:

@-webkit-keyframes fade-in {
0% {
opacity: 0;}
50% {
opacity: 5;}
100% {
opacity: 1;}}

Now if you want all the divs to fade in, but your browser doesn't support it, just put down the following code inside <script type="text/javascript"> (which is located in index.html) which is where the JQuery code below will go.

Code:

$(document).ready(function() {
$( "div" ).hide();
$("div").fadeIn(1000);
});

[elrene]

i must say this is pretty damn tight

[mikethedj4]

Thanks I'm still fairly new to CSS3, and am still learning it, but I really love how to can make everything animate so nicely in it, however the animation keyframes only work for webkit browsers like chrome, and safari. I've been trying to find another way to achieve the same effect in CSS3, but have it work on other browsers like firefox, and opera, but no luck so far.

[B.SkiLLs]

i must say this is pretty damn tight

yup.. good work.