Thursday, September 27, 2012

CSS3 border-image property: making photos really cool!

CSS3 border-image property

Creating borders is nothing new in HTML & CSS; we've been able to add borders since the beginning. You may have been familiar with solid borders, dotted borders, dashed borders and so on.

Thursday, September 27, 2012

Responsive CSS3 slider without javascript*

Responsive CSS3 slider

*No JavaScript Functionality (1 compatability fix though)

iOS devices don't handle labels properly. That means if you click on a label, it should target the object that it is for=. I've added a javascript fix for that. I could probably replicate the whole thing using :target rather than :checked which would also mend the problem, but that would mean I could only have 1 special function per page. I'll look into that some other time.

Thursday, September 27, 2012

Making a loading icon in just CSS!

loading icon

This is a little something I made in my spare time, just for a bit of fun. It was excruciatingly time consuming as I felt the easiest way to do it was to make individual bars and rotate them into the right position. The pain of changing left by 2% was almost excruciating. I used percentages in particular as I felt I wanted it to be resizeable in an easy way (it would have to be, changing the size manually is perhaps the most soul destroying endeavour you might ever lead yourself onto do). Anyway, onward with the understanding.

Thursday, September 27, 2012

Responsive images: what's the problem and how do we fix it?

Responsive images

Responsive images is a surprisingly complicated topic, and one that's been steadily gaining attention over the last year as more developers discover they need them and then discover there's no good solution yet. This article aims to give an overview of the problem itself and show the different proposals in the works to address it.

Thursday, September 27, 2012

Why aren’t you using SVG?

Why aren’t you using SVG?
SVG, or Scalable Vector Graphics, is a XML-style markup driven vector graphic rendering engine for the browser. SVG is supported in every browser, except IE < v9 and Android < v3. The same support is available for canvas (except canvas goes all the way back on Android), so the question often surfaces: which one should you use?

Today, we will survey SVG and explain why the question of "which one should I use?" is usually answered by "what am I trying to do?". To get a full list of elements that make up SVG, check out Mozilla's docs on the subject. You can see the SVG DOM API there as well.

Thursday, September 27, 2012

Create a CSS flipping animation

Create a CSS flipping animation

CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible.

Thursday, September 27, 2012

7 HTML5 features that you may not know about

7 HTML5 features that you may not know about

HTML5 has been a hot topic recently. Although its been around for a while now, I still find myself coming across features that I didn't know about. Here's a few that I thought I'd share with you.

Wednesday, September 26, 2012

Slide down box menu with JQuery and CSS3

Slide down box menu with JQuery and CSS3

In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left...

Wednesday, September 26, 2012

Blur menu with CSS3 transitions

Blur menu with CSS3 transitions

There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we'll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.

Wednesday, September 26, 2012

Create a slick menu using CSS3

Create a slick menu using CSS3

In this article I am trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).

Wednesday, September 26, 2012

Advanced CSS menu trick

Advanced CSS menu trick

CSS really opens the doors to a lot of powerful and rich opportunities. It is funny how such minor things can create a whole new look, feel, and effect of a site. The beauty of CSS really is that it gives you power, but not too much power. It is not a tool like flash that really invites you to run away and take things too far.

Wednesday, September 26, 2012

Advanced CSS menu

Advanced CSS menu

This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let's take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.

Wednesday, September 26, 2012

Magazine-like layout for the web with CSS regions and exclusions

Magazine-like layout for the web with CSS regions and exclusions

The web is an extremely powerful platform for text, an area where Adobe has a great deal of experience and expertise. When Adobe was looking for ways to help move the web forward, therefore, advancing the web's text capabilities even further seemed like an obvious place for us to start. The web generally assumes a single column, vertical orientation for text. Although it's possible to flow text around graphics, and even to format text into multiple columns with CSS, it's still very difficult to achieve true magazine-like layout on the web. With CSS Regions and CSS Exclusions, Adobe is spearheading the effort to bring the power of desktop publishing to modern browsers. For instance, in the screenshot below, CSS Exclusions is being used to flow text along the contour of the mountain:

Wednesday, September 26, 2012

Create an advanced CSS menu using the hover and position properties

CSS menu

Starting with a photoshop file and finishing with semantic HTML and CSS, we'll be creating an advanced CSS navigation menu using its :hover and position properties.

Friday, September 21, 2012

Timed notifications with CSS animations

notifications

A quick tip on how to create some simple timed notifications with CSS animations. The idea is to show a notification with a progress bar for a specific duration and then make it disappear.

Friday, September 21, 2012

Nifty hover effects with CSS3 animations

hover effects

The idea was to create two different kinds of animations for both hover over and over out with just CSS3. The over out animation shouldn't be the reverse version of animation for hover over.

Friday, September 21, 2012

Fullscreen slit slider with JQuery and CSS3

Fullscreen slit slider

A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions.

Friday, September 21, 2012

Animating CSS3 image filters

Animating CSS3 image filters

In recent articles I've shown how to create cross-browser image filter effects with CSS and SVG: converting color photographs to black and white and sepia-tone, as well as blurring them. The next obvious step is to animate these effects.

Monday, September 17, 2012

Thumbnail Proximity Effect with JQuery and CSS3

Thumbnail Proximity Effect with JQuery and CSS3

Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.

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.