Cross browser gradients with CSS3 and SVG

svg-w3c-v.pngSince I’m currently taking a course on SVG (Scalable Vector Graphics) with the W3C I thought of a very simple yet cool application for it: gradients.

Most of you certainly know how to visually enhance your web apps, using proprietary CSS gradient properties in Webkit or Gecko based browsers (like Firefox, Chrome or Safari). But CSS gradients aren’t (yet) available to IE or Opera. From this perspective CSS gradients can only be used for progressive enhancements on a small subset of browsers (at least on the desktop, most mobile browsers are Webkit based) and you must be careful with browsers that won’t display them. However Opera has the best support for SVG and Microsoft is committed to SVG with IE9. So bang! Now SVG can complement CSS3 to widen your audience for cool stuff without the need for graphics or images.

Note that this post won’t go into the details of gradients (I’ll point to various resources at the end of the article) but will simply walk you through cross browser gradients implementation using both CSS3 and SVG. So let’s dot it. (more…)

February 3, 2011 at 8:19 pm 4 comments

Super sleek CSS3 only sliding menu tutorial

Sliding menuI’ve already shared with you some CSS 2.1 tricks (like How to toggle the light on your website? or Simple website design using CSS 2.1). CSS 2.1 is certainly on a need to know basis before you should even think about adding some nice CSS3 stuff to your site. Anyway I believe that today is a good day to start spicing things up with a pure CSS3 sliding menu I’ve created for my website … hot hot hot.

(more…)

July 13, 2010 at 4:37 pm 4 comments

Minify your CSS files, speed and other SEO wizardry

Speedometer
Ouch! It’s been quite a long time since my last post due to the birth of my baby girl on April the 30th. It has kept me quite occupied lately. Now that she begins to sleep at night let’s go back to some web development thoughts sharing :-).

Creating a web site is actually very easy. There are a lot of automated tools and free blogs out there to help you do the job in no time. However if you want to go serious about it this is a whole other story. Here comes the questions about good practices, W3C standards, Search Engine Optimization (SEO), efficiency and speed among other subjects.

Today I’m going to focus on speed and more specifically on how you can reduce the size of you CSS files. This process is often called minification and even though it applies both to CSS and javascript, I’ll only focus on how to minify CSS files for now.

(more…)

June 30, 2010 at 4:32 pm 1 comment

Book review: “Windows 7: the missing manual” by David Pogue

Windows 7 the missing manualI regularly read David Pogue’s tech columns in the New York Times and even had a chance to exchange a few mails with him. However I had never read any book from the missing manual series that David created. It’s now a done thing with “Windows 7: the missing manual”.

What stroked me first was the casual tone of the writing. I’ve rarely seen a book about computers that is so easy to read. It actually feels like you’re having a conversation rather than concentrating on reading a technical book. What I liked a lot then were the very factual explanations. David clearly tells what is great about the system but he doesn’t hesitate to mention the things that could be better. In the end it feels he’s telling the truth and it makes the book even more interesting.

(more…)

April 23, 2010 at 3:29 pm 1 comment

Simple website design using CSS 2.1

ArchitectToday I’d like to address a very simple question: how to rapidly design a website?

The underlying topic we will actually cover concerns the basis of box positioning and floating using CSS 2.1. For those of you who hear a lot about CSS 3, all I can say is that it gives a lot of power to web designers with regards to a website UI and look & feel, but that the CSS 2 box model still rules. It’s important to understand it well.

Again first things first. We need to start with a bit of thinking to actually determine what our website will look like and how it’ll be organized. What I propose that we build together is quite simple: a header, a vertical navigation bar, a main section for the content and a footer at the bottom. In order to structure the website, we’ll use the div element as a generic container for our different sections. divs can be nested, thus once our basic website flow is drafted it’s easy to add as many other boxes as we want (i.e. widgets, content, …) inside our main containers.

(more…)

April 14, 2010 at 8:05 pm Leave a comment

How to toggle the light on your website?

Light switch buttonToday I’d like to show you a way to switch the light off on your website.

What’s the point? Simple … Imagine you’d like to display photos, or a video, or if a box should pop up (for authentication purposes for instance), it’s better if your visitors focus on what you’re trying to draw their attention to. We will help them concentrate by darkening everything else in the background.

In order to do just that we will mainly use some CSS and a bit of javascript to toogle the light on/off.

(more…)

April 13, 2010 at 8:34 pm 8 comments

Hello world!

Hi there.

I’ve been hesitating to create a blog on a variety of subjects for quite some time now but then here it is finally. I’ll primarily focus on some topics of interest to me among which:

  • web design and development,
  • photography.

I’d like this blog to be some kind of a cookbook and share recipes and thoughts with the community, so don’t hesitate to comment on the posts and add your own “home made sauce” to the meal ;-).

Cheers.

April 12, 2010 at 11:29 am Leave a comment


Categories

  • Blogroll

  • Feeds


    Follow

    Get every new post delivered to your Inbox.