Login / Join
Clip Image to Text Background
submitted on 26/01/2013 by
Codicode
+ infos
Config
Embed
Share
Clip Image to Text Background
by
Codicode
Cross-browser COD that fill a text background with an Image using SVG text clipping mask.
The svg object will apply the text as a mask over the image.
by Chtiwi Malek.
http://www.codicode.com
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
+ Css file(s) :
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="295" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<div align="center"> <div id="bkDiv"> <svg width="100%" height="100%"> <defs> <mask id="theMask"> <rect width="100%" height="100%" fill="#fff" /> <text id="theText" x="3" y="130" fill="#000">Welcome</text> </mask> </defs> <rect width="100%" height="100%" mask="url(#theMask)" fill="#fff" /> </svg> </div> </div>
CSS
/* by Chtiwi Malek */ /* http://www.codicode.com */ body { background-color:#fff; } #bkDiv { background-image : url('http://www.slapix.com/img/i1/blue_shine.jpg'); height:150px; width:600px; } #theText { font-size:135px; font-family:Impact, Charcoal, sans-serif; stroke:#000; stroke-width:5px; fill-opacity:0.5; }
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact