From 668855216c04f6042200fb0dfb27d34faf1b9642 Mon Sep 17 00:00:00 2001 From: Kamil Kuzminski Date: Thu, 2 Jul 2015 13:52:58 +0200 Subject: [PATCH 1/4] Initial commit --- index.html | 35 +++++++++++++++++++++++++++++++++++ main.css | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+) create mode 100644 index.html create mode 100644 main.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..4ef688c --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + + jQuery Gradientify plugin - demo + + + + + + + + + + +
+

jQuery Gradientify

+

A jQuery plugin that provides CSS gradient transitions.

+

Read more on GitHub

+
+ + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..efe25cd --- /dev/null +++ b/main.css @@ -0,0 +1,38 @@ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +body { + color: #ffffff; + font: 18px/1.5 'Ubuntu', sans-serif; +} + +h1 { + margin-top: 0; + margin-bottom: 1em; +} + +p { + margin-top: 0; + margin-bottom: 2em; +} + +h1 { + font-size: 60px; + font-weight: bold; +} + +a { + color: #ffffff; + display: inline-block; + border: 1px solid #ffffff; + padding: 8px 16px; + text-decoration: none; +} + +#wrapper { + padding-top: 25%; + text-align: center; +} \ No newline at end of file From 5220180411e56984322a823873786e9fbf0daf12 Mon Sep 17 00:00:00 2001 From: Kamil Kuzminski Date: Thu, 2 Jul 2015 13:56:48 +0200 Subject: [PATCH 2/4] Fix the pages --- index.html | 4 ++-- jquery.gradientify.min.js | 16 ++++++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 jquery.gradientify.min.js diff --git a/index.html b/index.html index 4ef688c..678f556 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,11 @@ - + - +
diff --git a/jquery.gradientify.min.js b/jquery.gradientify.min.js new file mode 100644 index 0000000..c61d3bc --- /dev/null +++ b/jquery.gradientify.min.js @@ -0,0 +1,16 @@ +/* Modernizr 2.8.3 (Custom Build) | MIT & BSD + * Build: http://modernizr.com/download/#-cssgradients-prefixes + */ +window.Modernizr=function(Z,Y,X){function F(b){R.cssText=b}function E(d,c){return F(O.join(d+";")+(c||""))}function D(d,c){return typeof d===c}function C(d,c){return !!~(""+d).indexOf(c)}function B(g,c,j){for(var i in g){var h=c[g[i]];if(h!==X){return j===!1?g[i]:D(h,"function")?h.bind(j||c):h}}return !1}var W="2.8.3",V={},U=Y.documentElement,T="modernizr",S=Y.createElement(T),R=S.style,Q,P={}.toString,O=" -webkit- -moz- -o- -ms- ".split(" "),N={},M={},L={},K=[],J=K.slice,I,H={}.hasOwnProperty,G;!D(H,"undefined")&&!D(H.call,"undefined")?G=function(d,c){return H.call(d,c)}:G=function(d,c){return c in d&&D(d.constructor.prototype[c],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(a){var h=this;if(typeof h!="function"){throw new TypeError}var g=J.call(arguments,1),f=function(){if(this instanceof f){var b=function(){};b.prototype=h.prototype;var d=new b,c=h.apply(d,g.concat(J.call(arguments)));return Object(c)===c?c:d}return h.apply(a,g.concat(J.call(arguments)))};return f}),N.cssgradients=function(){var e="background-image:",d="gradient(linear,left top,right bottom,from(#9f9),to(white));",f="linear-gradient(left top,#9f9, white);";return F((e+"-webkit- ".split(" ").join(d+e)+O.join(f+e)).slice(0,-e.length)),C(R.backgroundImage,"gradient")};for(var A in N){G(N,A)&&(I=A.toLowerCase(),V[I]=N[A](),K.push((V[I]?"":"no-")+I))}return V.addTest=function(e,c){if(typeof e=="object"){for(var f in e){G(e,f)&&V.addTest(f,e[f])}}else{e=e.toLowerCase();if(V[e]!==X){return V}c=typeof c=="function"?c():c,typeof enableClasses!="undefined"&&enableClasses&&(U.className+=" "+(c?"":"no-")+e),V[e]=c}return V},F(""),S=Q=null,V._version=W,V._prefixes=O,V}(this,this.document); +/** + * jQuery Gradientify plugin 1.0.0 + * + * Provides animating CSS gradients. + * Based on http://opticalcortex.com/animating-css-gradients/ by Mike Byrne. + * + * @author Codefog + * @author Kamil Kuzminski + * @license MIT License + * @see http://opticalcortex.com/animating-css-gradients/ + */ +(function(e,c,a,g){var d="gradientify",f={angle:"0deg",fps:60,gradients:{},transition_time:8};function b(i,h){this.element=i;this.settings=e.extend({},f,h);this._defaults=f;this._name=d;this.init()}e.extend(b.prototype,{init:function(){if(!Modernizr.cssgradients){return}this.currentIndex=0;this.nextIndex=1;this.steps_count=0;this.steps_total=Math.round(this.settings.transition_time*this.settings.fps);this.rgb_steps={start:[0,0,0],stop:[0,0,0]};this.rgb_values={start:[0,0,0],stop:[0,0,0]};this.prefixes=["-webkit-","-moz-","-o-","-ms-",""];this.color1=null;this.color2=null;this.calculateSteps();setInterval(function(){this.updateGradient.apply(this)}.bind(this),Math.round(1000/this.settings.fps))},setNext:function(h){return(h+1this.steps_total){this.steps_count=0;this.currentIndex=this.setNext(this.currentIndex);this.nextIndex=this.setNext(this.nextIndex);this.calculateSteps()}}});e.fn[d]=function(h){return this.each(function(){if(!e.data(this,"plugin_"+d)){e.data(this,"plugin_"+d,new b(this,h))}})}})(jQuery,window,document); \ No newline at end of file From 33e93b71dd2b98ac744451e4d529acaba36f3489 Mon Sep 17 00:00:00 2001 From: Kamil Kuzminski Date: Sat, 11 Jul 2015 11:09:32 +0200 Subject: [PATCH 3/4] Fixed the horizontal and vertical centering of the content --- index.html | 2 +- main.css | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 678f556..65ac817 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - + diff --git a/main.css b/main.css index efe25cd..b1ef348 100644 --- a/main.css +++ b/main.css @@ -33,6 +33,12 @@ a { } #wrapper { - padding-top: 25%; + position: absolute; + top: 50%; + left: 50%; + margin-top: -130px; + margin-left: -300px; + height: 260px; + width: 600px; text-align: center; } \ No newline at end of file From c93fa90585fe9c96ce59364c4c2e6aa3eb3485ba Mon Sep 17 00:00:00 2001 From: Kamil Kuzminski Date: Sat, 11 Jul 2015 11:11:02 +0200 Subject: [PATCH 4/4] Decrease the margin of the headline --- main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.css b/main.css index b1ef348..e7d78fa 100644 --- a/main.css +++ b/main.css @@ -11,7 +11,7 @@ body { h1 { margin-top: 0; - margin-bottom: 1em; + margin-bottom: 0.5em; } p {