HTML5, CSS3 & JS Experiments

By Martin Ivanov

Ebook Reader

X-Reader is a HTML5 Web Component, recreating the layout and controls of e-book readers.

<acidjs-xreader 
    booktitle="A Clockwork Orange" 
    author="Anthony Burgess" 
    source="books/a-clockwork-orange.html">
</acidjs-xreader>
<acidjs-xreader 
    booktitle="Nineteen Eighty-Four" 
    author="George Orwell" 
    controls 
    width="800" 
    height="600" 
    source="books/nineteen-eighty-four.html">
</acidjs-xreader>
<acidjs-xreader 
    width="320" 
    height="240" 
    defaultpage="1" 
    source="books/lorem.html">
</acidjs-xreader>

Demo

Default Size, Book Title, Author, Controls are Off



Custom Size, Controls are On, Book Title, Author



Custom Size, Custom Default Page, Controls are Off



Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XReader/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XReader/classes/XReader.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            <h4>Default Size, Book Title, Author, Controls are Off</h4>
            <acidjs-xreader id="book-1" booktitle="A Clockwork Orange" author="Anthony Burgess" source="pages/x-reader-html5-web-component/example/books/a-clockwork-orange.html"></acidjs-xreader>
            <br /><br />
            
            <h4>Custom Size, Controls are On, Book Title, Author</h4>
            <acidjs-xreader id="book-2" booktitle="Nineteen Eighty-Four" author="George Orwell" controls width="800" height="600" source="pages/x-reader-html5-web-component/example/books/nineteen-eighty-four.html"></acidjs-xreader>
            <br /><br />
            
            <h4>Custom Size, Custom Default Page, Controls are Off</h4>
            <acidjs-xreader id="book-3" width="320" height="240" defaultpage="1" source="pages/x-reader-html5-web-component/example/books/lorem.html"></acidjs-xreader>
            <br /><br />
        
/*
 * X-Reader HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/wemakesitesnet
 * @url developer blog http://martinivanov.net
 **/

/*
 * USAGE:
 * 1. If you are planning to use this component for a personal project, please retain the credits in the code. Donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS), however is highly appreciated.
 * 2. If you will use it on a live website, donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS) is required. 
 **/

acidjs-xreader nav,
acidjs-xreader button,
acidjs-xreader content,
acidjs-xreader nav input,
acidjs-xreader input[type="checkbox"],
acidjs-xreader input[type="checkbox"] + label
{
    position: absolute;
}

acidjs-xreader nav,
acidjs-xreader nav h1,
acidjs-xreader nav h2,
acidjs-xreader nav ul,
acidjs-xreader form > input[type="checkbox"] + label span::after,
acidjs-xreader form > input[type="checkbox"] + label span::before
{
    display: block;
}

acidjs-xreader,
acidjs-xreader nav *,
acidjs-xreader form > input[type="checkbox"] + label span
{
    display: inline-block;
}

acidjs-xreader button,
acidjs-xreader form > input[type="checkbox"] + label span::after,
acidjs-xreader form > input[type="checkbox"] + label span::before
{
    width: 1em;
}

acidjs-xreader *
{
    outline: 0;
    border: 0;
}

acidjs-xreader nav *,
acidjs-xreader form,
acidjs-xreader button
{
    margin: 0;
    padding: 0;
}

acidjs-xreader nav span:hover,
acidjs-xreader nav input:checked + span,
acidjs-xreader input[type="checkbox"]:checked ~ nav
{
    opacity: 1;
}

acidjs-xreader button,
acidjs-xreader nav span,
acidjs-xreader form > input[type="checkbox"] + label
{
    cursor: pointer;
}

acidjs-xreader form,
acidjs-xreader form > input[type="checkbox"] + label span::after,
acidjs-xreader form > input[type="checkbox"] + label span::before
{
    position: relative;
}

acidjs-xreader nav,
acidjs-xreader button,
acidjs-xreader form > input[type="checkbox"] + label span
{
    color: #fff;
}

acidjs-xreader nav,
acidjs-xreader nav button,
acidjs-xreader form > input[type="checkbox"] + label
{
    text-align: center;
}

acidjs-xreader,
acidjs-xreader *
{
    box-sizing: border-box;
}

acidjs-xreader nav input,
acidjs-xreader form > input[type="checkbox"]
{
    clip: rect(0, 0, 0, 0);
}

acidjs-xreader button,
acidjs-xreader content
{
    top: 0;
    bottom: 0;
}

acidjs-xreader content,
acidjs-xreader:hover button[name="next"]
{
    right: 0;
}

acidjs-xreader content,
acidjs-xreader:hover button[name="prev"]
{
    left: 0;
}

acidjs-xreader form > input[type="checkbox"] + label:hover span,
acidjs-xreader form > input[type="checkbox"]:checked + label span
{
    background: #000;
}

acidjs-xreader form > input[type="checkbox"] + label span::after,
acidjs-xreader form > input[type="checkbox"] + label span::before
{
    content: "";
    margin: auto;
    height: 0;
}

acidjs-xreader button,
acidjs-xreader form > input[type="checkbox"] + label span
{
    background: rgba(0, 0, 0, .5);
}

acidjs-xreader nav *,
acidjs-xreader content *
{
    font-weight: normal;
}

acidjs-xreader nav button,
acidjs-xreader form > input[type="checkbox"] + label span
{
    font-size: 1em;
    line-height: 1em;
}

acidjs-xreader
{
    vertical-align: top;
    border: solid 1px rgba(0, 0, 0, .5);
    overflow: hidden;
    font-family: "Arial Rounded MT", Arial, Sans-serif;
    cursor: default;
    font-size: 16px;
    background: #fff;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

acidjs-xreader button:-moz-focus-inner
{
    margin: 0;
    border: 0;
    padding: 0;
    outline: 0;
}

acidjs-xreader button::-moz-focus-inner
{
    margin: 0;
    border: 0;
    padding: 0;
    outline: 0;
}

acidjs-xreader content
{
    font-family: "Times New Roman", "Nueva Roman", Georgia, Garamond,  Serif;
    margin: 0;
    transition: margin .5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
    
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    
    -moz-column-count: 2;
    -moz-column-gap: 0;
    
    -ms-column-count: 2;
    -ms-column-gap: 0;
    
    column-count: 2;
    column-gap: 0;
    
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

acidjs-xreader content > div
{
    padding: 1em;
}

acidjs-xreader nav
{
    top: 10%;
    left: 10%;
    z-index: 5;
    width: 80%;
    height: 80%;
    background: rgba(0, 0, 0, .75);
    opacity: 0;
    overflow: auto;
    box-shadow: 0 0 1em .25em rgba(0, 0, 0, .5);
    transform: scale(0);
}

acidjs-xreader nav h1
{
    font-size: 2em;
}

acidjs-xreader nav ul
{
    vertical-align: middle;
}

acidjs-xreader form > input[type="checkbox"]:checked ~ nav
{
    transform: scale(1);
    transition: all .5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

acidjs-xreader nav span
{
    font-size: .9em;
    padding: .25em;
    opacity: .5;
    transition: opacity .5s;
}

acidjs-xreader nav input:checked + span
{
    transform: scale(1.25);
}

acidjs-xreader button
{
    font: bold 3em "Arial Rounded MT", Arial, Sans-serif;
    transition: all .5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

acidjs-xreader button[name="prev"]
{
    left: -5em;
}

acidjs-xreader button[name="next"]
{
    right: -5em;
}

acidjs-xreader form > input[type="checkbox"] + label
{
    z-index: 10;
    width: 100%;
}

acidjs-xreader form > input[type="checkbox"] + label span
{
    margin: .25em 0 0;
    width: 1.5em;
    height: 1.5em;
    font-weight: bold;
    
    transition: background .5s;
}

acidjs-xreader form > input[type="checkbox"] + label span::before
{
    top: 4px;
    border-top: solid 2px #fff;
}

acidjs-xreader form > input[type="checkbox"] + label span::after
{
    border-bottom: solid 2px #fff;
}

acidjs-xreader nav button
{
    z-index: 15;
    top: .25em;
    right: .25em;
    width: 1.25em;
    height: 1.25em;
    text-transform: lowercase;
    border-radius: 1em;
    background: rgba(255, 255, 255, .5);
    color: rgba(0, 0, 0, .75);
}