This plugin is very helpful when dealing with long pages and/or a lot of images and makes the pages load faster.

Unveil.js

I found an handy jQuery plugin written by Luís Almeida that does exactly this job with just a few lines of js: Unveil.

(function( $ ) {
 $.fn.unveil = function () {
 var images = this, loaded, inview;

 this.one("unveil", function(){
 this.setAttribute( "src", this.getAttribute( "data-src" ) );
 this.removeAttribute( "data-src" );
 });

 function unveil () {
 inview = images.filter(function(){
 var $e = $(this),
 $w = $(window),
 wt = $w.scrollTop(),
 wb = wt + $w.height(),
 et = $e.offset().top,
 eb = et + $e.height();

 return eb >= wt && et <= wb;
 });

 loaded = inview.trigger("unveil");
 images = images.not( loaded );
 }

 $(window).scroll(unveil);
 unveil();

 return this;
 };
})( jQuery );

Usage

You just need to include images in this way:

<img data-src="image.jpg" src="loader.gif">

and call the the plugin to load images

$("img").unveil();

What does it means?

As you might know you can attach a CSS stylesheet to match a particular target, such as mobile devices or, in this case, the printer.

How to link a CSS only for printers

As you know you can link a CSS stylesheet in html by putting this code before the </head> tag:

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

this code means that this CSS file should be used by any device (all).

You can link as many CSS files as you want, and the rules inside them will be followed with bottom-up priority (the next rule overrides the previous one).

So, if you link a print-friendly stylesheet after the general one, you can adjust conveniently when sent to the printer.

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Changing the style right before printing

In print.css you can modify or remove all the CSS behaviors that don’t fit a printed sheet nicely.

For example

style.css:

body {
background-image: url(a-very-colorful-img.jpg);
}

print.css:

body {
background-image: none;
}

In the example above we got rid of a the background (smart choice if you want a clean printed page).

This principle applies to everything concerns css.

Example

You can understand this topic better looking at the source code of this demo. Try to print the page if you want, it’s definitively ready for the ink!

demo print demo style.css print.css

Thanks to the new Cascading Style Sheets standard you’ll build nicer layouts with some of the hottest features (shadows, border radius etc.) without even a line of JS or one of those tricky image-based workarounds!

Border Radius

In modern web design people ask for border radius. Personally speaking, I love square, tidy borders, but you know you don’t need a thing after you know how to build it ;)

CSS3

.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

HTML markup

<div class="box">
<!--CONTENT-->
</div>

Box Shadows

That’s really tricky to accomplish if you follow the image-based way. With CSS3 it’s a shoot. You can add shadows with just few line.

CSS3

.box {
 box-shadow: 5px 5px 2px black;
 -moz-box-shadow: 5px 5px 2px black;
 -webkit-box-shadow: 5px 5px 2px black;
 }

HTML markup

<div class="box">
 <!--CONTENT-->
 </div>

Text Shadows

Same as above, but it applies to texts. Very useful and cool if combined with the right font/background.

CSS3

.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}

HTML markup

<span class="font">The quick brown fox jumps over the lazy dog.</span>

@font-face

Typography is very important both on the side of readability and look. Designing an interface with just safe fonts is definitively too restrictive. Now you can add some new spice to your text!

CSS3

@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}

HTML markup

<span class="font">The quick brown fox jumps over the lazy dog.</span>

Opacity

Another tricky effect is opacity: some people use .png images to reach this goal. CSS3 makes this effect easy with an unique propriety.

CSS3

.box {opacity: .6;}

HTML markup

<div class="box"> <!--CONTENT--></div>

RGBA

RGBA is one of the most interesting propriety here. With RGBA you can set the exact RGB value you want and Alpha Channel, in other words you’ll set color and opacity in one shoot.

CSS3

.box {background: rgba(239, 182, 29, .25); /*in order: R, G, B, A*/}

HTML markup 

<div class="box"> <!--CONTENT--></div>

Multiple Backgrounds

Multiple background compatibility is here. You won’t need to create multiple divs, just use CSS3! Yeey!

CSS3

.box {width: 200px;height: 150px;background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;}

HTML markup

<div class="box"><!--CONTENT--></div>

Columns

Now it’s easy to have newspaper-like columns without different divs or jquery.

CSS3

.columns {-moz-column-count: 2;-webkit-column-count: 2;}

HTML markup

<div class="columns"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p></div>

Border Images

Make your borders uniques with this propriety.

CSS3

.box {border-width: 20px;-webkit-border-image: url(images/border.png) 27 round;-moz-border-image: url(images/border.png) 27 round;border-image: url(images/border.png) 27 round;}

HTML markup

<div class="box"><!--CONTENT--></div>

Animations

Yes, animations are cool. And you haven’t to load jQuery and use the famous animate() to make simple but effective animations.

CSS3

.box {position: relative;-webkit-transition: top 300ms linear;}.box:hover {top: 20px;}

HTML markup

<div class="box"><!--CONTENT--></div>

As we love to say, content is the king. And you should make your content nice and easy to read.

In this post, we suggest you a few useful resources created to speed up your theme development, filling your WordPress installation with various content (pages, posts, comments etc.).

You’ll be sure to stylize everything from headings to links in a proper way.

WP Dummy Content Plugin

WP Dummy Content is a plugin that creates new content automagically.

You can chose how many posts/pages to create, and which category they belongs to.
When you finish, you can remove the fake content with just a click.

WP Candy Sample WordPress Content

WP Candy sample content is a WordPress backup xml ready to be imported.
This file has everything you need: blockquotes, images, categories…

Church Crunch Dummy Data

This xml file is a good alternative to the previous one. It generates also comments.

Old fashion way

If you have time to spend, you can give a try to lipsum.org, where you can create pseudo-random content, and fill your WordPress development installation manually.

The following sets are the best minimal-looking icon set around the web, free of charge.

Pictodeck

Pictoico

Glyphish

Pixelated

Iconic

Eclipse 2

Discons

Mono Icons

With this post I want to show you a little proof of concept I’ve done this morning. It is a windmill with rotating wings I realized with just jQuery.

demo

It would be great if used as a part of a layout for a green energy related business, isn’t it?

Requirements

• jQuery
• jqueryrotate
• few minutes on Photoshop.

Photoshop

Design the page in Photoshop. This image (without windmill) will be your background.

Remember to design windmill in 2 layers: one for the body and another for wings.

Hide the bg layer, select everything and do a CMD+Shift+C (or CTRL+Shift+C in Windows).

Create a new file, Photoshop will suggest the right size (according to the size of our windmill).
Past there the windmill.

Go back to the previous file and copy the layer containing the body of the windmill. Paste it on the new file. Pay attention to position it over the previous layer and remove the layer with wings.

Save the wings’ layer as png file.

At last you should have 3 files: a background, a png file with the windmill’s body and a png file with wings.

HTML Markup

<div id="bg">
<div id="windmill">
<div id="wings"></div>
</div>
</div>

CSS

Before the code below, you should paste a CSS reset like this. You have to specify your own images and set the size and position of the windmill accordingly to your needs.

html,body{
width:100%;
height:100%;
display:block;
}

#bg{
background: url(...); <!-- url to bg -->
background-position: bottom left;
position:relative;
}

#windmill{
background:url(...) top left no-repeat; <!-- url to the windmill's body -->
width:276px;
height:447px;
display:block;
position:absolute;
bottom:50px;
left:500px;
}

#wings{
background:url(...) top left no-repeat; <!-- url to wings -->
width:276px;
height:276px;
}

As you can see I just set a background and positioned the windmill absolutely. The wings are added right into the windmill div.

I used bottom as reference for positioning in spite of top in order to have compatibility even if the size of the window is smaller than mine.

jQuery

$(document).ready(function() {

//set browser's window size
width = screen.width;
height = screen.height;
$('#bg').css({'min-height': height, 'min-width': width});

//continuously rotate wings
var rotation = function (){
$("#flaps").rotate({
angle:0,
animateTo:360,
callback: rotation,
easing: function (x,t,b,c,d){
return c*(t/d)+b;
}
});
}
rotation();

});

Conclusion

If everything is gone right, you should have a page like that of the demo. You can use it as a base for your next green energy inspired design ;)