Month: August 2013

Skinnable CSS3 Metro Forms

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Say hi to AcidJs.Forms, the successor of one of the oldest components in Acid.JS Web.UI – Forms.JS!

AcidJs.Forms is a powerful component that will give you total control over the form elements on your page without any additional markup or sophisticated JavaScript. The component will seamlessly add cool metro looks to input boxes, buttons, file inputs, checkboxes, radiobuttons and dropdowns.

acidjs-forms

Key Features
  • Lightweight and imageless, fully CSS3-driven skins.
  • Fast initialization and small footprint.
  • CSS3 animations and transitions.
  • Support for themes.
  • Rich client API and custom events.
  • Support for multiple themes on a single page.
  • No additional markup required.
  • The full version is shipped with 5 ready to use themes (Default, Gray, Orange, Red and Violet).
  • Fallback for non-CSS3 browsers.

Check the info here, look at the demo and have fun!

CSS3 Metro Dropdown Styling

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Here’s a quick and dirty CSS3 solution that will give cool metro look and feel to your HTML drop downs without a single line of JavaScript and minimal additional markup (actually just one wrapping <span />).

css3-metro-dropdown

You may also want to check AcidJs.Forms for a complete form-styling solution with CSS3 and JavaScript.

Enjoy the weekend!

Related Posts

HTML5 Canvas Gauge Component

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I am happy to announce that I’ve just finished the new widget that is already part of Acid.JS Web.UI – the AcidJs.Gauge class (demo).

AcidJs.Gauge is a JavaScript widget, using the HTML5 canvas element to draw interactive gauges with various configuration options on the page with a simple, but yet powerful API.

gauge-blog

All major browsers are supported, and for older browsers, which do not support canvas we have a nice fallback.

You can check the demo of this page. Have fun!

Related Links