24 ways: Flashless Animation http://24ways.org/201206
December 2012
RT @sgalineau: I had never heard of the 'all' CSS property until today http://dev.w3.org/csswg/css3-cascade/#all
RT @twholman: Oooh! amazingly sexy #javascript chess - http://codepen.io/juliangarnier/full/BsIih - by @JulianGarnier
November 2012
exploring the differences between android v2.3.7 and v4.1.1. glad to now play around with a mobile browser that supports 3d css transforms
RT @smashingmag: "IDs have their place in CSS as well." — In Defense of Descendant Selectors and ID Elements by @zeldman: http://www.zeldman.com/2012/11/21/in-defense-of-descendant-selectors-a nd-id-elements/
RT @csswizardry: New blog post: Code smells in CSS: http://bit.ly/URRXQd cc. @chriscoyier
October 2012
RT @cubiq: once we recreated all possible objects with CSS can we start using SVG?
RT @paul_irish: Cool: recent StackOverflow question http://stackoverflow.com/q/12592473/89484 led to someone make a CSS Diff DevTools extension http://stackoverflow.com/q/12592473/89484
September 2012
my previous css-only animation (iris - http://milov.nl/e/123 ) is featured on the home page of @CodePen, neato: http://codepen.io/
css fire flower on codepen: http://codepen.io/vmilo/pen/vioHE (alternate version revealing the element/shadow structure: http://codepen.io/vmilo/full/huDKn )
my phone can't show char ✽ (HEAVY TEARDROP-SPOKED ASTERISK), so fire flower becomes fire squares http://milov.nl/e/124 http://twitter.com/milo/status/249926131267026944/photo/1
made another css-only animation, 124 - fire flower: http://milov.nl/e/124
July 2012
fixed 123 http://milov.nl/e/123 counter-rotation on ipad by replacing (unsupported?) animation-direction:reverse with separate animation rule
123 (css animation) - combined my old fave, border-style dashed, w/ border-radius 50%. Only works in Chrome, it seems: http://milov.nl/e/123
hover effects in my css-only anim 120 http://milov.nl/e/120 now also triggered on ipad touch events, thanks to replacing div's with a's
June 2012
3D Thumbnail Hover Effects http://tympanus.net/Tutorials/3DHoverEffects/ via http://html5weekly.com/archive/42.html
RT @attasi: I built a CSS 3D lighting engine. It's called Photon. What do think? http://photon.attasi.com/
RT @keithclarkcouk: Just to see what it would look like: A 3D logo with lighting using webkit CSS masks, gradients and 3D transforms: http://jsfiddle.net/keithclark/xhFZQ/8/embedded/result/
RT @twholman: The new twitter logo with #css - http://labs.upperdog.se/twitter-logo-in-css/ - Don't forget to mouse-over!
fun with Chrome css filter: javascript:void(deg=0,setInterval(function(){document.body.style.WebkitFilter='hue-rotate('+(++deg)+'deg)'},55))
May 2012
RT @jordanmoore: Source shuffling - serving the right image for the right device using @adactio's Conditional CSS - http://www.jordanm.co.uk/post/22964442013/source-shuffling-responsive- images-based-on-media #rwd
April 2012
Responsive CSS3 Slider Without Javascript http://csscience.com/responsiveslidercss3/ by @teapoted
RT @NickSherman: The Neue Haas Grotesk site is an experiment in SVG type specimens. Zoomable, prints at high res, defaults to GIFs in IE http://www.fontbureau.com/NHG/specimens/
RT @chriscoyier: Mario animation (via rapid media query changes) by @btraut http://btraut.com/labs/mediamario/
March 2012
120
a css-only (no js) mouseover animation using :hover, border-radius, transform and transition properties: http://milov.nl/e/120
October 2011
RT @LeaVerou: Quick #usability tip: Make disabled controls more obviously disabled with :disabled { cursor: not-allowed; }
July 2011
RT @chrisblizzard: CSS is aweso http://flic.kr/p/9WjZJ4
December 2009
June 2006
November 2005
September 2005
June 2005
new feeds view
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!.
May 2005
February 2005
January 2005
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.
November 2004
October 2004
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.
September 2004
July 2004
fixed width font in Gmail
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.)
June 2004
colour subdomains updated
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
May 2004
using :visited and expression() to detect any visited link
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...
January 2004
integrating javascript into stylesheets
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]
October 2003
the house that css built
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.
September 2003
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]
July 2003
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!]
May 2003
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]
December 2002
KLEUREN
November 2002
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...
October 2002
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.
August 2002
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');
}
July 2002
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.)
March 2002
To the person Googling for "removing line break after h1", try adding h1{margin-bottom:0px} or h1{display:inline} to your stylesheet.
January 2002
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).
December 2001
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;
November 2001
The CSS equivalent of <nobr> is white-space: nowrap;
[via Wouterd]
October 2001
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);
August 2001
A List Apart has more CSS goodness today. [via Low]
July 2001
'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.
June 2001
CSS pixel talk at lgf [via Zeldman]