Skip to Content

Free TUAW iPhone app -- try it now!
AOL Tech

CSS posts

Filed under: Design, Developer, Macintosh, Browsers

Snow Stack shows off Safari's CSS visual effects


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 Stack shows off a 3D wall of Flickr photos - if you're familiar with the Cooliris photo viewer, it looks a lot like that - and all the animation, reflection and transformation is done in CSS. If you're not on a Mac or can't run a new version of Safari, there's also a YouTube video that shows Snow Stack in action.

For developers, the source code and some useful development notes are available on the webpage, so you can check out how the demo was built.

Filed under: Design, web 2.0, Web

Start.io delivers a customizable start page engine


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 from scratch.

The first thing I wondered about Start.io was why it just lets you know that one of your links has updated, instead of using RSS to show you exactly what the updates were. The answer (explained on the about page) makes a lot of sense: you don't come to your start page when you want to read a bunch of RSS feeds. You go there when you want to click through to the sites themselves, not Google Reader or your standalone RSS app. If you want an RSS reader as your start page, there are other services you can check out, but I haven't see a complete start page engine like Start.io anywhere else.

What's your start page? Do you like Start.io, or do you have a better alternative? Let us know in the comments.

Filed under: Design, Productivity, Web services, Web

Need a color palette? Got an image? Try this generator

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 you upload your image or enter an image URL, the generator will give you three sets of seven colors each. It offers light, medium and dark palettes, so you can choose the one that's best suited to your task. If you need more to work with, it also offers a full palette, containing 49 colors. When you find something you like, you can export the results as a css stylesheet or Photoshop swatches for convenient use in your projects.

Filed under: Design, Text, Utilities, News

Bullitt: one NetNewsWire style to rule them all

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 to do with readability. Column widths are optimised for your viewing pleasure, and images up to 700px should fit comfortably into the layout. Titles are handled with a neat, elegant slab-serif, and each site's favicon is displayed in the heading. The overall look is extremely easy on the eyes; this is definitely my favorite style for reading long articles. Even more attractive, Bullitt uses css ad-blocking (as if it weren't clean enough already!)

I still endorse the 10 styles I covered before, and this sort of thing is definitely a matter of taste. If none of those really struck your fancy, though, give Bullitt a try. After using it for a few weeks, I can't imagine going back to anything else.

Filed under: Design, Developer, Internet, Utilities, Features, Windows, Macintosh, Web, Lists

So... you want to be a web developer?

Workstation I had the most interesting conversation with one of my friends the other day.

Adam: "Whew... finally finished with my latest web project!"

Friend (in awe): "Whoa! That's awesome! How did you make that?"

Now, of course, this project of mine was a full-fledged ASP.NET web application; a simple question like "how did you make that" could easily end up with me not only explaining what I did, but how I did it, and which tools and technologies I used. That way, instead of wondering about the magic that makes all those fancy programs out there on the internet work, my friend could understand exactly what goes on to make that happen.

Well, that couldn't hurt, right?

Adam: "Do you really want to know? I'm warning you... this could get messy."

Now, at this point, my friend gives me one of those funny looks like I'm completely crazy. But being a web developer, I'm already used to that.

Friend: "Well, sure..."

And so it begins.

Read more →

Filed under: Design, Developer, Macintosh

C-Mac's Favorite Mac Apps: CSSEdit

Over at TUAW, I listed Coda as one of my favorite applications, and indeed, it is a central part of my web development toolbox. When it comes to straight CSS editing, however, my favorite app is CSSEdit. CSSEdit by MacRabbit is the best CSS editor I have ever used. In fact, before CSSEdit, I was against the entire idea of a CSS editor -- isn't Notepad or TextEdit enough? Sure, but I like to save time and do things as quickly as possible, and this is where CSSEdit comes in.

My favorite feature of CSSEdit is the Live Preview and X-Ray inspector. Similar to Firebug (but with a much better interface that is less cluttered and much more accessible), CSSEdit shows changes you make to a stylesheet in real-time. There are also bookmarklets available for your browser that will open and edit the CSS stylesheet in CSSEdit with one-click. You can alternatively just load up a site and extract all stylesheets that the site uses and then manipulate them to your liking. It is a very handy way of seeing how certain stuff is done or isolating a problematic element.

For the user who is new to CSS, CSSEdit is nice because its dual visual/source code interface makes it easy to change elements of a stylesheet, like color or border type without having to know exactly what you are doing. For those of us that like to hand code everything, the automatic suggestions (based on what you frequently use) and the auto-insertion of brackets and appropriate spacing is a huge time saver.

To top it all off, CSSEdit has W3C Validation built-in. There are tons of great web development tools for the Mac, but when it comes to working with CSS, CSSEdit is my favorite, hands down!

Filed under: Video, Windows, Commercial

RealDVD sales on hold indefinitely

RealDVD
RealNetworks executivies may have thought that the company was releasing a lawsuit-proof DVD ripper when it decided to add mandatory DRM to its RealDVD application launched last month. After all, while the software lets you rip DVD movies and save the video on your hard drive, it makes it extraordinarily difficult to share the media with other users, or even to watch it on a portable device or another computer you own.

The movie studios apparently saw things differently because they filed a lawsuit last week and received a temporary injuction against RealNetworks that prevents the company from selling the software. During a hearing on Tuesday, a US district court judge made that injunction indefinite. The next hearing won't be scheduled until November 17th or later, which means that RealDVD will be unavailable for at least a month.

Honestly, I'm still not sure why anyone would pay $30 for a DVD ripper when there are so many free, (and DRM-free) options available. But the case is interesting, because RealNetworks is insisiting that by leaving the CSS encryption intact it is not violating anyone's copyrights.

If this argument is upheld in court, it could be seen as both a win and a loss for supporters of DRM. On the one hand, it would help bolster the argument that DRM prevents piracy and that utilizing DRM is a valid option for studios that want to abide by the law. On the other hand, it would mean that companies like RealNetworks can create software that uses DRM to get around exactly what the movie studios wanted to use it for in the first place - to keep people from making copies of DVDs.

Either way, it would be yet another instance of companies and courts telling users how they can and can't enjoy the media they've legally purchased. But it's not at all clear how the courts will rule on this case yet.

[via NewTeeVee]

Filed under: Video

RealNetworks launches pre-emptive lawsuit against movie studios

RealDVD
Say you're a major multimedia software company and you've just released a product that you absolutely know is going to tick off copyright holders, like say, major movie studios. You could wait around and for someone to file a lawsuit saying that your software, like say, a DVD ripper, violates their copyrights. Or you could try to resolve the issue before it gets to that point and file your own pre-emptive lawsuit. And that's exactly what RealNetworks has done.

A few weeks ago the company announced a public beta of RealDVD, an application that lets you make backups of your DVDs for viewing on a PC. Unlike free alternatives including DVD Decrypter and Handbrake, RealDVD utilizes Digital Rights Management so that you can only watch your video on a single PC. That move was likely intended to help make the software lawsuit-proof.

Today RealNetworks officially launched the commercial version of RealDVD, which costs about $50 (although there's a limited time $20 off deal, so you can pick it up for $30 today). And the company has also asked a federal court to rule that RealDVD is legal since it copies an entire DVD to a hard drive, including the CSS encryption that prevents users from making unauthorized copies. In other words, sure, you can backup your DVDs with RealDVD, but you won't easily be able to rip a DVD and post it on the internet for anyone else to download.

Love DRM or hate it, (wait, does anybody actually love DRM), the argument does make sense. And it could make RealDVD the first DVD backup solution to hold up in court. You know, if RealNetworks wins.

[via paidContent]

Filed under: Developer, Utilities, Macintosh, Productivity

Coda 1.5 released

Panic Inc.'s Coda, the one-window web development wonder for Mac OS X, has just been updated to version 1.5. Coda is a great program, designed to put source editing, FTP, CSS and command line access all in one application. It's a great, great application for developers and is definitely one of my most-used applications.

With version 1.5, Coda adds Subversion to its tool-belt, which is sure to make many, many users extremely happy. Git might be the new hotness, but seeing as graphical SVN clients are just now starting to trickle onto OS X, this is great news to any Mac developer.

In typical Coda-style, Subversion access is clean and easy to manage. Source-control is set-up on a per-site basis. If your existing site already has a SVN directory, Coda detects it automatically. You can also enter in a repository's URL and login details to checkout a copy of a repository if no local copy exists.

In addition to Subversion support, Coda 1.5 also boasts a much-improved find and replace system. The find and replace command can now span all open files, files in a directory, or files in the local root site. In the past, this was one of my only problems with Coda -- I had to search through each file to find a specific line of code, instead of being able to search across a group of files. This is great for updating an image directory or changing a file name across a bunch of PHP or CSS files.

The "Books" menu has also received a big update: support for custom books. Coda's Books feature works by connecting the user to a web page housing a book's complete text. Out of the box, Coda comes with access to a CSS, HTML, PHP and Javascript manual. When writing anything in those languages or formats, you can also refer to the reference books to look up commands or syntax rules. This can be very handy. Now, with the custom book feature, you can add other online books. For instance, I added the Django Book to my bookshelf so that I can have easy access to it anytime I'm working on a site that uses that framework.

Coda's Clips feature has also been improved with support for groupings, importing, and exporting. There are lots of other improvements (check out the release notes) that make an already great program even better.

Coda 1.5 is a free update for all existing Coda users. You can download a 15-day trial from Panic's site. Pricing is $99 for new users, $85 for existing Transmit 3 customers. Coda requires OS X 10.4+.

Filed under: Design, Developer, Utilities

jGrowl: Growl-like notifications in your browser window

A lot of OS X users are familiar with Growl, a customizable notification system with all kinds of uses. New e-mail, iTunes track changes, new instant messages -- Growl handles all of this stuff. Now there's a Growl-like jQuery plugin called jGrowl that lets you apply the same sort of notification in your browser window.

jGrowl supports different animation settings, as well as sticky messages that need to be clicked to close. The styling appears to be done with CSS, so plenty of customization should be available. If you're looking for a way to notify that's not obtrusive and doesn't require a pop-up window that steals attention from your site, give jGrowl a try.

Filed under: Design

Love Obama's slideshow? Here's how to copy it yourself.



Barack Obama's design team has garnered a lot of praise for their work on his campaign materials, including the official website. Heck, there have been entire articles devoted to praising their choice of typefaces. One of the cooler elements the Obama team has cooked up for their website is a slideshow-like animated list for front page navigation.

If you're a fan of this slideshow, and you want to create a similar effect on your own site, look no further than the aptly-named BarackSlideshow script. DevThought has come up with a bit of CSS and JavaScript that loads images and animation effects almost identical to the originals. Some users in the comment thread are reporting browser or plug-in specific issues with the script, so your mileage may vary.

Filed under: Design, Developer

Tests confirm CSS selectors slow load times

Most Web designers make liberal use of CSS selectors, but that spec's sibling, descendant and child selectors can cause what designer/developer Shaun Innman calls a "significant, negative impact on page rendering." This is confirmed in tests done by UI Specialist Jon Sykes that are published on his blog.

Fortunately for most designers, the performance impact is only in extreme situations. But it's definitely something to be aware of when writing CSS.

The test was based in part on a comment by Dave Hyatt on an entry from Inman's blog.

Read more →

Filed under: Design, Developer, Web services

CSS exploit allows detection of social site use

Web developer Aza Raskin knows we visit Digg, Del.icio.us, Reddit and Facebook without even having to ask.

No, he isn't employing privacy violating hackery, but he is exploiting a "cute" information leak in CSS that traditionally displays visited links differently than those that have yet to be visited. By loading in an iframe a list of social site URLs to see which are purple (visited) and blue (not visited), an assumption can be made on what sites to prompt users for submitting a story or blog entry.

Raskin has wrapped this functionality in a script called SocialHistory.js.

Read more →

Filed under: Design, Fun, Internet, Utilities, Features, Macintosh

10 fresh NetNewsWire styles

Now that a lot of people are spending as much time looking at their RSS readers as their web browsers or email clients, it's probably a good idea to give your reader an appearance you can live with. If you happen to use NetNewsWire, one of the most popular RSS apps for OS X, you've got plenty of stylesheets to choose from.

NetNewsWire supports CSS styles, so it's not too difficult to code your own if you happen to have some CSS experience. If you're a CSS newbie, though, don't sweat it: there are plenty of looks to choose from. We went beyond the preloaded styles and picked out some options that should please even the pickiest readers. Some of them not only change the look of NetNewsWire, but add some useful functionality as well. Take a look at our top 10 themes.





Read more →

Filed under: Design, Developer, Internet

htmlPlayground: learn and test HTML and CSS

HTML Playground
htmlPlayground is a helpful reference for web developers of any skill level. It provides an easy way to generate, test, and learn about HTML and CSS syntax. Simply select your reference (HTML tags, attributes, or CSS properties), and then select an item like "blockquote."

htmlPlayground will then display a description of the item (to explain what it's used for), an example code snippet that is editable, and a rendered preview of the code snippet. The snippet is color coded: green for tags, red for attributes, and black for regular text.

If you click on a green tag in the snippet, you can edit the tag's attributes easily via another pane. When you're happy with your finalized code, you can of course copy/paste it to an HTML file to use on your website.

[Via garyll]

Featured Time Waster

The World's Hardest Game 2.0 - Time Waster

So, just how good at time waster games are you? Think you've got the stuff? Well, The World's Hardest Game 2.0 doesn't think you do. Yes, amazingly, it's possible to have a sequel to a game called "The World's Hardest Game". It doesn't seem logically possible, since if the first one was actually the world's hardest, how could another one come along and share the moniker? It made me doubt the name in the first place. That is, until I tried the game. The mechanics of the game are very simple. You are a small red square, ...

View more Time Wasters

Featured Galleries

Defective by Design, London: Protest Pictures
Microsoft Security Essentials
Chromium Pre-Alpha on CrunchBang Linux
Safari 4 Beta
10 Firefox themes that don't suck
IE8 RC1
Download Squad at the Crunchies After-Party
Download Squad at the Crunchies
WordPress 2.7
Cooking Mama: Mama Kills Animals
Windows 7 Hands On
Comodo Internet Security
Android First-look: Amazon.com MP3 Store
Android First-look: Twitroid
Google Reader Android
Android Hands-On
Twine 1.0
Photoshop Express Beta
Mozilla Birthday Cake
Palm stuff
Adobe Lightroom 1.1

 


Follow us on Twitter!

Flickr Pool

www.flickr.com

More Tech Coverage

AOL Radio

Joystiq

TUAW

Daily Finance

Autoblog

Urlesque

Engadget

WoW

Switched.com

FanHouse