Dev Depot: CSS3 Generator

Stephen Yagielowicz

Whether as a learning tool or a timesaving shortcut to cross-browser coding, visual CSS generators offer multiple benefits to coders, developers and graphic artists

As modern website coding practices become increasingly complex, a variety of tools are coming to the rescue of busy webmasters seeking to stay current while streamlining the amount of time spent on their projects. Among these tools are a new generation of web-based, visually-oriented, code and cascading style sheet (CSS) generators that enable point and click construction of the basic building blocks of websites today, providing its users with a fast path to design mockup and finalization.

Visually oriented coding tools such as CSS3 Generator serve as both educational aids and timesaving enhancements to the hand-coder’s workflow.

One visual CSS generator is the aptly named CSS3 Generator (www.css3.me), which according to its publisher, is a fully customizable tool for CSS3 creation. It provides an intuitive interface consisting of a CSS box preview pane, along with selectors for border size and color, as well as for the element’s background color (if any). Sliders allow quick adjustment of border-radius and box-shadow plus background gradient and opacity, with fly-out panels providing additional controls for fine-tuning these effects.

A click of a button instantly crafts the code, with a pop-up displaying the results.

CSS3 Generator output is configurable via checkboxes providing support for older versions of Microsoft, Mozilla and Webkit browsers, as well as for the latest offerings of Microsoft, Mozilla, Opera and Webkit compatible browser software.

Sticklers for code validation will need to make a tradeoff between compliance and cross-browser proprietary extensions, as the default setting includes support for all of the above browser flavors, as well as the ability to enable comments within the CSS.

The value of these comments should not be overlooked as they reveal implementation details such as workarounds for specific browsers and command ordering for proper use. Include these comments when generating your CSS code — you can always delete them after you’ve had a chance to review them, if you’re concerned about the bloated file size.

Another button-click allows users to select the code for an easy copy and paste.

Visually oriented coding tools such as CSS3 Generator serve as both educational aids and timesaving enhancements to the hand-coder’s workflow; while their quick, easy and free nature means there’s no reason to not give them a try. Play with CSS3 Generator for a minute and you may find that has a welcome place in your adult webmastering toolbox.

Related:  

More Articles

profile

Q&A: Paxum CEO Octav Moise Shares the Wealth

Alejandro Freixes ·
educational

S2S Postbacks: Getting Ad Stats in 1 Place

Juicy Jay ·
opinion

Tips to Master Customer Subscription Retention

Cathy Beardsley ·
opinion

A Primer on How to Integrate Paysite Processing

Jonathan Corona ·
educational

Trademark Ruling a Victory for Adult Products, Services

Marc Randazza ·
profile

Q&A: Rich Girls CEO Cristina Enriches Cam Models

Alejandro Freixes ·
profile

Q&A: LiviaChoice Embraces Grand Camming Destiny

Alejandro Freixes ·
opinion

Refined Protocols Reduce STI Risks for Performers

Eric Paul Leue ·
educational

Camming 101: Establish Boundaries to Keep the Fantasy Alive

Steve Hamilton ·
profile

Nikki Night Forges Cam Model Excellence

Alejandro Freixes ·
Show More