Category Archives: CSS3

X-Deck: Playing Cards HTML5 Web Component

Must admit I’ve never been a huge fan of card games. I thought, however that it may be interesting to see what I could do with HTML5 Web Components in the similar manner I experimented with this chessboard but this time with French cards deck.

The result is AcidJs.XDeck and I really enjoyed developing it. Apart from the cool looks and animations, it supports rendering of preset hands, faceup/facedown, random, play and flip behavior, etc via a small and easy to use API and the deck triggers custom events, which return data that can be used immediately.

thumb

After you have enjoyed the demo, make sure you also download it and run it locally, because the distribution page contains more examples and also API and events tester.

Basic Usage

<acidjs-xdeck>
    <acidjs-xdeck-card suit="joker"></acidjs-xdeck-card>
    <acidjs-xdeck-card rank="9" suit="spades"></acidjs-xdeck-card>
    <acidjs-xdeck-card rank="10" suit="hearts"></acidjs-xdeck-card>
    <acidjs-xdeck-card rank="jack" suit="clubs"></acidjs-xdeck-card>
</acidjs-xdeck>

What you Get

x-deck-blog

HTML Attributes of the acidjs-xdeck Tag *

Apart from the standard HTML attributes, the tag also supports the following component-specific attributes:

  • random – Optional attribute for rendering random hands. If set, the value should be between "1" and "52".
  • facedown – Optional, Boolean. Default value: "false". If set to "true", all cards in the hand will be rendered facedown.
  • hand – Optional attribute for rendering preset hands, for example: hand="4 of a kind". The preset hands are stored in the AcidJs.XDeck/classes/XDeck.Hands.js file as a JavaScript object and you can add as many presets as you need.

* Setting of the attributes via setAttribute() will not take effect, use the JavaScript methods instead.

HTML Attributes of the acidjs-xdeck-card Tag *

Apart from the standard HTML attributes, the tag also supports the following component-specific attributes:

  • rank – Required. One of "2", "3", "4", "5", "6", "7", "8", "9", "10", "jack", "queen", "king" or "ace".
  • suit – Required. One of "clubs", "diamonds", "hearts", "spades" or "joker".
  • facedown – Optional, Boolean. Default value: "false". If set to "true", the card will be rendered facedown.
  • removeonplay – Optional, Boolean. Default value: "true". If set to "false", the card will not be removed from teh hand when played.
  • flip – Optional, Boolean. Default value: "true". If set to "false", the card will not be flippable.
  • play – Optional, Boolean. Default value: "true". If set to "false", the play button of the card will be disabled.

* Setting of the attributes via setAttribute() will not take effect, use the JavaScript methods instead.

Methods

Apart from the standard JavaScript methods, AcidJs.XDeck also supports the following component-specific methods:

  • random(length, faceup) – Create a random hand by specified cards length and optional Boolean facedown.
  • all(faceup) – Show all cards in the deck faceup or facedown.
  • shuffle() – Shuffle the cards.
  • hand(object) – Render a hand preset, like “4 of a kind”.

Events

The component triggers the following component-specific events:

  • card:play – fired when the “play” play button has been clicked.
  • card:flip – fired when the “flip” play button has been clicked.

Both events return an object, containing the current configuration of the card:

{
    facedown: false,
    flip: true,
    play: true,
    rank: "ace",
    removeonplay: true,
    suit: "spades"
}

Hand Presets

The hand presets can be used to render ready made hands, like “4 of a kind”, “royal flush”, etc. Presets are stored as in an object in the AcidJs.XDeck/classes/XDeck.Hands.js file, which looks like this and is very easy to modify and add more:

window.xtag.AcidJsXDeckHands = {
    "royal flush": [{
            suit: "hearts",
            rank: "ace"
        },{
            suit: "hearts",
            rank: "king"
        },{
            suit: "hearts",
            rank: "queen"
        },{
            suit: "hearts",
            rank: "jack"
        },{
            suit: "hearts",
            rank: 10
    }],
    "4 of a kind": [{
            suit: "diamonds",
            rank: 5
        },{
            suit: "spades",
            rank: 5
        },{
            suit: "hearts",
            rank: 5
        },{
            suit: "clubs",
            rank: 5
        },{
            suit: "hearts",
            rank: 3
    }],
    "full house": [{
            suit: "hearts",
            rank: "king"
        },{
            suit: "diamonds",
            rank: "king"
        },{
            suit: "spades",
            rank: "king"
        },{
            suit: "hearts",
            rank: 5
        },{
            suit: "clubs",
            rank: 3
    }]
};

Check the code of the demo page or the distribution to see how to bind to them and what they return.

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.

Happy Birthday, CSS!

Last week CSS turned 20, and suddenly I realized that I’ve been in a special relationship with it ever since 2001. Moreover, I am happy and proud I was among the first who realized its instant maturity and potential, and after so many years I am still in love with it.

So, happy birthday CSS and thanks for being around. Front-end was boring and sucked before you were born!

X-Parallax: New HTML5 Web Component

A couple of days ago I blogged about an experiment in the creation of a purely CSS3-driven parallax effect, and ever since I started thinking of wrapping it as a custom HTML5 Web Component to avoid the hassle of class names and rules in setting the slide images or background color.

As a whole, I am very happy with the result, called X-Parallax. It is easy to configure, fully responsive and very fast. Below are a few screenshots, but if you want you may want to jump straight to the demo (acting also as a tutorial of how to use it) and download the code.

Usage

<acidjs-xparallax nav="top" animationspeed="2000" defaultslide="0">
    <acidjs-xparallax-slide label="X-Parallax" background="images/roots.jpg">
    <!-- slide content -->
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide label="Download" background="images/sea.jpg">
    <!-- slide content -->
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide label="Installation" valign="middle" background="images/flowers.jpg">
    <!-- slide content -->
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide align="left" valign="top" label="Customization" background="images/glass.jpg">
    <!-- slide content -->
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide label="HTML5 Web Components" align="left" background="images/broken.jpg">
    <!-- slide content -->
    </acidjs-xparallax-slide>
</acidjs-xparallax>

Screenshots

Top Navigation Bar

x-parallax-top

Right Navigation Bar

x-parallax-right

Bottom Navigation Bar

x-parallax-bottom

Left Navigation Bar

x-parallax-left

Navigation Off

x-parallax-none

HTML Attributes of the <acidjs-xparallax /> Tag:

  • nav: Position of the navigation bar. Default: "top". Other values are "right", "bottom", "left" or "none". Setting nav="none" will not render the navigation bar.
  • animationspeed: Slide speed in milliseconds. The default value is "2000", i.e. 2 seconds.
  • defaultslide: Zero-index visible slide on page load. The default value is "0", i.e. the first slide.

HTML Attributes of the <acidjs-xparallax-slide /> Tag:

  • label: Navigation item label.
  • background: Valid color value or image. Default value: "#639" (my thoughts are with you and your family, Eric).
  • align: Horizontal alignment. Default: "center". Other values: "left", "center" or "justify".
  • valign: Vertical alignment. Default: "middle". Other values: "top" or "bottom".

Supported Browsers:

Evergreen browsers plus Internet Explorer 10 and above.

Check it on this page and have fun!

thumb

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.

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.

Parallax Page Scroll Effect with Pure CSS3. No JavaScript. No Hassle.

You gonna love this one for it’s simple HTML, elegant CSS and lack of any JavaScript. Here’s how the CSS3-only parallax scroll effect was built:

The Slides:

Each slide is a <section /> element with display: table. This allows 100% width and height relative to the viewport. Of course you may also use any other height and the slides will automatically auto-adjust:

body > section
{
    position: relative;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    font-family: "Open Sans", Helvetica, Arial, Sans-serif;
    text-shadow: 1px 1px 0 #000;
}

The rest is as easy as:

Nested <div /> Elements…

… Which have been set as display table-cell. They also hold the content of each slide and you can apply any style to them.

The Actual Parallax Effect…

… Has been achieved by setting a background image as <section />‘s generated content by using the before:: pseudo-element. I decided to use generated content instead of a simple background image, because in this manner I am also able to apply CSS/SVG filter effects without affecting the content of the slide:

body > section::before
{
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 background-size: cover;
 background-repeat: no-repeat;
 background-attachment: fixed;
}

body > section:nth-child(2)::before
{
 background-image: url("images/green.jpg"); /* slide with a background image */
}

body > section:nth-child(3)::before
{
 background: #b01e00; /* slide with a solid color background */
}

I must admit I am not much of a fan of parallax effects, but I admire the well crafted ones, and there are stunning examples on the Internet. Yet I had real fun trying to achieve a similar effect with CSS only. Still in the thing called HTML5 Web Components, I am planning to create a more sophisticated (with quick navigation, configuration options and animations) custom tag out of this soon, so check back in a few days!

Check the demo on this page. You will also find a download link there. Make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

UPDATE (September 27, 2014): I just released a similar parallax UI, but wrapped as a custom HTML5 Web Component, maybe you will be interested to check it out.