Inspired by Material Design and Bootstrap and from a few other takes on modern UI, I just finished Vuecidity – a UI component library for Vue.js and a free, open source project. Vuecidity provides developers with a huge set of 30+ UI components, 24-column responsive layout grid system, styles and colors, beautifully crafted form elements and a couple of useful … Continue reading “Vuecidity – UI Component Library for Vue.js”
One of my experiments with atypical uses of radio buttons I blogged about sometime ago was the CSS3 Driven Slides Viewer Without any JavaScript, and soon after it was published, became one of my most popular posts, but busy with other stuff I never took the time to extend or improve it. Until yesterday, when … Continue reading “Slides Viewer: HTML5 Web Component”
Just finished my new experiment with HTML5 Web Components and Mozilla X-Tags, called X-Password. What you get is a JavaScript-less extended password input, allowing Windows 8-like password reveal behavior out of the box: [sourcecode language=”javascript”] <acidjs-xpassword></acidjs-xpassword> [/sourcecode] The input supports all JavaScript getters, setters, events and form submission is handled natively. X-Password does not have … Continue reading “X-Password: HTML5 Web Component Input on Steroids”
Radio buttons and checkboxes are traditionally associated with forms and data, however if you spend some time playing with these elements and CSS you will certainly find a lot more possible and not so boring uses. Here are a few, which will maybe give you ideas and will inspire you. Star Rating Widget Fully functional … Continue reading “Atypical Uses of Radio Buttons and Checkboxes for Building Interactive UI Widgets”
Just before the weekend, here’s a pure CSS3 implementation of a rating star system with support for selection and hover, made-up by radio buttons, rtl, generated content, minimal markup and sibling selectors. Enjoy the weekend! Related Posts and Links Animated CSS3 CD Cases on a Shelf Animated 3D Chessboard With Pure CSS3. No Images. No … Continue reading “CSS3 Rating Stars with Hover and Selection”
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 … Continue reading “Skinnable CSS3 Metro Forms”
Try Semtex – the new HTML5, CSS3 and JavaScript UI framework! My latest experiment, a follow up to an earlier CSS3-only solution. Check the demo and implementation on this page and have fun! Related Posts Semtex HTML5, CSS3 and JavaScript UI Framework HTML5 Canvas Gauge HTML5 Shopping Cart CSS3 Treeview. No JavaScript. CSS3 Driven Slides … Continue reading “HTML5, CSS3 and JavaScript iPhone Toggle Switch Button”
The post for today is not something really special or super amazing. It’s just a quick and dirty trick that I use when I have to create inline forms for selecting files in which the actual input is hidden, and users click some text node (link, button, etc) that opens the browse for file dialog, … Continue reading “How to Create an Inline Masked File Upload Form with CSS3 and HTML5”
Try Semtex – the new HTML5, CSS3 and JavaScript UI framework! I am not a huge fan of roundups, but this morning, I found that I have a few pretty popular CSS3 posts and decided to put them in a single post which will be updated whenever a new one appears and is worth seeing. … Continue reading “Loving my CSS3 Babies”
The code for today is a fully functional CSS3-only tabstrip, which works without a single line of JavaScript and natively supports keyboard arrow navigation. The CSS In short – we have a list with radio buttons, <label />s and <div />s. We hide each <div />, which is the content of the tab according to … Continue reading “Fully Functional CSS3-only Tabstrip Without any JavaScript”