Jay Robinson

Tag: css

  • WebKitBits: Kevin Decker built a border-image-generating web app for CSS3 Border Images. Read about it then check it out. Border-image currently works in Mozilla and WebKit browsers.

  • Jay Robinson, contributing to WebKitBits: The brilliant Paul Irish built a CSS3 rule generating web app that he calls, “CSS3, Please!” Using automated vendor specific code, you can make box-shadow, gradient, rgba, even rotate, work in IE, Mozilla and WebKit. The great news is that this is merely version 1.0. Read his write-up on PaulIrish.com.

  • Sass 3 Beta Released

    Sass 3 Beta ReleasedDavid Kaneda: If you’re a web developer and haven’t given Sass a try yet, get into it ASAP. It a Ruby gem that abstracts CSS — it empowers the CSS with functions and variables, saves a ton of development time, and even makes it easier to be more consistent with your designs. Here’s…

  • Why Stylesheet Abstraction Matters

    Why Stylesheet Abstraction Matters “I’ve seen a number of comments on blogs and twitter that amount to ‘You don’t need a new stylesheet syntax, CSS is simple and you’re a moron if you can’t do it.’ I agree, CSS is simple. You assign style primitives to elements and some of those primitives cascade down to…

  • CSS is Aspect-Oriented Programming

    CSS is Aspect-Oriented Programming A group of CSS rules is essentially a function. (They even use the same curly-brace and semicolon syntax.) … form h1 { font-size: 15px; color: blue; } Suddenly, all h1 tags inside forms have this behavior, even though none of them reference this “function”. Aspect-oriented programming is the most misunderstood programming…

  • 2 Second Usability Upgrade For Any Site

    Go to CSS file, add :focus to anything that has :hover.

  • esquareda: Could this be the end of Internet Exploder!? Nah… probably not. Internet Explorer 9: Platform Demos IE9 Preview has proper border-radius implementation but fake their CSS animations using JavaScript. Native WebKit CSS animation looks as good as their fakey JavaScript eye-candy.

  • Some Bookmarks I’ve Kept Lately

    Landscape Lifescape is a beautiful tumblelog showcasing some of the most picturesque places on Earth. Like any displaced haole I’ve been missing the ’aina terribly. At least it’s reassuring that Kona Brewing Co. is switching to solar energy. I dig the Longboard Ale. People continue to push the limits of what can be done with…

  • If you’re going to use advanced CSS3 properties, it only makes sense to use them correctly: write them alphabetically and write as if they’ll be adopted.

  • This virtual party flier, an invitation for an event at SXSW 2010, should keep your Firebug finger busy for a while. The word-art effect, the buildings, the trees, are done entirely in CSS. The only images are avatars and sponsor logos at the bottom. @Font-face fonts provided by Typekit.

  • David Desandro, designer extraordinaire, has recreated the Opera logo in pure CSS. Beautiful use of CSS3 border-radius and gradients. Works in the big three browsers: Firefox 3.6, Safari 4, or Chrome 5.

  • Speaking of one-stop CSS web apps, Jacob Bijani created his own for generating border-radius rules. Using border-radius can get tricky if all four corners are not the same, as Mozilla is the only browser that breaks the recommended spec. Find this helpful tool at one of four domains: http://border-radius.com/, http://borderradius.com/, http://css-border-radius.com/ or http://cssborderradius.com/.

  • Primer is a useful web app that allows you to paste in HTML and get the appropriate CSS selectors. My workflow looks like this: Design in PhotoShop. Write semantic HTML. Copy and paste HTML into Primer. Get CSS selectors and begin styling. Check out PrimerCSS.com.

  • David Kaneda: Neven Mrgan: The Panic Status Board – one of the things I’ve been working on lately. Read Cabel’s writeup! This is a thing of pure beauty. We’re already seeing how we can do something similar at Ext. Neven has a nack for making beautiful things that inspire/make me want to lick them.

  • border: 1px solid Gainsboro; WOW… That’s hardcore.