My little CSS experiment (free to use)

Gaieus

When at building / tweaking websites, I generally dig into the topic a bit deeper (than my lay / amateur "average" knowledge would require). One of the results is this little "playground" I have just created (to be honest, it has nothing to do with my current website building / tweaking but if mankind were not a curious species anyway, we would still be sitting in the trees).

I thought I'd share the whole thing as it seems to be a nice result that can be used for small portfolios / presenting a single project online etc. Hereby I grant complete freedom for everyone to use it (I found some elements like rotate.php on the Internet myself).

The main concept is that it uses the <body> background as an image display place (slide-show if you want, or eventually a gallery if further code is added).

Tweaking the code is fairly easy (I could create it myself) but needs a bit of html and css knowledge. In case someone is interested but lost, I can give some help here (limited to my knowledge though).

System requirements: server with running php files needed. Background rotation will not work without this. If you have no access to such a server or want to run the files off-line, the background image definition has to be changed to a single image.

So here is the thing I have come up with:
http://gaieus.hu/css-playground/

Some "features":

On the index page (linked above), the <body> background rotates (try to refresh the page). The background images come from a folder that you need to specify in the style sheet. Currently the body css definition looks like this:

<span class="syntaxdefault">body</span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">background</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> black url</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">backgrounds</span><span class="syntaxkeyword">/</span><span class="syntaxdefault">rotate</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">php</span><span class="syntaxkeyword">)</span><span class="syntaxdefault"> center fixed no</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">repeat</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">background</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">size</span><span class="syntaxkeyword">;</span><span class="syntaxdefault">cover</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">margin</span><span class="syntaxkeyword">;</span><span class="syntaxdefault">0</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">overflow</span><span class="syntaxkeyword">;</span><span class="syntaxdefault">hidden</span><span class="syntaxkeyword">;<br />}</span><span class="syntaxdefault"> </span>

and the rotate.php file, which is placed in stead of the "real" background image does the job (all credits are left intact in the php file so you can read everything)

The background image is set to fully cover the open window. Unfortunately this does not work for IE 8 or earlier, so in order for these browsers to "downgrade gracefully", you need to center the background image and use a fairly big one. In the above examples, I use 1920px*1080px (16:9) images. If you have a browser anything more modern than IE 8, you can try resizing the window in different ways to see how the background image changes. This feature is done by the background-size:cover; line above. More info about this can be found here.
There is a small « symbol at the top right. It opens a <div> that you can use to add info in. Currently it has a fixed size as defined in this css class:hover

<span class="syntaxdefault"></span><span class="syntaxkeyword">.</span><span class="syntaxdefault">wrapper</span><span class="syntaxkeyword">;</span><span class="syntaxdefault">hover<br /></span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">height</span><span class="syntaxkeyword">;</span><span class="syntaxdefault">600px</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">width</span><span class="syntaxkeyword">;</span><span class="syntaxdefault">900px</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">color</span><span class="syntaxkeyword">;</span><span class="syntaxcomment">#eee;<br />/* overflow-y;auto; */<br /></span><span class="syntaxdefault">overflow</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">x</span><span class="syntaxkeyword">;</span><span class="syntaxdefault">hidden</span><span class="syntaxkeyword">;<br />}</span><span class="syntaxdefault"> </span>

this should give enough space to talk about a given project in general on the main home page and the individual images later. You can, of course, change this to anything you wish and also, set some percentage in stead of the given pixel sizes (say width:90%;) but be warned that in this case, you can get some funny "dancing" of the resulting <div> especially when closing it.
Also, you can see a line of code commented out. In case you need to have longer text, delete the starting /* and ending */ symbols and a scroll bar will appear on the right when the text is longer. Nevertheless due to the whole <div> inevitably being shorter than the text while opening, this scroll bar will pop up all the time for a bit, even when eventually it disappears so unless you really want to have very long texts, leave it off or only define it on certain pages adding this in the <head> section of those individual pages:

<span class="syntaxdefault"></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">>.</span><span class="syntaxdefault">wrapper</span><span class="syntaxkeyword">;</span><span class="syntaxdefault">hover</span><span class="syntaxkeyword">{</span><span class="syntaxdefault">overflow</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">y</span><span class="syntaxkeyword">;</span><span class="syntaxdefault">auto</span><span class="syntaxkeyword">;}</</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">></span><span class="syntaxdefault"> </span>

(this will simply override the "general" rule set in the css file)

Setting certain (non-rotating) images on certain pages: two ways.
you can either add the background image "inline", adding it to the <body> tag on the individual pages (again, overriding the general, rotating rule set in the css file) like I did for the "Winter" page this way (ehm... "tél" means Winter in Hungarian):

<span class="syntaxdefault"></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">body style</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"black background; url(backgrounds/septichora-tel.jpg) center fixed no-repeat;"</span><span class="syntaxkeyword">></span><span class="syntaxdefault"> </span>

or with a "more elegant" (and more modern, css compliant) way, add a special class to the css file and add that class to the <body> tag again.
The class added to the css file looks this way:

<span class="syntaxdefault"></span><span class="syntaxkeyword">.</span><span class="syntaxdefault">summer </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">background</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> black url</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">backgrounds</span><span class="syntaxkeyword">/</span><span class="syntaxdefault">septichora</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">jpg</span><span class="syntaxkeyword">)</span><span class="syntaxdefault"> center fixed no</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">repeat</span><span class="syntaxkeyword">;<br />}</span><span class="syntaxdefault"> </span>

and the <body> tag of the "Summer" page now this way:

<span class="syntaxdefault"></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">body class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"summer"</span><span class="syntaxkeyword">></span><span class="syntaxdefault"> </span>

To be honest, since here we are dealing with single pages, I see no real difference in the implementation but I fear TT who would come and tell me that the first version is not too elegant.
I think this is it. When you open the link above, at the bottom of the opening <div>, there are links to these two, "individual" pages (some better / nicer navigation could be created / added here and I may play around with it later). Note that since the index page pulls the images randomly, it can happen that you see the same two images when changing the pages. Howver when you refresh the index page, it should (most of the times) give a new image (of course, random means that it might serve the same) but refreshing the winter or summer pages should always serve the same image.

Happy coding. Here is the whole thing packed in a zip file. Nothing but pure html and css (except for that singe, rotate.php that you need not touch at all), no javascript needed for the whole thing to run.

Some purely "cosmetic" things that do not run on older IE versions are box shadow, box animation, round box corners. There are "substitutes" for these but I was too lazy to dig. Older versions (than IE 9) are slowly running out anyway.

Finally: since this whole thing works with fairly large images, it is good to pre-fetch (pre-load) them into the browser cache once a visitor accesses the site. If you put this code into the <head> section of your pages, it will cause the visitor's browser to download the images into the browser cache and from then on, going to individual pages will display the images instantly:

<span class="syntaxdefault"></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">link rel</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"prefetch"</span><span class="syntaxdefault"> href</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"/backgrounds/"</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">/></span><span class="syntaxdefault"> </span>

css-playground.zip

tridem

Interesting, thanks for sharing

@unknownuser said:

if mankind were not a curious species anyway, we would still be sitting in the trees

couldn't agree more