css3 animations

Online Color Picker and Color Conversion Tool

Just a few hours ago I finished and deployed my new online service and very first endeavor in the interesting world of colors and color theory. Say hi to AcidJs.ColorConverter!

Features:

  • Native HTML5 color picker.
  • Color conversion to and from HEX, RGB, HSL, CMYK, HSV,  etc.
  • Color tints, tones and shades.
  • CMYK and RGB color charts, powered by Google Charts.
  • Inspirational color schemes.
  • Detailed information about the selected color.
  • Option to save the raw JSON data, containing the details of the selected color.
  • About 900 named color equivalents.

Built on top of HTML5 WebComponents (AcidJs.XTabs and AcidJs.XOverlay), and utilizing Object.observe() and the (not-so-new) input “color” type (sorry, no fallback for browsers, which do not support it and that’s on purpose!) and using the data from the brilliant ColorHexa service, which I transform to JSON via the REST API running on my server.

Screenshots:

The color picker:

cc-06

Raw data viewer:

cc-05

RGB and CMYK color charts

cc-04

Color conversions table

cc-03

Advanced view – shades, tints, tones and schemes

cc-02

Editor tab

cc-01

Check it on this page and have fun!

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Advertisements

X-NotificationsBar: HTML5 Web Component

Just finished my new endeavour in the amazing world of HTML5 Web Components, called X-NotificationsBar and based on an earlier CSS3-only driven solution. Here’s how to use it, after you check the demo and eventually download it:

<acidjs-x-notifications-bar bgcolor="#016fba" expanded="true" message="random" loop="5000">
    <acidjs-x-notifications-bar-message>
        HTML5 Web Components enable truly encapsulated and reusable components for the web. 
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        You can browse the other examples of HTML5 Web Components on <a href="http://experiments.wemakesites.net/html5-web-components.html" target="_blank">this page</a>.
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        More info regarding this exciting new technology: 
        <a href="http://webcomponents.org/" target="_blank">WebComponents.org</a>,
        <a href="http://polymer-project.org/" target="_blank">Google Polymer</a>,
        <a href="http://x-tags.org/" target="_blank">Mozilla X-Tag</a>.
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        <p>If you like this solution, you can also check my 
        <a href="http://wemakesites.net/" target="_blank">personal wesbite</a>, 
        <a href="http://semtex.wemakesites.net/" target="_blank">Semtex UI Framework</a>, 
        <a href="http://acidjs.wemakesites.net/" target="_blank">Acid.JS Web.UI</a>, 
        <a href="https://acidmartin.wordpress.com/" target="_blank">my blog</a>,
         follow me on <a href="https://twitter.com/wemakesitesnet" target="_blank">Twitter</a> 
         or consider a <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=QFUHPWJB2JDBS" target="_blank">donation</a>.</p>
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        If you prefer a pure CSS3 solution of this example, you will 
        <a href="http://experiments.wemakesites.net/css3-hello-bar.html" target="_blank">find it here</a>.
    </acidjs-x-notifications-bar-message>
</acidjs-x-notifications-bar>

x-notifications-bar-html5-web-component

The <acidjs-x-notifications-bar></acidjs-x-notifications-bar> Tag Attributes:

  • bgcolor – Optional background color. Default value: “#e34c26”.
  • expanded – Boolean, optional. Default: “true”.
  • message – Zero-based index or “random”. “0” means that the content of the first <acidjs-x-notifications-bar-message> will be set. If “random” is set, a random message will be displayed. Default: “0”
  • loop – Optional timeout in milliseconds for looping messages. Default null.

The <acidjs-x-notifications-bar-message></acidjs-x-notifications-bar-message> Tag:

It should be used to set messages to the notifications bar, one message at a time. The tag does not support any attributes and accepts any HTML.

Have fun and enjoy the weekend!

X-Chessboard: HTML5 Web Component

A few months ago I blogged about a fun experiment, explaining the creation of animated 3D chessboard and pieces with CSS3 and UTF characters only. Following my recent excitement and play with HTML5 Web Components I reused the CSS from the example and extended it to a custom tag, which when used as a simple HTML and without any JavaScript:

<acidjs-xchessboard id="xchessboard-01" boxsize="64">
    <acidjs-xchessboard-piece data-bind='{"type":"rook", "color":"white", "position": "a1"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"knight", "color":"white", "position": "c3"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"bishop", "color":"white", "position": "c1"}'></acidjs-xchessboard-piece>
    [...]
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "f7"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "g7"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "h5"}'></acidjs-xchessboard-piece>
</acidjs-xchessboard>

Produces this beautiful chessboard:

x-chessboard

Using it, you may define as many pieces as you need, and you can also specify their type, color and position on the board, using the data-bind attribute of the <acidjs-xchessboard-piece></acidjs-xchessboard-piece> tag:

{
    "type":"pawn",
    "color":"black",
    "position": "h5"
}

As usual – here’s the link to the demo, the code and the download, and on my HTML5, CSS3 and JavaScript Experiments and Insight website there’s a lot of other stuff that you may find useful.

Cheers and until later! See you on Twitter!

HTML5, CSS3 and JavaScript Pie Charts

AcidJs.Pie is a lightweight pie chart plotting widget, utilizing CSS3 instead of HTML5 canvas or SVG with small, but powerful and easy to use API, custom events and numerous usage possibilities.

pie

You may download AcidJs.Pie or find more information on this page, and the demo and documentation are here.

More Screenshots

promo-pie-3

promo-pie-4

promo-pie-2

promo-pie-1

Key Features

  • Fast and elegant, with a very small footprint
  • Small, but powerful API
  • Custom events
  • Fully CSS3-driven – no Canvas, SVG or Flash

Requirements

  • Standards-compliant (HTML5 or XHTML) page
  • JavaScript should be enabled in the browser
  • Web-server

Related Posts and Links

Atypical Uses of Radio Buttons and Checkboxes for Building Interactive UI Widgets

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 star rating widget, utilizing simple HTML form, hidden radio buttons, adjacent sibling selectors and right-to-left, with hover, selection, persisted state and disabling (a.k.a. already voted).

thumb

Animated CSS3 Vertical Accordion

The widget utilizes a simple form with radio buttons, CSS3 animations and adjacent sibling selectors.

animated-css3-only-horizontal-accordion

CSS3 Treeview

Fully functional, multi-level CSS3-only treeview with persisted state, utilizing hidden checkboxes and list elements.

css-3-treeview

CSS3 Treeview with Nested Nodes Selection. Almost JavaScript-less.

Similar to the treeview from the previous example, but with updated look and feel and added support for nested nodes selection via an additional checkbox.

css3-treeview-with-multiple-node-selection

CSS3 Tabstrip

Feature-complete CSS3-only tabstrip widget, utilizing hidden radio buttons.

css3-tabstrip

Notifications Bar

JavaScript-less animated notifications bar, utilizing a couple of div elements and a single hidden checkbox.

css3-notification-bar

iPhone Toggle Buttons

Fully functional iPhone-like toggle buttons, made up of labels, radio buttons or checkboxes.

javascript-iphone-toggle-buttons

Animated CSS3-only Slides Viewer

Fully functional presentation slides viewer, utilizing radio buttons, CSS counters and animations with native keyboard arrow support.

slides-viewer

Custom Skinnable Radio Buttons and Checkboxes

My favorite approach for styling radio buttons and checkboxes with semantic and minimalistic markup.

css-pages-imageless-css3-custom-checkboxes-and-radio-buttons

Enjoy the weekend!

Related Posts and Links

HTML5, CSS3 and JavaScript Windows 8 Metro Tiles 2.0 is Out!

I am happy to announce that the new version of AcidJs.Tiles is out with improved and even more realistic looks and animations. It also includes a minor bug fix, related to the setting of the “title” property of the control.

AcidJs.Tiles is a JavaScript, HTML5 and CSS3 layout widget, which resembles the look and feel, functionality and behaviors of Windows 8 Metro tiles, and can be used on web sites or web apps. It is easy to configure via a small, but powerful API and events, and comes with stunning and realistic desktop-like 3D CSS3 animations.

acidjs-tiles-promo-01

The tiles can be used as placeholder of virtually anything – from simple text, to sophisticated markup and forms.

acidjs-tiles-promo-02

tiles

The new version is backwards compatible, so upgrading from version 1.0 is easy and out of the box and would not cause any trouble.

And last, but not least, click the image below to check a cool real-life demo of AcidJs.Tiles:

acidjs.tiles.blog.demo

Related Posts and Links

Animated 3D Chessboard With Pure CSS3. No Images. No JavaScript

I enjoyed coding this one last night. The word is about animated 3D chessboard, achieved with pure CSS, no images and no JavaScript, making use of nth-child selectors, 3d transforms, keyframe animations, generated content and the UTF symbols of the chess figures:

animated-css3-only-chessboard-blog

Supported Browsers:

  • Firefox
  • Chrome
  • Opera Webkit
  • Opera
  • Safari
  • Internet Explorer 9+ (with nice fallback for the 3D stuff)

Not really much of a practical value, I must admit, but showcasing the immense power of CSS3 which can be used today. Have fun and enjoy the weekend!

Related Posts and Links