Posts filed under ‘Web Development’

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 tricks (like How to toggle the light on your website? or Simple website design using CSS). CSS 2 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 … 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

Simple website design using CSS

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 basics 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 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 structure 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 7 comments


Calendar

August 2017
M T W T F S S
« Feb    
 123456
78910111213
14151617181920
21222324252627
28293031  

Posts by Month

Posts by Category