Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here

gradients

Gradients!

Subscribe to updates I use gradients


Statistics on gradients

Number of watchers on Github 233
Number of open issues 3
Average time to close an issue 3 days
Main language HTML
Open pull requests 2+
Closed pull requests 1+
Last commit over 4 years ago
Repo Created about 5 years ago
Repo Last Updated almost 3 years ago
Size 30 KB
Homepage http://mrmrs.io/g...
Organization / Authormrmrs
Contributors1
Page Updated
Do you use gradients? Leave a review!
View open issues (3)
View gradients activity
View on github
Book a Mock Interview With Me (Silicon Valley Engineering Leader, 100s of interviews conducted)
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating gradients for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Gradients

1.0.0

CSS module for quickly setting gradients with single purpose classes.

Install

npm install --save-dev gradients

or download the css on github and include in your project:

git clone git@github.com:mrmrs/gradients

The Code

/*
 *
 * GRADIENTS.CSS
 * v.1.0.0
 * @mrmrs
 *
 * Each color has a class for setting a gradient on
 * text & background
 *
 * - Aqua
 * - Blue
 * - Navy
 * - Teal
 * - Green
 * - Lime
 * - Yellow
 * - Orange
 * - Red
 * - Fuchshia
 * - Purple
 * - Maroon
 *
 */


.bg-aqua-gradient {
  background: rgba(127,219,255,1);
  background: -webkit-linear-gradient(top, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%);
  background: linear-gradient(to bottom, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%);
}

.bg-blue-gradient {
  background: rgba(0,116,217,1);
  background: -webkit-linear-gradient(top, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%);
  background: linear-gradient(to bottom, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%);
}

.bg-navy-gradient {
  background: rgba(0,32,63,1);
  background: -webkit-linear-gradient(top, rgba(0,32,63,1) 0%, rgba(0,10,20,1) 100%);
  background: linear-gradient(to bottom, rgba(0,32,63,1) 0%, rgba(0,10,20,1) 100%);
}

.bg-teal-gradient {
  background: rgba(57,204,204,1);
  background: -webkit-linear-gradient(top, rgba(57,204,204,1) 0%, rgba(34,122,122,1) 100%);
  background: linear-gradient(to bottom, rgba(57,204,204,1) 0%, rgba(34,122,122,1) 100%);
}

.bg-green-gradient {
  background: rgba(46,204,64,1);
  background: -webkit-linear-gradient(top, rgba(46,204,64,1) 0%, rgba(28,122,39,1) 100%);
  background: linear-gradient(to bottom, rgba(46,204,64,1) 0%, rgba(28,122,39,1) 100%);
}

.bg-lime-gradient {
  background: rgba(1,255,111,1);
  background: -webkit-linear-gradient(top, rgba(1,255,111,1) 0%, rgba(2,163,72,1) 100%);
  background: linear-gradient(to bottom, rgba(1,255,111,1) 0%, rgba(2,163,72,1) 100%);
}

.bg-yellow-gradient {
  background: rgba(255,221,0,1);
  background: -webkit-linear-gradient(top, rgba(255,221,0,1) 0%, rgba(184,147,0,1) 100%);
  background: linear-gradient(to bottom, rgba(255,221,0,1) 0%, rgba(184,147,0,1) 100%);
}

.bg-orange-gradient {
  background: rgba(255,133,27,1);
  background: -webkit-linear-gradient(top, rgba(255,133,27,1) 0%, rgba(255,80,27,1) 100%);
  background: linear-gradient(to bottom, rgba(255,133,27,1) 0%, rgba(255,80,27,1) 100%);
}

.bg-red-gradient {
  background: rgba(246,46,36,1);
  background: -webkit-linear-gradient(top, rgba(246,46,36,1) 0%, rgba(255,54,121,1) 100%);
  background: linear-gradient(to bottom, rgba(246,46,36,1) 0%, rgba(255,54,121,1) 100%);
}

.bg-fuchsia-gradient {
  background: rgba(240,18,188,1);
  background: -webkit-linear-gradient(top, rgba(240,18,188,1) 0%, rgba(163,11,128,1) 100%);
  background: linear-gradient(to bottom, rgba(240,18,188,1) 0%, rgba(163,11,128,1) 100%);
}

.bg-purple-gradient {
  background: rgba(176,13,201,1);
  background: -webkit-linear-gradient(top, rgba(176,13,201,1) 0%, rgba(107,7,122,1) 100%);
  background: linear-gradient(to bottom, rgba(176,13,201,1) 0%, rgba(107,7,122,1) 100%);
}


.bg-maroon-gradient {
  background: rgba(204,31,115,1);
  background: -webkit-linear-gradient(top, rgba(204,31,115,1) 0%, rgba(133,20,75,1) 100%);
  background: linear-gradient(to bottom, rgba(204,31,115,1) 0%, rgba(133,20,75,1) 100%);
}


Author

mrmrs

License

The MIT License (MIT)

Copyright (c) 2015 @mrmrs

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the Software), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

gradients open issues Ask a question     (View All Issues)
  • about 5 years Declare hex fallback for ie6-8 support
gradients open pull requests (View All Pulls)
  • feat(IE fallbacks): add fallback colors for IE 6-8
  • Fix mixed HTTP / HTTPS content
gradients questions on Stackoverflow (View All Questions)
  • Unaggregated gradients / gradients per example in tensorflow
  • variable-length rnn padding and mask out padding gradients
  • creating gradients in swift behind an SKView
  • OpenCV: gradients for a line
  • Compute Vertical Gradients for License Plate Localization
  • Is there a way to create conic gradients with fabric.js?
  • Minimizing functions with large gradients using `scipy.optimize.minimize`
  • How to implement sample mean of gradients in Theano?
  • HTML5 Canvas globalCompositeOperation for overlaying gradients not adding up to higher intensity?
  • How can I minimize a function in Python, without using gradients, and using constraints and ranges?
  • Create color range with radial gradients using d3.js
  • Angular svg or canvas to use colour gradients
  • CSS3 Gradients image to transparent
  • Why does my TensorFlow Convnet (attempted) training result in NaN gradients?
  • Can I apply gradients created from a canvas context to other canvas contexts?
  • Alpha gradients not smooth in WebGL when using premultiplied alpha
  • How to process gradients with a Dimension size of None
  • How can I mix a base64 encoded background image with crossbrowser gradients?
  • Smooth CSS gradients
  • Cannot gather gradients for GradientDescentOptimizer in TensorFlow
  • CSS3 Using background images and cross-browser gradients in the same line
  • How to get the gradients of loss with respect to activations in Tensorflow
  • histogram of oriented gradients (HOG) features matlab
  • tf.Print() causing an error with gradients
  • Check the gradients using finite differences
  • highcharts, four aeraranges with linear gradients
  • How to compute gradients to fool an image classifier?
  • Making border-image work with gradients
  • Efficiently grab gradients from TensorFlow?
  • Gradients with Javascript both radial and linear?
gradients list of languages used
Other projects in HTML
Powered by Autocode - Instant Webhooks, Scripts and APIs
Autocode logo wordmark