Notes on a web journey

posted on: 01 June 2010

CSS3 Opera logo

filed under:css @ 14:00:03

CSS3 Opera logo

The Opera logo rendered only with CSS, no images. Very interesting.

Opera logo

tags:

posted on: 14 July 2009

CSS3

filed under:css @ 15:07:52

Two articles on CSS3:

tags:

posted on: 12 January 2009

Mobile style sheet

filed under:css @ 10:01:55

An article on A List Apart on mobile browsers and style sheets:

Return of the Mobile Style Sheet

tags:

posted on: 27 November 2008

CSS tables

filed under:css @ 11:05:22

After the article about CSS tables on Digital Web Magazine, another one on Vitamin:

Tables: The Next Evolution in CSS Layout

tags:

posted on: 25 November 2008

Link pseudo classes order

filed under:css @ 10:25:22

On 456 Berea St :

The order of link pseudo-classes matters

I rember wasting hours years ago trying to figure this one out...

tags:

posted on: 23 October 2008

Table related display property

filed under:css @ 19:23:44

A very interesting article on Digital Web Magazine :

Everything You Know About CSS Is Wrong

tags:

posted on: 21 July 2008

Layouts and fixes

filed under:css @ 09:45:51

Two CSS links:

tags:

posted on: 28 June 2008

Font stacks

filed under:css @ 09:47:28

An interesting article on the use of font-stacks:
Better CSS Font Stacks

And a guide to the most common fonts on Windows, Mac and Unix platforms:
CSS font sampler and survey

tags:

posted on: 19 June 2008

Faux absolute positioning

filed under:css @ 09:26:02

There are two popular approaches to positioning with CSS: float and absolute positioning. Both approaches have their pros and cons. My teammates and I have developed a new positioning approach that gives us the best of both worlds. After quite a bit of experimenting and testing, it's time to share the technique with the rest of the world and see how we can work together to improve it. I'm calling it faux absolute positioning after the faux columns technique that simulates the presence of a column.

Faux Absolute Positioning

tags:

posted on: 14 May 2008

CSS line height

filed under:css @ 09:21:33

Here's the punchline: the effects of declaring line-height: normal not only vary from browser to browser, which I had expected - in fact, quantifying those differences was the whole point - but they also vary from one font face to another, and can also vary within a given face.

line-height: abnormal

tags:

posted on: 12 May 2008

Border radius

filed under:css @ 09:28:02

On The Man in Blue:

Circtangles: A JavaScript art installation

For Firefox and Safari only, round corners with CSS border-radius.

tags:

posted on: 08 May 2008

Css: reset, conditional and pagination

filed under:css @ 09:02:31

On CSS :

tags:

posted on: 16 April 2008

Extensible CSS interface

filed under:css @ 09:38:31

A series on Authentic Boredom :

Introducing “The Highly Extensible CSS Interface”, a four-part series of how-to's and savvy conversation to be published in the coming weeks, with the first article debuting this week. The phrase “highly extensible” is in reference to designing and coding interfaces that are flexible enough to adapt in ways the designer or developer may not foresee when handing off coded templates, while still retaining the overall aesthetic integrity of the layout.

The Highly Extensible CSS Interface ~ The Series

tags:

posted on: 15 April 2008

Data visualization

filed under:css @ 20:40:06

An article on A List Apart:

Three techniques for incorporating data visualization into standards-based navigation patterns.

Accessible Data Visualization

tags:

posted on: 13 February 2008

Resetting CSS styles

filed under:css @ 11:10:03

I found out about it a bit late :

Resetting Again

tags:

posted on: 05 February 2008

Em based layouts

filed under:css @ 09:35:02

On James Whittaker's blog:

Em based layouts - Vertical rhythm calculator

tags:

posted on: 09 January 2008

No hacks CSS

filed under:css @ 19:48:03

Using CSS3 selectors as an alternative to hacks when targeting specific browsers. Hacks are an example of graceful degradation: you design for the most capable browser and then fix issues in legacy browsers. But what if we took the opposite approach and worked with progressive enhancement?

CSS Not([hacks])

tags:

posted on: 03 January 2008

CSS tutorials

filed under:css @ 19:42:03

Posh CSS is a collection of Cascading Style Sheet Articles, Tutorials, Tips and Code snippets for the modern day web designer.

Posh CSS found via shauninman.com

Also on Shaun Inman's site styling file inputs with css and the dom, which was posted on September 10th 2007 but I just read. Definitely worth having a reference to it.

tags:

posted on: 03 December 2007

Text size in CSS

filed under:css @ 08:40:02

An article on A List Apart:

How to Size Text in CSS

tags:

posted on: 02 October 2007

Floats 101

filed under:css @ 18:51:02

On Digital Web Magazine:

Web Design 101: Floats

tags:

posted on: 29 September 2007

CSS color overlay

filed under:css @ 10:22:04

On Mandarin Design:

CSS color overlay

tags:

posted on: 31 August 2007

Navigation using CSS

filed under:css @ 10:16:02

An article on Sitepoint:

Nifty Navigation Using CSS

tags:

posted on: 24 July 2007

Scrolling, fixed liquid hybrid layout

filed under:css @ 10:09:23

On A List Apart, how to create a scrolling, fixed/liquid hybrid layout without using JavaScript:

Conflicting Absolute Positions

tags:

posted on: 28 April 2007

Tables width

filed under:css @ 09:16:23

On 456 Berea St. :

How to prevent HTML tables from becoming too wide

tags:

posted on: 24 April 2007

Positioning

filed under:css @ 09:02:03

On Digital Web Magazine:

Web Design 101: Positioning

tags:

posted on: 08 February 2007

Multi column layouts

filed under:css @ 19:50:03

On A List Apart:

Multi-Column Layouts

tags:

posted on: 31 January 2007

CSS techniques

filed under:css @ 09:48:02

A definite bookmark:

53 CSS techniques

tags:

posted on: 14 January 2007

Styling form controls

filed under:css @ 19:27:23

On 456 Berea St. :

Styling form controls with CSS, revisited

tags:

posted on: 26 October 2006

Display property

filed under:css @ 08:28:46

An interesting article on Thinkvitamin by Molly Holzschlag:

the missing run-in value

The comments are also worth reading. The solution proposed by Jeff Croft, for example, is very nice.

tags:

posted on: 19 July 2006

Floats in detail and static/dynamic CSS

filed under:css @ 10:28:33

On Friendly Bit:

tags:

posted on: 10 July 2006

Table of content style and CSS selectors

filed under:css @ 22:02:05

On Peterned weblog: table of contents
..table of content styles with different types of counting, right aligned page numbers and dotted lines filling the gap..

On Stuffandnonsense: CSS: a tribute to selectors
more links to articles on CSS 2.1 and CSS 3 selectors by 456 Berea St.

tags:

posted on: 28 June 2006

Debugging stylesheets

filed under:css @ 18:54:21

On Airbag: a ruler to debug stylesheets.

tags:

posted on: 19 June 2006

Inline wrap IE6 bug

filed under:css @ 11:30:06

I have been trying to find the best solution to the
inline wrap IE6 bug for a year. Right now I have to write a post then see how it looks on IE and add a <br /> tag to avoid wrapping of the links with the consequent external link icon loss. The solution offered in the post above doesn't work for me because the CSS does not validate using display:inline-block. I hope this bug will be fixed in IE7..

tags:

posted on: 25 April 2006

CSS hacks

filed under:css @ 14:02:05

On Vitamin: Stop Hacking, or be Stopped

I always try to avoid any hacks adapting the layout so as to avoid the different renderings of the browsers. That put some limitations on what I could do but now it pays off since I don't have to change anything.

tags:

posted on: 27 March 2006

Floats and optimizer

filed under:css @ 19:29:45

CSS links:

tags:

posted on: 17 January 2006

CSS typography and background images

filed under:css @ 21:31:35

Typography and CSS on Digital Web Magazine

On 24 Ways css background images

tags:

posted on: 14 January 2006

CSS 2.1 and CSS 3 selectors

filed under:css @ 19:14:12

On 456 Berea Street:

tags:

posted on: 28 October 2005

CSS layout

filed under:css @ 16:41:26

CSS one layout :

Total Layout Flexibility: that is, the ability to order columns logically in the source while displaying them in any order desired. For any number of columns. Equal Height Columns: or more accurately, equal height columns without having to rely on faux columns. Vertical placement of elements across grids/columns: designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering.

tags:

posted on: 10 October 2005

CSS specificity

filed under:css @ 09:43:18

Some of the things in this article I didn't know, some I wasn't sure about: CSS specificity

tags:

posted on: 30 September 2005

CSS lists and columns

filed under:css @ 19:12:08

Some interesting articles on CSS techniques :

I use lists for the main menu of this site and, as I explain on the menu code page, I want the menu to appear as it does and the only way I know to position the links like that is to use four different unordered lists and float them .

I will read the multi-column lists article properly and see if it gives me a better solution.

Update- 2005/10/01 : I read the article and it does a different thing from what I want. Also, it is mostly an exercise in “taming” lists, as the ALA content warning specifies the article uses experimental techniques. I try to avoid excessive mark up and hacks as much as possible, sometimes I simply prefer to change the design instead of forcing it into realization.

tags:

posted on: 08 September 2005

CSS and printing

filed under:css @ 10:26:05

CSS gradients, look at the source to see how it is done. In my opinion it requires way too many divs. But this is just a demo and the idea behind it is interesting.

“The Rising Tide” a scrolling effect tutorial on WestCiv

On A List Apart : printing high-resolution images.

tags:

posted on: 07 August 2005

Sprites

filed under:css @ 15:36:16

From Dave Shea article on ALA titled:

about a CSS technique that makes use of the hover state to:

by Bryan that extends it to use the active state.

tags:

posted on: 25 July 2005

CSS cascade and inheritance

filed under:css @ 14:15:34

To fully understand the cascade and inheritance of CSS is the most important prerequisite to achive a solid presentation. It also helps to avoid using “hacks” and workarounds as much as possible:

tags:

posted on: 28 June 2005

CSS: workaround vs. hacks

filed under:css @ 19:26:19

I agree with Alessandro of web-graphics.com on the topic of CSS hacks. I don't like to use them and I always try to work around them.This is the article, I have to say that the best solution would be to have browsers that render CSS properly..

tags:

posted on: 23 May 2005

Organizing CSS

filed under:css @ 14:47:41

Web-graphics has a couple of links to articles that offer tips on organizing CSS files:

I personally divide my CSS files in groups of rules and save them for quick consultation but I publish them optimized (no whitespace, each rule in one line) to keep them light.

tags:

posted on: 17 March 2005

Clearing of floats

filed under:css @ 09:28:04

Interesting article about clearing of floats on Mezzoblue.

This is the “old” way.

tags:

CSS,Javascript and Php studies

Anti spam email
A solution to writing an anti spam email contact link
filed under: Javascript
Background image
A background image randomizer that I used in the second version of this site.
filed under: Javascript/CSS
Javascript menu
A menu that uses Javascript and session cookies.
filed under: Javascript/CSS
MiniSite
Experimenting with CSS and Javascript.A simple but, in my opinion, nice navigation “system”. The MiniSite is a one page site.
filed under: Javascript/CSS
Photo display
Protect copyrighted photos: a simple but effective solution.
filed under: Javascript/CSS
Photo gallery
A photo gallery made for a friend
filed under: Javascript
PHP menu
A PHP menu that can be updated without having to re-publish all the pages is on.
filed under: PHP
Pop-up menu
A very simple pop up menu powered by Javascript. It works also if Javascript is disabled.
filed under: Javascript/CSS
RSS feed
How to write and use an RSS feed
filed under: rss-xml
Tag replacer
The Tag replacer explained and a link to it.
filed under: PHP
Tags search
A search form build and powered using Javascript and the DOM
filed under: Javascript