boy, do clients like their corners to be rounded. luckily css3 makes it possible without images, but its not much fun to type due to mozilla/webkit’s syntax deviation. jacob bijani’s cool tool makes it easy to generate this code for copying.
The
Palm
Civet
Posts tagged css
not particularly useful to a command line junkie like myself, but this is a beautiful interface that will hopefully introduce boatloads more to the wonder world of less css.
with both articles in the latest edition of a list apart concerning web typogrpahy and the recent release of much-hyped typekit, the smell of new type freedom is in the air.
unfortunately, @font-face support is still fragmented by different syntax and file formats across the browsers. tim brown has an excellent post on how to properly hit all your bases, but doing such requires 4 different font formats. conveniently, he links to font squirrel’s @font-face kit generator, a handy tool for transcribing a .ttf or .otf font into .eot, .svg, and .woff versions.
a quick tip to negate safari in snow leopard’s sub pixel rendering with css =>
body { -webkit-text-stroke:1px transparent; }
@media only screen and (max-device-width:480px)
{body{-webkit-text-stroke:0 black;}}
{via}
creating css sprites is a useful and common performance-enhancing front-end development trick. instead of making a handful of http requests for dinky images, just make a call for one image and position the background accordingly with css. creating sprite sheets and the css by hand is about the most tedious and unfun thing ever though.
spriteme is a time and hair saving javascript bookmarklet that will read all the images in the css of the page you are currently viewing and automatically combine them into sprite images and css.
a new typography-focused css grid framework. the most noteworthy feature is the use of a ‘real’ baseline grid, so multi-column layouts of differently sized elements maintain the same baseline. bonus points for supporting html5 elements.
modernizer is a small javascript library that helps you take advantage of css3 and html5, while providing a back door for easily supporting older browsers.
steve souders has a good article that is pretty much a recap of his informative talk at this year’s sxsw. the moral of the story is that you should use <link /> instead of <style>@import</style> if you want multiple stylesheets to be downloaded in parallel.
css cell snippet
this is my current favorite css snippet, taken from teddy zetterlund’s simple css grid =>
.cell { display: -moz-inline-stack; display: inline-block;
vertical-align: top; *display: inline; *zoom: 1; }
{ display: inline-block } is really useful, but not supported across all of today’s browsers. the inline-block property gives you the ability to stack a bunch of elements in an inline fashion with the space-awareness of blocked elements, much like using { float: left } on a bunch of blocked elements, without worrying about the messiness of clearing your floats. it’s the perfect base for a grid layout or a gallery of thumbnails or a navigation menu.
this snippet allows you to treat any element like an inline-block, using -moz-inline-stack for firefox 2 and the *display: inline hack for ie 7 and below.
yes please. a collection of articles from google on how to optimize your site for faster performance.
{via}
compiling and sharing code, ideas, and tools for making better websites and applications.
by justin talbott {email me}