Design Tip: CSSFly lets you edit live site design in your browser

Posted Mar 22nd 2007 7:30PM by David Chartier
Filed under: Internet, Utilities, Web services, Design Tips

If you're a CSS-slinging web designer who often peers into how other sites are designed, why not take it a step further and actually redesign them, live, in your browser? CSSFly is a tool that seems almost too good to be true: the service allows you to open a site in a frame, with another frame containing the site's markup allowing you to dig in. You get your choice of how and where the frames open, i.e. - markup on the top, bottom, left or right, but unfortunately the markup isn't colorized in any way to help shuffle through the code. Still, CSSFly is a handy way to tinker with virtually any CSS-driven site without having to get out the big guns or ask the site owner for an FTP login.

Permalink Email this Share Comments [6]

Reader Comments (Page 1 of 1)

3-22-2007 @ 8:30PM

Megan Taylor said...

CSSVista lets you edit CSS live with a split browser for Fireox and IE.

3-22-2007 @ 9:43PM

Thomas said...

This is extremely cool and works on Mac and PC. Thanks for sharing!

3-22-2007 @ 9:51PM

no_link said...

How is this better or different then the web developer toolbar for firefox? You can edit CSS, HTML , and place windows wherever you want

3-22-2007 @ 10:52PM

Kunal said...

#3, I use the Web Dev Toolbar for Firefox too, and it's a great add-on.

The difference seems to be that CSSFly is not a browser add-on, so you can use it within any browser, even on a public computer, to play with a site's stylesheet. I'm not sure if I'd ever want to do that, but the option is there now. :)

3-22-2007 @ 10:56PM

Nick O'Neill said...

This isn't bad, but the Firefox developer toolbar offers the same functionality and some. You can even edit html on the fly. I use it at work, and highly recommend it.

3-23-2007 @ 1:28PM

kingkool68 said...

Come on the best tool out there for web development is Firebug, hands down. You can select a specific piece of HTML code and see all of the styles that are applied to that code and even styles that are overridden as indicated by a strikethrough. Check it out at http://www.getfirebug.com/

Download Squad Features

View Posts By

RESOURCES

Send us news tips Contact Us Advertise Corrections? Problems?

RSS NEWSFEEDS

Feeds by category

Download Squad bloggers (30 days)

# Blogger Posts Cmts

1 Brad Linder 85 13

2 Lee Mathews 50 67

3 Christina Warren 19 16

4 Christina Clark 16 2

5 Jason Clarke 14 1

6 Jay Hathaway 10 3

7 Lisa Hoover 7 3

8 Dolores Parker 4 4

9 Grant Robertson 1 0

Most Commented On (60 days)

14 Extremely Useful Firefox Addons (37) Windows XP gets another stay of execution (26) The one thing I hate about Linux (25) 24 Great Open Source Apps for Admins & Technicians (20) Microsoft begins rolling out Hotmail redesign (15) Truth serum - online fact checking sites for political open season (14) Microsoft launches Phone Data Manager Beta (11) StumbleUpon relaunches: No browser toolbar necessary (11) So your web host is retiring: How to back-up and move forward (10) The Ten Blogging Commandments: Thou shalt not linkbait (10)

Urlesque Headlines

Shadow Monuments Obama Who? Cast Your Vote for Mustached American of the Year! Librarian Records Rattlesnakes With Alien Microphone Hip Hop Children Predict Outcome of Election, Prepare White House for Obama Julian Beever Is No Eccentric Chimney Sweep, But That's Okay

BloggingStocks Tech Coverage

AAPL Apple Inc ADBE Adobe Systems AKAM Akamai Technologies AMZN Amazon CSCO Cisco Systems DELL Dell EBAY eBay GOOG Google INTC Intel INTU Intuit Inc JAVA Sun Microsystems MOT Motorola MSFT Microsoft NOK Nokia Corp ORCL Oracle Corp PALM Palm Inc RHT Red Hat Inc RIMM Research in Motion SYMC Symantec Corp TWX AOL Time Warner YHOO Yahoo!

More Tech Coverage

Control Shift It's all about the experience Somewhat Frank Perspectives on tech as it fuses in everyday life Switched Gadgets, web news and commentary Urlesque Exposing bits of the web