Home > BlogTech, Computers and the Internet > Fun with CSS (Safari-centric)

Fun with CSS (Safari-centric)

September 12th, 2009

Apple is developing a rather involved set of CSS attributes which allow for some pretty nifty effects on web pages with pretty minimal coding. One that I found out about a while ago was rounded corners for table borders (Firefox has its own version of this, as it has for many of the effects; I do not know nor care what IE8 has).

But recently, a lot more has been added, including some pretty nice animation effects. You have to be using Safari to see them, but they’re pretty nifty. Chrome recognizes them as well (at least on the Mac), though the animation is less smooth on that browser. The ones I’ve been playing with allow for slow movement along a path, spinning, and fading in and out–as well as combinations of any of those. You can even define how they work–if they start or end fast or slow and stuff like that.

To see what I’m talking about, go to my home page and hover the cursor over the table headings, as well as the “Bb” (“Blackboard”) logo on the right. And for a little bonus, see if you can find the tiny little speck between the 2nd and 3rd table columns–just to the left of the Doonesbury link. If you can manage to hover the cursor over that, you’ll see a little homage to a 60’s TV show.

It seems like there is a bunch of these new effects lurking like Easter eggs, waiting for you to stumble over them; sometime I’ll have to see about finding a master list of these somewhere, I’m sure such a thing must exist.

Among the new CSS facts I learned: one can identify more than one CSS class within the quotes after a single style attribute–just separate them with spaces.

If you know CSS basics and want to learn these, then visit here and here.

Categories: BlogTech, Computers and the Internet Tags: by
Comments are closed.