HTML5, CSS3 & JS Experiments

By Martin Ivanov

Modern Memes

AcidJs.Meme is a fun experiment with HTML5 Web Components, for creating memes as simple HTML tags:

<acidjs-xmeme 
    src="images/image-01.jpg" 
    caption-top="I don't always design websites" 
    caption-bottom="But when I do, I do it directly with CSS3">
</acidjs-xmeme>

If you are interested in other HTML5 Web Components extending images you may want to check X-Reflect and X-Image.

Demo





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.XMeme/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.XMeme/classes/XMeme.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

<acidjs-xmeme 
    src="pages/x-meme-html5-web-component/example/images/image-01.jpg" 
    caption-top="I don't always design websites" 
    caption-bottom="But when I do, I do it directly with CSS3">
</acidjs-xmeme>

<br /><br />

<acidjs-xmeme 
    src="pages/x-meme-html5-web-component/example/images/image-02.jpg" 
    caption-top="I don't always play the guitar" 
    caption-bottom="But when I do, I do it when my hoomans are sleeping">
</acidjs-xmeme>

<br /><br />

<acidjs-xmeme 
    src="pages/x-meme-html5-web-component/example/images/image-03.jpg" 
    caption-top="I don't always play the staring game" 
    caption-bottom="But when I do, I always win">
</acidjs-xmeme>

        
/*
 * X-Meme 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://acidmartin.wordpress.com/
 **/

acidjs-xmeme,
acidjs-xmeme *
{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

acidjs-xmeme
{
    visibility: visible !important;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: default;
    border: solid 1px #000;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: 2em;
}

acidjs-xmeme figure
{
    position: relative;
}

acidjs-xmeme img
{
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

acidjs-xmeme figcaption
{
    position: absolute;
    z-index: 5;
    width: 100%;
    padding: .25em;
    font: normal .75em Impact, Arial, Verdana, Sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    text-shadow: 3px 3px 0 #000,
                -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    word-wrap: break-word;
}

acidjs-xmeme figcaption:first-child
{
    top: 0;
}

acidjs-xmeme figcaption:last-child
{
    bottom: 0;
}