CSS3.0 Maker – Get CSS Code For Border, Box Shadow Effects & More


We’ve reviewed a couple of CSS code generators before like Layer Styles and the ThemeShock CSS Drop Shadow Generator. Both are excellent but limited since they generate code for a single effect only. CSS3.0 Maker is a an auto CSS code generator that generates code for border, text shadow, box shadow, outline effects and skew, scale or rotate an element. You can work on multiple CSS files (different styles in each file) by creating different files. Code is downloaded as an HTML file and CSS is added as an internal sheet. The service tells you what version of Chrome, Firefox, Internet Explorer, Safari and Opera the effects will render in and which mobile devices will support it.

To create multiple files, you will be required to sign up for a free account. The service can otherwise be used without creating one. Oddly enough, the site lets you add more effects when you aren’t logged in. Additional effects that are available (when logged out) are Gradient, Animation and Transition effects. When used as an unregistered user, the site does not let you add multiple effects. If you choose to use the service without registering for an account, you will see a horizontal bar just below the site header that lets you select different effects.

CSS3.0 Maker

If you want to add multiple effects, sign up for a free account and create a file. You can create a file by clicking New File on the home page or by going to My Files. Enter a name for your file. Select Edit and all changes that you make are saved to this file. Go to the Home tab to start editing effects.

CSS3.0 file

To move between different effects, use the drop down menu on the Home tab. To change the color of the element and adjust its opacity, go to the RGBA effect. To add a border or change border styles, go to Border Radius. The Text Shadow and Box Shadow effects create a drop shadow effect behind the element or the text. You can skew and scale it from the CSS Transform effect and offset the border from the element from the Outline Offset effect.

Box Shadow  CSS 3

Once you’ve made all the changes and applied the effects you need, click Save and then Download, to download the file. Make necessary changes and you’ve got your CSS ready to go.

Testing CSS 3.0 Generator

Visit CSS3.0 Maker

Related Articles:
  1. Layer Styles CSS Generator Creates Shadow, Background & Border Effects
  2. Add Shadow Effect To Images With CSS3 Auto Code Generator
  3. Take Screenshots And Auto Add Shadow & Rotate Effects With QuickScreenshots

CSS3.0 Maker – Get CSS Code For Border, Box Shadow Effects & More
Fri, 09 Sep 2011 11:57:17 GMT


Popular posts from this blog

Apple will disconnect ‘obsolete’ first-gen Apple TV from iTunes in May

Windows 10: Microsoft retires HomeGroup

Microsoft launches its LinkedIn-powered Resume Assistant to Office 365 subscribers