HTML:
<div class=template>
<div id=sketch><canvas id=paint></canvas></div>
<div id=dropbox contenteditable></div>
<div id=persp>
<div class=tpl>
<p><span class=char1></span>...<span class=char20></span>
</div>
<div class=tpl><p></div>
... (49 times for perspective)
</div>
</div>
If You are curious about what elements are used in Your selected style, click on "Styles" and here click on Your selected style.
Those filters are not supported in Internet Explorer
Filter functions could be chained. For example:
.e{filter:blur(2px)grayscale(20%)}
.tpl p:after{color:#530;filter:drop-shadow(5px 5px 2px #777)url(#eroded)}
.tpl p:after{filter:url(#eroded)url(#diffused-light)}
with #filtersPicture/#filtersText just add as many funcions you like (even the same function more times)
(#filtersPicture/#filtersText are identical, so you may use #filtersPicture for text and vv.)
Filters could be cumulated. For example:
.tpl{filter:url(#filter1)} .tpl p{filter:url(#filter2)} .tpl p:after{filter:url(#filter3)}
(take care of filters order)
e{filter: hue-rotate(10deg) saturate(2) brightness(15%) contrast(200%) invert(100%) grayscale(.5) sepia(100%) blur(2px) drop-shadow(4px 4px 3px rgba(0,0,0,.7))
You may drag Your image to the Dropbox (template area) and style it.
Remooving image:
Firefox: Click on image (select) and hit Delete.
Webkit: Double click beside the image (or drag image till it changes color) and hit Delete.
(adding spaces before the image you may push it to the right. As if setting left margin)
blend-mode: color, color-burn, color-dodge, darken, difference, exclusion, hard-light, hue, lighten, luminosity, multiply, normal, overlay, saturation, screen, soft-light
initial, inherit, unset "e{isolation:isolate}"
chaine multiple blend-modes: background-blend-mode:difference,color-dodge
Notes:
-Chrome cuts some font letters that protrude the bearings. Add space before/after the text block.
Animations: bounce, fire, flash, flip, flipInX, flipInY, flipOutX, flipOutY, hinge, jump, pulse, rotate, rubberBand, shake, shakeit, speedIn, swing, tada, wobble
Use with Firefox (stylesheet definition works only in Firefox)
Here You can set your own filter. For example:
.tpl p:after{color:red;filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='distantLight' color-interpolation-filters='sRGB'><feGaussianBlur in='SourceAlpha' stdDeviation='6' result='B'/><feSpecularLighting in='B' specularExponent='48' surfaceScale='3' result='S' lighting-color='gold'><feDistantLight azimuth='25' elevation='60'/></feSpecularLighting>
<feComposite in='SourceGraphic' in2='L' operator='arithmetic' k2='1' k3='1'/></filter></svg>#distantLight")}
Now copy/paste the 'filter' part to your SVG.
<svg class=no-area>
<filter id='distantLight' color-interpolation-filters='sRGB'><feGaussianBlur in='SourceAlpha' stdDeviation='6' result='B'/><feSpecularLighting in='B' specularExponent='48' surfaceScale='3' result='S'><feDistantLight azimuth='25' elevation='60'/></feSpecularLighting>
<feComposite in='SourceGraphic' in2='L' operator='arithmetic' k2='1' k3='1'/></filter>
</svg>
(Note: removed color/lighting-color)
Style:
.tpl p:after{color:red;-webkit-filter:url(#distantLight);filter:url(#distantLight)}
*{lighting-color:gold}
"Your texture"
Drag here Your texture image
Set background for given element (only Firefox)
e{background:-moz-element(#texture)}
Languages
You may use any language text and characters!
Stylesheets accept only latin characters.
Turn the keybord to Your language and write Your text.
(only text and font !)
.tpl:before,.tpl p:before,.tpl p:after{content:"
январ"}
Same goes for font family. (if any)
.tpl {font-family:
феврал}
I included some fonts You may use without setting font family. (same as in calendars and name cards)
armenian, bengali, burmese, georgian, hindi, japanese(chinese), khmer, korean, malayalam
Vietnamese use the latin characters + some spacial like ứ,ă,ậ, that are not included in my fonts and will be displayed different. Set Your own font!
.tpl{font-family:sans-serif}
FONT SIZE MORE THAN 256px MAKES MAGIC. SUPER SMOOTH FONTS
