Login / Join
Interactive SVG Text background clipping mask (Firefox)
submitted on 19/03/2013 by
Codicode
+ infos
Config
Embed
Share
Interactive SVG Text background clipping mask (Firefox)
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) :
+ 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="0da" 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"></div> </div> <svg> <defs> <mask id="theMask"> <text x="10" y="70" id="theText" fill="#fff">Welcome to Codicode</text> </mask> </defs> </svg>
CSS
/* by Chtiwi Malek */ /* http://www.codicode.com */ body { background-color:#000; color:#fff; } #bkDiv { background: -webkit-linear-gradient(90deg, transparent 0%, #31009c 10%, #000084 25%,#009cff 37%,#00bd00 50%,#fff700 62%,#ff6331 75%,#de0000 90%,transparent 100%); 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 140px; background-repeat:repeat; height:100px; width:600px; mask: url(#theMask); background-position:center 0px; transition: background-position 1s; -webkit-transition: background-position 1s; } #bkDiv:hover { background-position:center 70px; } #theText { font-size:65px; font-family:impact; }
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact