Login / Join
Interactive SVG Text background clipping mask
submitted on 20/03/2013 by
Codicode
+ infos
Config
Embed
Share
Interactive SVG Text background clipping mask
by
Codicode
A Css3 rainbow background is applyed to Text and when hovered, the text background will be animated.
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) :
//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js
+ 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="c8c" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<div id="bkDiv"> <svg width="100%" height="100%"> <defs> <mask id="theMask"> <rect width="100%" height="100%" fill="#fff" /> <text x="15" y="65" id="theText" fill="#000">Welcome to Codicode</text> </mask> </defs> <rect width="100%" height="100%" mask="url(#theMask)" fill="#fff" /> </svg> </div>
CSS
/* by Chtiwi Malek */ /* http://www.codicode.com */ body { background-color:#fff; } #bkDiv { cursor:pointer; margin:0px auto 0px auto; background: linear-gradient(0deg, transparent 0%, #31009c 10%, #000084 25%,#009cff 37%,#00bd00 50%,#fff700 62%,#ff6331 75%,#de0000 90%,transparent 100%); background-color: #333; background-size: 10px 125px; background-repeat:repeat; height:100px; width:650px; background-position:center -65px; transition: background-position 1s; } #bkDiv:hover { background-position:center 0px; } #theText { font-family:Impact, Charcoal, sans-serif; font-size:65px; stroke:#000; stroke-width:3px; fill-opacity:0.5; }
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact