Back in 1999, the W3C created a new format called SVG  (Scalable Vector Graphics), that is  a XML-based vector image format for two-dimensional graphics.
It’s a great format: since it is in fact a text file, you can read it as a string in php (or asp or whatever), stylize with css and manipulate with javascript.
After more than 10 years this format is getting more attention by designer and has a decent support by browsers (IE 9+, Firefox, Chrome, Safari and Opera).

raster vs svg (from Wikipedia)

It’s the upcoming standard in web graphics, we know it, what’s new?

You might ask.
Well, there’s nothing really new that I want to share today, except the fact that I decided, with my fellows at Verticalismi, to introduce it as a standard for webcomics.

We thought that thanks to the features of this format we mentioned above, the limit is the artists’ imagination (that, well, it should mean no limits).

We published a basic example here and here. To show how svg can be used to scale a comic and reveal details like the postmark in the example (it has a piece of the Bible on it!).

What do you think? Are you already working with SVG? Share your thoughts!

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