This pen shows how CSS gradients can be used to create an animated gradient underline for a link hover state with relative sizing. Link text and underline colour can be changed by updating a single CSS variable.
A Pen by George W. Park on CodePen.
CmdUtils.CreateCommand({ | |
name: "filestube", | |
takes: {"url": noun_arb_text}, | |
icon: "http://static.filestube.com/files/images/favicon.ico", | |
homepage: "http://twitter.com/djsnipa1", | |
author: { name: "djsnipa1", email: "[email protected]"}, | |
license: "MPL,GPL", | |
description: "Search for files on filestube.com", | |
help: "Select a movie, actor, tv show... and issue netflix", |
makeSearchCommand({ | |
name: "hulu", | |
synonyms: ["video"], | |
url: "http://www.hulu.com/videos/search?query={QUERY}", | |
icon: "http://www.hulu.com/favicon.ico", | |
description: "Searches <a href=\"http://www.hulu.com\">Hulu</a> for videos matching your words.", | |
preview: function( pblock, thing ) { | |
if (thing.text < 1) {pblock.innerHTML = "Search <b>Hulu</b>"; return;} | |
jQuery.get(this.url.replace("{QUERY}", thing.text), | |
function (doc) |
// Use Gists to store code you would like to remember later on | |
console.log(window); // log the "window" object to the console |
<div class="animation-wrapper"> | |
<div class="sphere-animation"> | |
<svg class="sphere" viewBox="0 0 440 440" stroke="rgba(80,80,80,.35)"> | |
<defs> | |
<linearGradient id="sphereGradient" x1="5%" x2="5%" y1="0%" y2="15%"> | |
<stop stop-color="#373734" offset="0%"/> | |
<stop stop-color="#242423" offset="50%"/> | |
<stop stop-color="#0D0D0C" offset="100%"/> | |
</linearGradient> | |
</defs> |
<div class="animation-wrapper"> | |
<div class="sphere-animation"> | |
<svg class="sphere" viewBox="0 0 440 440" stroke="rgba(80,80,80,.35)"> | |
<defs> | |
<linearGradient id="sphereGradient" x1="5%" x2="5%" y1="0%" y2="15%"> | |
<stop stop-color="#373734" offset="0%"/> | |
<stop stop-color="#242423" offset="50%"/> | |
<stop stop-color="#0D0D0C" offset="100%"/> | |
</linearGradient> | |
</defs> |
let searchlimit="50" | |
set cncpcompletion " (requires you to set the nextCompletionResult keybinding in the chrome://extensions page (bottom right)) | |
" Automatically show a list of command completions when the command bar is opened | |
set completeonopen | |
" put tab indicies in title | |
" set showtabindices |
<div id="container"> | |
<p><a href="https://en.wikipedia.org/wiki/Red"> | |
RED | |
</a></p> | |
<p><a href="https://en.wikipedia.org/wiki/Blue"> | |
BLUE | |
</a></p> |
This pen shows how CSS gradients can be used to create an animated gradient underline for a link hover state with relative sizing. Link text and underline colour can be changed by updating a single CSS variable.
A Pen by George W. Park on CodePen.
<div class="wrap"> | |
<svg width="28.2" height="31" viewBox="0 0 28.2 31"> | |
<path id="st0" fill="none" stroke-width="0.2" stroke="#3D8CD0" d="M27.7,13.1v13.6c-0.7,0.5-1.4,1-2.3,1.4c-0.9,0.5-1.8,0.9-2.9,1.2s-2.2,0.6-3.4,0.9c-1.2,0.2-2.5,0.3-3.9,0.3 | |
c-2.5,0-4.6-0.3-6.5-1c-1.8-0.7-3.4-1.7-4.6-3c-1.2-1.3-2.1-2.9-2.7-4.7c-0.6-1.8-0.9-3.9-0.9-6.1c0-2.3,0.3-4.5,0.9-6.3 | |
S3,5.8,4.2,4.5c1.2-1.3,2.7-2.3,4.5-3c1.8-0.7,3.8-1,6.1-1c2,0,3.8,0.3,5.3,0.8c1.5,0.5,2.8,1.2,3.8,2.1c1,0.9,1.8,1.9,2.4,3.1 | |
c0.6,1.2,1,2.4,1.2,3.7l-9.1,0.8c-0.2-1-0.6-1.8-1.2-2.2c-0.6-0.4-1.4-0.6-2.4-0.6c-1.7,0-3,0.6-3.8,1.7c-0.8,1.1-1.2,3-1.2,5.6 | |
c0,2.7,0.4,4.6,1.3,5.8c0.9,1.2,2.4,1.8,4.5,1.8c1.4,0,2.6-0.2,3.6-0.6V20h-3.8v-6.9H27.7z"/> | |
</svg> | |
</div> |