CSS - Cascading Style Sheets

Image Sprites – How to merge multiple images, and how to split them

An Image Sprites is a single image which is merged with multiple images. The reason why Image Sprites are needed instead of inserting multiple images into a page is to SAVE network bandwidth as well as reduce the number of server requests. Since inserting many images into a page will take longer time to load the pages, merging images into a single will help reduce loading time. For these reasons, I would recommend to use "CSS Image Sprites" function instead of inserting multiple images. Unfortunately, most of designers/developers not support this function as default, but through this tutorial, you would be able to merge…
Continue Reading »
CSS - Cascading Style Sheets

Unquoted font family names in CSS

Are the quotes in font-family: 'Comic Sans MS' required, or not? According to the the CSS validator, the quotes are supposed to be there in this case because the font family name contains spaces: Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space. However, this is an error in the CSS validator. The warning message suggests that all font family names containing whitespace should be quoted, which is simply not true. font-family: Comic Sans MS (without quotes) is perfectly valid CSS that works…
Continue Reading »
CSS - Cascading Style Sheets

jQuery Plugin for Cartoon-like Background Image Sprite Animation – AniDG – (alernative to animated Gif)

What is AniDg? AniDg is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with several benefits. At first, it's always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the "dark side" of it is that an animated GIF allows only 256 colors and you cannot control animation in any way. The AniDg loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation.…
Continue Reading »
CSS - Cascading Style Sheets

How to create a simple CSS3 loading animation

While playing DIRT 3, I've noticed a very cool triangle animation as part of their UI. Almost immediately, I thought about how to build a similar version of it using CSS3. So, in this article you'll see an experiment about how to create a simple CSS3 loading animation. For this example, I'll be using two CSS3 animations: one that fades the color for the triangles and one animation that rotates the whole design. These two animations, synchronized, will help creating a quite nice effect. The HTML Initially, I wanted to use pseudo-elements in order to have less markup elements. Here's how the markup…
Continue Reading »
CSS - Cascading Style Sheets

HTML5 Logo Design Using CSS3

As you probably found out, some time ago, the The World-Wide Web Consortium (W3C) has unveiled the HTML5 Logo. They launched more than a logo as they got also a full branding, including badges, t-shirts and stickers. So, I suppose that's a good thing, that HTML5 got some branding, sounds very interesting! While looking at it and admiring it, as I find it very nice, I thought about how can I do it with CSS3 (typically for me). What about the logo? It's A Bird… It's A Plane… No, it's the new HTML5 logo and in this article I'll design it using only CSS! Concept…
Continue Reading »
CSS - Cascading Style Sheets

HTML5 canvas awesomeness – games roundup

HTML5 is being developed as the next major revision of HTML, the core markup language of the World Wide Web. Besides new elements like header, section, footer, etc., the HTML5 brings you the canvas element. The canvas is a rectangular area within you can use Javascript to draw graphics or other visual images on a web page. Although HTML5 is not a W3C recommendation yet (because of cross browsers issues), people already started to play with it, and when I say play, I mean it. Today I’ll share with you some awesome HTML5 games demos that show the HTML5 canvas potential. Agent 008 Ball Z-Type RGB…
Continue Reading »
CSS - Cascading Style Sheets

Google Font API and Typekit solutions VS CCS3 @font-face

A quick tutorial here about setting up your website with custom fonts  I am also sharing these alternative solutions, pros and cons. The aim of this post is to briefly round up your options when using custom fonts in web design. CSS3 @font-face The @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5.  However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format until Safari was released. Since then, web designers began to use .ttf or .otf fonts for their websites and…
Continue Reading »
CSS - Cascading Style Sheets

Fancy FAQ page using CSS3 only

Usually, a FAQ page is that long page with lots of questions and answers, the one we are searching for when we need some extra info regarding a subject. So, for example, if you own a website that sells stuff, then you will need a page like that. In this article I’ll show you how to create a fancy FAQ page using CSS3 only, no JavaScript. The idea When I visited Facebook’s Help Center section (theirs FAQ’s), I noticed a cool effect for the answers previews. They show a small, faded and clipped text preview for the answer, and then, when the…
Continue Reading »
CSS - Cascading Style Sheets

CSS3 Pricing Table Design For A Product or Service Plan

When designing a pricing table for a product or service, your job as a web designer/developer is to make sure that the table is easy to understand, intuitive and clear. This way, you will help users to choose the best plan for theirs needs. So, in this article you'll learn how to build an awesome CSS3 pricing table, with no images and minimal HTML markup. If you're in a hurry, just check the final result. The HTML Here's a markup excerpt with the Enterprise section: <div id="pricing-table" class="clear">     <div class="plan">         <h3>Enterprise<span>$59</span></h3>      …
Continue Reading »
CSS - Cascading Style Sheets

CSS3 Webkit gradient support updated

A while ago, I wrote another article here about the CSS3 gradients. At that time, you saw the browser support, the advantages of using them and their syntax. So, what’s new since then? The CSS3 Webkit syntax, which was quite different than Mozilla at that time, has been updated! Latest news About some time ago, the WebKit dev team announced they were updating the CSS3 gradient support in the rendering engine. The most important point of their announcement was the that they will bring the CSS3 Webkit syntax in line with Mozilla’s implementation. Pretty cool huh? Now, you will have less headache pain when you’ll…
Continue Reading »