Tag: CSS

CSS Grid Builder is a neat tool for Web designers (from ZURB, the company behind Notable). So what's a CSS grid? CSS Grids are often used by Web designers to control page layout and position elements in a somewhat sensible fashion. Grid Builder lets you specify what sort of grid you would like to have and spits out just the CSS you need. The top section of the window has a simple form to fill out ...

0to255 it a very slick, well-designed tool for quickly finding color variations for borders and color gradients. You dial in a Hex color code (say, "de40d5") and instantly get a long palette with light-to-dark variations of that particular hue. Every variation has its hex color value written across it, and when you hover over it you get a small swatch showing your original color along with the ...

Ahhh, color...you can't live with it, can't live without it. At least, that often seems to be the case for me; my color vision isn't exactly perfect, and sometimes I do need to pick colors for a design. I've been known to make some very odd "matches" (well, I thought they matched very well, while others begged to differ). I then found Adobe's Kuler, which is a great tool for browsing ready-made ...

Picasa is awesome. The way that it integrates with Web Albums is very convenient, and the process of selecting your best images and uploading them to an online album is extremely polished. However, when the time comes to share this album with your friends, you might want to show them something a bit more personalized than a generic Picasa Web Albums link. If you are a professional or aspiring ...

Instant Blueprint is one of those over-the-top web2.0-looking websites. You know, gradients, lots of white space, funky looking "ribbons" from the top... the works. On paper, it provides an interesting service for web developers who have some experience: You specify a project name, document type, JS library and selectors for your project, and Instant Blueprint spits out a zip file containing a ...

When it comes to making web pages, I can whip up a rounded div or add a splash of gradient for a nice fade effect successfully with little trouble, but like many, when trying to deduce out why some stupid DIV is misbehaving, I can waste an entire day spinning my wheels. Checking out the various blogs and forums are of course a great resource, but probably my most useful and productive help ...

The Web Developer add-on for Chrome tries to complement Chrome's already-excellent developer tools (Ctrl-Shift-I) with some in-page hints and tools. The garbled output you see above is the result of selecting Information > Display ID & Class Details. Not very graceful, obviously. The add-on is missing a screen ruler (I'm sure the developer will add it later). Despite lacking a ...

If you've ever struggled with rounding corners in your cascading style sheets, you're going to enjoy Border Radius, a purpose-built utility for exactly this task. It's a very simple page that allows you to set the border radius for one or more of the corners on a box, and it dynamically updates the screen to show you what it looks like, and updates the text field in the middle with the CSS code ...

Replacing the color scheme for a site using CSS can be an annoying task. The same color may be used for several elements across the file, and you need to search and replace for it. Color is represented by hex codes, which is not very visual. This is not a problem heavyweight web developers have -- they're usually set up with advanced text editors which feature built-in color pickers. Users ...

Firebug is an insanely useful add-on, even for those of us who are not all-out web developers. I tweak HTML every now and then, and Firebug is the best tool I know for figuring how why exactly your document doesn't look right (in Firefox at least, and now in Chrome too). It lets you easily select parts of your document for viewing, and change CSS on-the-fly so you can see what's the exact CSS ...

The folks at BaseKit think that the process of website creation is due for an overhaul -- and boy do I agree! The time for writing code in an editor, creating artwork in another app and uploading it all bit-by-bit is OVER. The folks at BaseKit pose a good question: why don't we make websites online, in the browser? There are some nascent attempts, like the cheap-and-cheerful approach of Google ...

If you're not excited about the potential of updated CSS and HTML standards support in the newest WebKit browsers, you might be after you check out Snow Stack. Snow Stack is a demo of some slick visual effects using just HTML, WebKit CSS effects, and some Javascript. To see the live demo, you need to be running Snow Leopard and Safari, or Leopard and the latest nightly build of WebKit. Snow ...

Start.io is an engine for creating customized start pages, with the added bonus of letting you know when your favorite sites have updated. It comes equipped with a drag-and-droppable interface for adjusting and grouping your links, and several nice-looking preloaded layouts to choose from. On top of that, the CSS is entirely customizable, so you can modify existing layouts, or build your own ...

There are a lot of ways to come up with a color palette. You can search through collections of them on a site like Adobe Kuler, you can put them together from scratch, or you can borrow someone else's. What if you want something easy and unique? Try CSS Drive's Colors Palette Generator. It takes any image and creates a selection of palettes full of colors that are sure to work well together. When ...

It hasn't been all that long since I wrote about 10 excellent themes for my favorite Mac newsreader, NetNewsWire. In that time, though, I've discovered a new style that I think is the best yet. It's Bullitt, designed by Cameron Hunt of cameron.io. Cameron is also responsible for some of the most popular (and best-designed) Tumblr themes in the universe. The main selling points of Bullitt all have ...