CSS3

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 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

 

Animated CSS3 Only Horizontal Accordion

This animated horizontal accordion was achieved without a single line of JavaScript, but only with CSS and minimalistic markup:

animated-css3-only-horizontal-accordion

The widget utilizes a form with a list of hidden radio buttons, CSS3 transitions, transforms and sibling selectors, and works with all modern browsers, including IE9 (excluding the slide animation).

Have fun and use for free, but do not forget to check the actual CSS and HTML, because they are pretty cool!

Related Posts and Links

Powerful CSS3, HTML5, JavaScript and PHP Rating System

AcidJs.Rating is an elegant and lightweight, yet powerful CSS3, HTML5, JavaScript and PHP rating system with various customization options, different display styles and great API.

Although the widget utilizes simple flat JSON files for data storage, it’s server runtime can be easily modified to connect to a SQL database.

rating

Key Features:

  • Fast and elegant, with a very small footprint.
  • CSS3 animations.
  • No images.
  • No databases, just simple JSON files for data storage.
  • Small, but powerful API.
  • Custom events.
  • Votes Viewer.

Requirements:

  • Standards-compliant (HTML5 or XHTML) page.
  • JavaScript should be enabled in the browser.
  • Web-server with PHP 5.2.0 or higher.

Sounds good? Find more details here or go straight to the demo and download of AcidJs.Rating!

Related Posts and Links

CSS3 Rating Stars with Hover and Selection

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.

thumb

Enjoy the weekend!

Related Posts and Links

Animated CSS3 CD Cases on a Shelf

“Just take those old records off the shelf
I’ll sit and listen to ‘em by myself
Today’s music ain’t got the same soul
I like that old time rock ‘n’ roll”

Remember that old Bob Seger and The Silver Bullet song? Well, this is exactly what I was listening to today, when I decided to create a this CD shelf with HTML5 and CSS3. Here’s the demo  and excuse me for the creepy CD cover art I’ve used – somehow it reminds of the old days when I was discovering music. The truth is that I still love these albums, so here they are – a CD shelf with some of my favorite 80s and 90s metal albums, made out of minimal HTML and CSS3:

promo-01

To fully view a CD, just hover it and observe the smooth animation.

promo-02

… Or you can just have all of the CDs displayed frontally (by removing the .acidjs-cases-tilted from the topmost element):

promo-03

Speaking of markup, once you download the experiment, and add the style sheet to your page, all you need to do is to use simple bulleted list markup to add your favorite CDs. If you take a look at the CSS, you will notice that you can also set a poster behind the shelf, and everything is pretty simple and easy to modify.

So… Rock’n’Roll and thanks for reading this one! Hope you like it! Want to see it in action with a huge list of my all time favorite albums?

Related Posts and Links

My New Portfolio/Personal Website is Up and Running

During the Christmas holidays I finally found the time to spend a couple of days to tackle something I’ve been planning to do for quite some time – to fully redo (in terms of code and design) wemakesites.net, my portfolio/personal website. Honestly, I wasn’t sure if I should announce it here, but I am pretty happy with the result, so this is why I am doing it – version 7.0 is now up and running!

wemakesites

Here are a few facts:

  • Custom CMS. PHP backend with RESTFul services.
  • Semantic, elegant, valid and SEO-friendly HTML5 output.
  • Scores an average of 96-100 optimization points on Google PageSpeed (depending on visitors’ network connection speed and my hosting provider’s health).
  • Scores an average of 96-100 optimization points Y!Slow (depending on visitors’ network connection speed and my hosting provider’s health).
  • Optimized both for client- and server-side rendering.
  • Unified modular client- and server-side MVC/MVVM architecture.
  • Async history management.
  • The front-end, templating, session caching and URL routing are built on top of my Semtex UI HTML5, CSS3 and JavaScript framework.
  • Fully async with JavaScript turned on.
  • Asynchronously switchable themes (the icon to the left of the search box in the navigation bar).
  • Supported browsers: Firefox, Chrome, Chromium, Opera, Opera Webkit, Safari, Internet Explorer 9+.
  • Cool social sharing toolbar, achieved with AcidJs.Tiles.
  • Fully responsive CSS3.
  • Lazy loading of images, achieved with AcidJs.ImgLazyload.
  • Decent accessibility score on WAVE.
  • The average loading time of the home page is 1.70 seconds with cache turned off.
  • The average loading time of non-cached async pages is 0.253 seconds.
  • The average loading time of session-cached async pages is 0.019 seconds.
  • CSS and JavaScript build tools.
  • Fully g-zipped.
  • Google PageRank: 4.
  • Version 7.0 (Released January 2014).

Thanks for reading and enjoy the weekend! Please, do not hesitate to contact me if you are interested in more facts about the wemakesites.net!

Related Posts and Links

Hiding Emails from Spam Bots: The CSS3 Way

Hiding emails from spam bots can be really painful, but fortunately there are a lot of cool solutions out there. Here’s how you can do this with the CSS3 generated content and reversed text direction.

Let’s say that email you want to obfuscate is info@company.com. The first thing you need to do it to reverse it, so it looks like this: moc.ynapmoc@ofni. For instance, you can do this online here. The rest is CSS:

  • In your style sheets, create a new .contact rule.
  • Add the reversed string as value of the content property of your .contact rule.
  • Set the direction of the text as right to left via direction and unicode-bidi.
  • Use the .contact element in your markup.

The CSS

.contact::before
{
    content: "moc.ynapmoc@ofni";
    direction: rtl;
    unicode-bidi: bidi-override;
    text-decoration: underline;
    color: #00f;
}

The Markup

<p>To contact us, send an email
to <span class="contact"></span>.</p>

… And everything will look just right when you view it in the browser:

email

The drawback of this approach is that CSS3 generated content cannot be selected and copied, which is a usability issue, but this is just an idea and there are many other solutions worth trying.

One small consideration, regarding the syntax of generated content. Older browsers do not recognize the ::before or ::after double column syntax, so you may want to consider using :before / :after. Since this is just syntactical enhancement to distinguish pseudo elements (hover, active, etc) from generated content (before, after), introduced in CSS3, newer browsers understand both syntaxes, so  you can use the “old” syntax without concern.

Related Posts and Links