Simian Design

Tony Stephens in his corner of the web.
minimize

Posts Tagged ‘CSS’

Elsewhere for July 8th

Posted in elsewhere on July 8th, 2009 by Tony – Be the first to comment

These are my delicious links for July 8th:

  • SlickMap CSS – SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

Elsewhere for April 15th

Posted in elsewhere on April 17th, 2009 by Tony – Be the first to comment

These are my delicious links for April 15th:

  • ToneMatrix – Wow is this mindless fun. Just a looping tone generator, yet so addictive. Nicely done.
  • Elliott Kember, in Pulp Browsers. – "What" ain't no rendering engine I ever heard of!
    They support CSS3 in "What"?!

Elsewhere for April 9th

Posted in elsewhere on April 11th, 2009 by Tony – Be the first to comment

These are my delicious links for April 9th:

  • Don't use @import. – Wow. I had no idea. Steve (who knows what he is talking about) talks about how using @import is actually slower and worse for the browsers than link elements.
  • Bob Ross, The Joy of Painting – There is a channel dedicated to Bob Ross. I LOVE me some Bob Ross. I wish they showed more of him on TV.
  • Tampa Bay Mug Shots: Index – This is a great site. It's well designed, clear with a complex reporting system that works for you. Sort by gender, height, age, weight. It's endless fun. Well-done.

Elsewhere for January 27th through January 28th

Posted in elsewhere on January 29th, 2009 by Tony – Be the first to comment

These are my delicious links for January 27th through January 28th:

  • CSS Font Stacks – A compiled a list of font stacks that will both open up more font possibilities for web designers, and hopefully offer more appropriate substitutes. Defintely not the Dreamweaver defaults you see all over the place. This is a good list.
  • [ws] Color Scheme Designer – This is great, easily find out your mono, complement, triad, tetrad, analogic and accented analogic color schemes.
  • Fluid 960 Grid System | 16-column Grid – A good demo page showing a fluid 16 column grid, in conjuction with mooTools.
  • The Milky Way Over Mauna Kea – Stunning photo. I remember as a kid being able to see the Milky Way back at my grandfathers house back in the woods. I wish the light pollution today wasn't so bad, and that this was a more common sight.

Elsewhere for January 19th through January 20th

Posted in elsewhere on January 21st, 2009 by Tony – Be the first to comment

These are my delicious links for January 19th through January 20th:

  • How to Design the Perfect List – Lists are a beautiful way to display content and information in a very easy to scan, easy to read method. Lists are found on most blogs to list posts, comments, tags, or links. In this post we will be exploring the modern practices of lists as an element of web design and they will be showing you how to design better lists to add to the overall design of your site.
  • Slave reunion photo from 1916 – Wow. This is a photo from 1916 of 4 former slaves. They're all over 100 years old. James Madison was president when they were born, and America was 36 years old. And here they are in a relatively "modern" photo. I'm blown away.
  • Harry Eng – Master Bottle Filler – One evening Harry was in a London hotel and decided to visit the Puzzle Museum the next morning. When he and his friends had finished their bottle of wine, he took the bottle up to his room. He then filled it with a book of matches, menu, and the pack of cards as a gift for us. This is a particular favorite as he assured us that the only tools he had were a pencil and rubber bands.
  • The Sexy Curls jQuery Plugin by Elliott Kember – You know that page-curl effect you get sometimes on sites? This is how to do it with jQuery. Not bad.
  • Coaches view of Madison Square Garden – Rangers Coach Tom Renney describes the view form behind the bench at Madison Square Garden.
  • Stainless steel teeth – John Gilpin makes himself some stainless steel teeth. Quite amazing.

Elsewhere for January 13th through January 14th

Posted in elsewhere on January 15th, 2009 by Tony – Be the first to comment

These are my delicious links for January 13th through January 14th:

  • Movie Poster Remakes. – Olly has decided to create a series of movie posters reinterperated in a kinda minimalistic post modern German-ism style. Six posters (The Dark Knight, Die Hard, Deer Hunter, Rain Man, The Great Dictator, and American History X) are listed here. The Deer Hunter and Die Hard are probably the best in my opinion.
  • Fancy Aquarium setups. – Not so much fancy in terms of glass shape, but fancy in terms of what's inside. Brilliant lighting and growth make for stunning underwater landscapes.
  • Select Cuts Off Options In IE (Fix) – If you set a static width on the <select> element, any <option> elements that are wider get cut of in IE 7 and below. There is no good CSS solution for this that I can come up with or find. It has been tackled with JavaScript a number of ways.
  • iPhone Wallpaper. – Extraverage has a nice collection of iPhone wallpapers. Worth checking out.
  • Facebox 1.2 – Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. You'll need a loading image, close label, four corners, and solid border images in addition to the javascript and css files

CSS font-weight, and how it’s lack of support.

Posted in Browsers, CSS on January 13th, 2009 by Tony – Be the first to comment

Richard Rudder has written a great article on how Font-weight is still broken in all but one browser.  It’s something that I myself have never really bothered with much, as it hasn’t seemed to work, and so I’ve stuck to the tried and true ‘font-weight: bold’ and ‘font-weight: normal’.  If I wanted a heavier font, I specified a heavier font in the ‘font-family’, or ‘font’ declaration.

Since its inception in 1996, CSS has provided a way of displaying these other weights through use a numerical scale with the font-weight property. This is still almost entirely broken in every current browser except Firefox 3 on Mac.

Wow.  It’s always been there.

As well as the normal and bold keywords, font-weight also takes nine numerical values of 100, 200, through to 900. These numbers span the scale from ultra-light to ultra-black, with normal defined as 400 and bold defined as 700. So to specify a ‘light’ weight you would write font-weight :300. Here’s a rough guide matching the numeric scale to common weight terms:

100 ultra-light, extra-light
200 light, thin
300 book
400 regular, normal
500 medium
600 semibold, demibold
700 bold
800 heavy, black, extra-bold
900 ultra-black, extra-black, fat

It’s a great article, with great examples. And it’s a crying shame this doesn’t work in more browsers.  There are workarounds he talks about, but just don’t seem worth it.    Thankfully Webkit seems to be working on this issue.

Frankly it’s really depressing that this bug is still present after 12 years, and regardless of success or otherwise in Acid tests, these browsers cannot truly say they support even CSS 1 fully or correctly. I hope we see fixes soon (apparantly already done in WebKit). I know fonts are a tricky subject in operating systems, but if it can be done in Firefox 3/Mac then surely other browsers can quickly follow.

Elsewhere for December 31st

Posted in elsewhere on December 31st, 2008 by Tony – Be the first to comment

These are my delicious links for December 31st:

  • 20 Good CSS Tutorials – There are some advanced tutorials in here, and some good tips and examples. Fuzzy shadows to rounded corners, to sliding doors navigation… all good stuff.
  • The Top 100 Photography Blogs – Photography Colleges – A nice collection of links for various photography topics. How-tos, reviews, genre-shots, general photo blogs, etc. It's all photos, all the time.
  • Creating our own, tiny, man-made star. What can go wrong? – The result should be an explosion in the 32ft-wide reaction chamber which will produce at least 10 times the amount of energy used to create it.

    "We are creating the conditions that exist inside the sun," said Ed Moses, director of the facility. "It is like tapping into the real solar energy as fusion is the source of all energy in the world. It is really exciting physics, but beyond that there are huge social, economic and global problems that it can help to solve."

Elsewhere for December 23rd

Posted in elsewhere on December 25th, 2008 by Tony – Be the first to comment

These are my delicious links for December 23rd:

  • 5 Amazing Blue Holes [pics] – These are gorgeous. I'd go diving in them, no problem. But it'd be more of the straight-down and up affair. I don't like a rock ceiling above my head when diving, so I'd avoid venturing out much.

    Gorgeous shots though.

  • A Closer Look At the Blueprint CSS Framework – NETTUTS – I don't use Blueprint, nor do I think I fully support these types of frameworks. I think there is a lot of overhead.

    What I do like a great deal is the move towards a standard grid-based layout. What I want is just some standard numbers (960, 12, etc) and some options to implement it.

    But this is a good starting point for those learning about grids.

Elsewhere for December 7th

Posted in elsewhere on December 7th, 2008 by Tony – Be the first to comment

These are my delicious links for December 7th: