Monday, September 17, 2012

Create Banner Using CSS Animation & Keyframe

Create Banner Using CSS Animation & Keyframe

Have you ever thought about creating an animated web banner using CSS3 Animation & Keyframe?

Monday, September 17, 2012

3D flipping circle with CSS3 and JQuery

3D flipping circle

Today I would like to show you how to create a little component with a realistic touch. The idea is based on the sweet paper effect found in the video of the Google Developer Stories. Maybe you have created these kind of paper effects when you were a kid; basically something opens or rotates when pulling or pushing some handle.

Monday, September 17, 2012

Using CSS3 transitions: A comprehensive guide

CSS3 transitions

If you've been reading up on the latest in CSS-related techniques and tips, then there's no doubt that you've probably come across articles, blog posts, and tutorials of all sorts that have covered the topic of CSS3 transitions, which allows property changes in CSS values to occur smoothly over a specified duration. The module in the W3C specification that covers CSS3 transitions is now close to attaining Candidate Recommendation status, which means that this is a CSS3 technique that is now a staple in the toolbox of many modern CSS developers.

Monday, September 17, 2012

Making Room to Breathe: Wrapping Text Around Elements

Wrapping Text Around Elements

I constantly look through websites and wonder why designers allow text and images to get a little too close. Why don’t the elements have room to breathe?

Monday, September 17, 2012

Working with CSS regions and shadow DOM

CSS regions and shadow DOM

When we set out to develop CSS Regions we knew that most innovative applications of the technology would come from creative integrations with other web standards. Shadow DOM is one such example of a web standard just itching to be experimented with.

Monday, September 17, 2012

Master your CSS3! Ultimate CSS code snippets

CSS code snippets

CSS Reset by Eric Meyer

Eric Meyer’s css reset has become almost standard. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body { line-height: 1;}

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }

del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Friday, September 14, 2012

CSS Gradient Background – Cross Browser!

CSS Gradient Background
You read that right. This works in:

  • Firefox >=3.6
  • MSIE >=5.5 (!)
  • Safari >=4
  • Chrome

And it degrades gracefully in older browsers and Opera.

Thursday, September 13, 2012

Modern Block Quote Styles

Modern Block Quote Styles

The markup for the blockquotes will be as followed:

<div class="mb-wrap mb-style-1">
    <div class="mb-thumb"></div>
    <blockquote cite="http://www.gutenberg.org/ebooks/1257">
        <p>Never fear quarrels, but seek hazardous adventures.</p>
    </blockquote>
    <div class="mb-attribution">
        <p class="mb-author">Alexandre Dumas</p>
        <cite><a href="http://www.gutenberg.org/ebooks/1257">The Three Musketeers</a></cite>
    </div>
</div>

Thursday, September 13, 2012

Creative Web Typography Styles

Creative Web Typography Styles

With a little bit of CSS magic we can transform text into beautiful typography and omit the use of images in many cases. In this tutorial we will be creating different web typography styles using the lettering.js jQuery plugin and various CSS techniques. For some of the examples we will also add hover transitions to make things a bit more interactive.

We'll use lettering.js in most of the cases.

Wednesday, September 12, 2012

CSS Positioning

CSS Positioning

To use CSS for layout effectively, it helps to know how it's used to position page content. This article gives an overview of the methods and rules that govern visual rendering in the CSS2 specification. It also points out some things to watch out for.