RT @chrisblizzard: CSS is aweso http://flic.kr/p/9WjZJ4
milov.nl
Interaction design • webdevelopment • web art • photography
Interaction design • webdevelopment • web art • photography
RT @chrisblizzard: CSS is aweso http://flic.kr/p/9WjZJ4
milov.nl/feeds/
I'm having a lot of fun styling my new simple and lean blo.gs-powered feeds view. Check it out in a browser that supports modern CSS (i.e. not IE) and observe li:hover, ::after and content: attr(href) in action...
Update:
Well, it seems blo.gs is offline for a bit after being sold to some unknown party, so the feeds view might not get updated for quite some time. Anybody know any other good centralized weblog update trackers? I tried BlogRolling for a while but it only seemed to indicate one new updated weblog per day.
Update 2:
blo.gs is back, yay! Turns out it's been acquired by Yahoo!.
css Zen Garden, 1996 Geocities style [via]
How to display <ul> elements as a flat comma-separated list (now in effect in the main menu and links list in the left-hand column):
ul.links { list-style: none; margin: 0; padding: 0; }
ul.links li { display: inline; }
ul.links li:after { content: ","; }
ul.links li:last-child:after { content: ""; }The advantage of this is that changing the default separator from a comma to | or - or whatever now means only having to change one character in the stylesheet.
Note: Internet Explorer doesn't support the css content attribute or :after and :last-child pseudo-classes, so the commas won't appear in IE.
Negative(!) text-indent is in effect in the quicklinks list (over there on the left of the front page). Handy... applying a style like padding-left: 10px; text-indent: -10px; to an element makes all lines of that element appear indented except the first one.
Does Gmail have a setting somewhere to make message text appear in a fixed width font? 'Cause if it does, I sure can't find it...
To force it to use a fixed width font anyway, I added the following to userContent.css in my Firefox profile:
div.msg div.mb {
font-family: monospace !important;
font-size: 12px !important;
}
(Firefox's 'View Selection Source' came in real handy trying to figure out these classnames; regular View Source is a pain on Gmail because the whole thing's Javascript-generated.)
Rather than appearing as blank pages of a single colour, the colour subdomains now have an info footer showing calculated dec/hex/percentage values, as well as a row of lighter/darker variations.
test: purple, 144.200.180, cc9966, f0f, activecaption
There's been some talk (see Anne, CollyLogic) about it being possible to use the :visited pseudo-class and background-image urls to detect if a user has visited a particular link.
Luckily for Internet Explorer users, they are unaffected because IE doesn't support the [href=] selector. Unfortunately, there's another method that does work in IE and is even more dangerous...
Ben Nolan's non-link element hovering trick for Internet Explorer (that normally only allows :hover styles on links) is pretty handy, but what really impressed me about it is his way of integrating arbitrary Javascript functions into the stylesheet itself:
body {
background: url("
javascript:
document.body.onload = function(){
...custom js here...
}
");
}By specifying a rule like this in the browser's user stylesheet, it might even be possible to run a custom set of Javascript commands on opening of any visited website. (Although my brief attempt at making this work proved unsuccessful.) [via webgraphics]
3D Border Demo 2 - LEGOish drawing of a house, built entirely using css borders. Impressive! Made by Design Detector. [via DeWalick.com]
Speaking of stylish <ul> listings, check out IF THEN ELSE (who also caught the redesign bug this week)'s take on it; scroll down a bit and hover over the leftside menus. By already showing a tiny border in the default link state, and increasing the border size on hover, it looks like LEDs lighting up. Pretty colours!
Update: check out his newly added HOW-TO.
svendtofte.com - max-width in Internet Explorer - using the IE expression() syntax to simulate the css max-width property, which works in Mozilla/Opera but not in IE.
Listamatic - css examples for styling basic <ul> lists. I like this trick where a fat border-left is used to create a neat hover effect. [via kottke.org]
Creating slanted edges with CSS borders - neato; there's even an animated example of a vector-like pattern: by overlaying the "slant" with a slightly offset slant of similar size but coloured like the background, it's possible to create lines of any angle or length in regular DHTML -- without having to resort to IE-only VML code. [via Arthur is verweg!]
Captain Cursor and His Cursor Styles - from this Webmonkey article dated 23 Sep 1997.
Simon Willison has been posting a couple of interesting CSS tutorials lately. [via web-graphics.com]
KLEUREN
Wow, I just came across a <font>-tag in a script of my own from december 2000. Possibly the last time I ever used one...
Hmm... My adding of body{overflow:hidden;} to the stylesheet of various dhtml animations of late is causing Phoenix (and probably any Gecko-based browser) to display a blank page... Removing the overflow-property makes them work again.
Could it be this trick of hiding the scrollbars has the nasty effect of altering the width/height of the body- or html-object, thereby messing up my dhtml item placement routines?
Update:
Aha, adding height:2000px; (or another pixelvalue that's sure to be higher than the window height) to the body{...} style seems to fix things. Still, weird; I don't remember having to do this in earlier Mozilla versions.
Idea: faking css attribute selectors in Internet Explorer by using IE's special Javascript expression() properties
Example: setting the background of all <input>-tags to yellow, but only if they're of type 'text':
/* standards-compliant; works in Mozilla */
input[type="text"]
{
background-color:yellow;
}
/* alternative for Internet Explorer */
input
{
background-color:expression(
this.type=='text' ? 'yellow' : 'transparent');
}
One example and another example of positioning custom top/right/bottom/left corners with css. [via Simon Willison]
Apparently, IE5.0 Mac doesn't support multiple classnames if you start the param with whitespace, like so:
<div class=" class1 class2">
(discovered after forgetting to trim some php-vars.)
To the person Googling for "removing line break after h1", try adding h1{margin-bottom:0px} or h1{display:inline} to your stylesheet.
If your site has a white background, please also indicate so in your stylesheet. Don't assume people have their default browser background set to white (mine's #C0C0C0 - making plenty of pages look unintentionally gray).
I actually sorta like the Flash of Unstyled Content (= the delay before a linked stylesheet is applied to a loading page). It can be very satisfying to see a page 'jump' from unstyled oldskool plaintext to pretty modern design. [via Weblog Wannabe and others]
overflow-y:scroll;
The CSS equivalent of <nobr> is white-space: nowrap;
[via Wouterd]
Couldn't get this to work in Mac IE5:
clip:rect(0 100 100 0);
Turns out I had to use 'px' unit indicators:
clip:rect(0px 100px 100px 0px);
A List Apart has more CSS goodness today. [via Low]
'height: 100%' discussion at geocrawler.com.
[via massless]
view-source:http://milov.nl/tmpl_play.css for a little ascii-art. Stylesheets can get a bit overcomplicated; for optimum maintainability, I divided this one into three sections: layout, type and colour. Also tried using indentation to enhance readability.
CSS pixel talk at lgf [via Zeldman]