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