Skip to content

Instantly share code, notes, and snippets.

@danschultzer

danschultzer/elegant_flexible_colors.css

Last active December 15, 2015 16:29
Show Gist options
  • Save danschultzer/5289717 to your computer and use it in GitHub Desktop.
Save danschultzer/5289717 to your computer and use it in GitHub Desktop.
Download ZIP
Elegant flexible coloring in Javascript. Read blog post: http://dreamconception.com/tech/elegant-flexible-automatic-coloring-in-javascript/
Raw
elegant_flexible_colors.css
body {
font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}
.color_js_button {
border:none;
display:inline-block;
padding: 8px 12px;
border-radius: 4px;
margin-right: 4px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px;
}
span.show_color {
text-shadow: 1px 1px rgba(0, 0, 0, .5);
}
.show_speech_bubble {
position:relative;
padding:15px 30px;
margin:0;
color:#000;
background:#f3961c; /* default background for browsers without gradient support */
/* css3 */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
/* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
-webkit-border-top-left-radius:25px 50px;
-webkit-border-top-right-radius:25px 50px;
-webkit-border-bottom-right-radius:25px 50px;
-webkit-border-bottom-left-radius:25px 50px;
-moz-border-radius:25px / 50px;
border-radius:25px / 50px;
}
/* creates the larger triangle */
.show_speech_bubble:before {
content:"";
position:absolute;
bottom:-10px;
right:20px;
border-width:0 0 10px 15px;
border-style:solid;
border-color:transparent #f3961c;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates triangle */
.show_speech_bubble:after {
content:"";
position:absolute;
bottom:-10px;
right:30px;
border-width:0 0 10px 5px;
border-style:solid;
border-color:transparent #fff;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
.show_ios_app_icon {
background: #90C7DE;
width: 128px;
height: 128px;
border-radius: 19px;
overflow:hidden;
border: solid 1px #666;
position: relative;
display:inline-block;
z-index: 10;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
}
.show_ios_app_icon .gloss {
background: #56ABCB;
height: 72px;
width: 100%;
overflow: hidden;
position: relative;
z-index: 5;
-webkit-box-shadow: 0px 0px 5px rgba(255, 255, 255, .3);
-moz-box-shadow: 0px 0px 5px rgba(255, 255, 255, .3);
box-shadow: 0px 0px 5px rgba(255, 255, 255, .3);
border-top-right-radius: 85px 10px;
border-top-left-radius: 85px 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
position: absolute;
bottom: 0px;
display:block;
}
.show_ios_app_icon .text {
font: bold 90px Tahoma;
text-align:center;
z-index: 200;
position: relative;
display:block;
color: white;
}
.show_pattern {
display:inline-block;
width:120px;
height:120px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
border-radius:4px;
}
Raw
elegant_flexible_colors.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Elegant Flexible (Automatic) Colors in Javascript by Dan Schultzer</title>
<link rel="stylesheet" type="text/css" href="./elegant_flexible_colors.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./elegant_flexible_colors.js"></script>
</head>
<body>
<p>
Example of elegant flexible coloring with Javascript by Dan Schultzer. Find more information at <a href="http://dreamconception.com/tech/elegant-flexible-automatic-coloring-in-javascript/" target="_blank">http://dreamconception.com/tech/elegant-flexible-automatic-coloring-in-javascript/</a>
</p>
<p>
<button onclick="javascript:colorize(randomColor());">Randomize Color</button>
</p>
<p>
Color: <span class="show_color" style="color: rgb(23, 155, 153);">#179B99</span>
</p>
<p>
Text color: <span class="color_js_button show_contrast" style="color: rgb(255, 255, 255); background-color: rgb(23, 155, 153);">#179B99</span>
</p>
<p>
Secondary color (20% diff): <span class="color_js_button show_secondary1" style="color: rgb(255, 255, 255); background-color: rgb(23, 155, 153);">#179B99</span> <span class="color_js_button show_secondary2" style="color: rgb(255, 255, 255); background-color: rgb(60, 186, 184);">#3cbab8</span>
</p>
<p>
Gradient: <span class="color_js_button show_gradient" style="background-image: linear-gradient(rgb(60, 186, 184) 0%, rgb(60, 186, 184) 49%, rgb(23, 155, 153) 51%, rgb(23, 155, 153) 100%); background-color: rgb(23, 155, 153); zoom: 1; color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;">#179B99</span>
</p>
<p>
Examples:<br>
<span class="show_speech_bubble" style="background-image: linear-gradient(rgb(60, 186, 184) 0%, rgb(60, 186, 184) 49%, rgb(23, 155, 153) 51%, rgb(23, 155, 153) 100%); background-color: rgb(23, 155, 153); zoom: 1; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.298039) -1px -1px 0px; background-position: initial initial; background-repeat: initial initial;">#179B99</span>
<span class="show_ios_app_icon" style="background-color: rgb(60, 186, 184);"><span class="gloss" style="background-color: rgb(23, 155, 153);"></span><span class="text" style="color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.298039) -1px -1px 0px;">dc</span></span>
<span class="show_pattern" style="background-image: linear-gradient(45deg, rgb(60, 186, 184) 23px, transparent 23px), linear-gradient(45deg, rgb(60, 186, 184) 23px, transparent 23px, transparent 45px, rgb(23, 155, 153) 45px, rgb(23, 155, 153) 67px, transparent 67px), linear-gradient(-45deg, rgb(60, 186, 184) 11px, transparent 11px, transparent 34px, rgb(60, 186, 184) 34px, rgb(60, 186, 184) 56px, transparent 56px, transparent 79px, rgb(60, 186, 184) 79px); background-attachment: initial, initial, initial; background-origin: initial, initial, initial; background-clip: initial, initial, initial; background-color: rgb(23, 155, 153); background-size: 64px, 64px, 64px; background-position: 32px 32px, 0px 0px, 0px 0px; background-repeat: ;"></span>
</p>
</body>
</html>
Raw
elegant_flexible_colors.js
/* Convert color
*/
function correctHex(color){
color=String(color).replace(/#[^0-9a-fA-F]/gi,"");
if(color.length<6){
color='#'+color[1]+color[1]+color[2]+color[2]+color[3]+color[3];
}
return color;
}
/* Text color
* http://stackoverflow.com/questions/4726344/how-do-i-change-text-color-determined-by-the-background-color
*/
function textColor(color){
var treshold = 105;
var delta = parseInt(color.substr(1,2),16) * 0.299 + parseInt(color.substr(3,2),16) * 0.587 + parseInt(color.substr(5,2),16) * 0.114;
return ((255 - delta) < treshold) ? "#000000" : "#ffffff";
}
/* Color luminence
* http://www.sitepoint.com/javascript-generate-lighter-darker-color/
*/
function colorLuminance(color, lum) {
color=color.replace(/^\s*#|\s*$/g,"");
lum=lum||0;
// convert to decimal and change luminosity
var color2="#",c,i;
for (i=0;i<3;i++){
c=parseInt(color.substr(i*2,2),16);
if(c<50)c=50;
c=Math.round(Math.min(Math.max(0,c+(c*lum)),255)).toString(16);
color2+=("00"+c).substr(c.length);
}
return color2;
}
/* Calculate the glossy colors
*/
function calculateGlossyColors(color, textColor, shine)
{
if (textColor == "#000000") {
var color2 = color;
color = colorLuminance(color,-shine);
} else {
var color2 = colorLuminance(color,shine);
}
return {color: color, color2: color2}
}
/* Simple linear top-down gradient
*/
function gradientBuilder(color, color2, start, middle1, middle2, end){
return "background-image:-moz-linear-gradient(top, " + color2 + " " + start + ", " + color2 + " " + middle1 + ", " + color + " " + middle2 + ", " + color + " " + end + ");" /* FF3.6+ */
+"background-image:-webkit-gradient(linear, left top, left bottom, color-stop(" + start + "," + color2 + "), color-stop(" + middle2 + "," + color2 + "), color-stop(" + middle2 + "," + color + "), color-stop(" + end + "," + color + "));" /* Chrome,Safari4+ */
+"background-image:-webkit-linear-gradient(top, " + color2 + " " + start + ", " + color2 + " " + middle1 + ", " + color + " " + middle2 + ", " + color + " " + end + ");" /* Chrome10+,Safari5.1+ */
+"background-image:-o-linear-gradient(top, " + color2 + " " + start + ", " + color2 + " " + middle1 + ", " + color + " " + middle2 + ", " + color + " " + end + "));" /* Opera 11.10+ */
+"background-image:-ms-linear-gradient(top, " + color2 + " " + start + ", " + color2 + " " + middle1 + ", " + color + " " + middle2 + ", " + color + " " + end + "));" /* IE10+ */
+"background:linear-gradient(to bottom, " + color2 + " " + start + ", " + color2 + " " + middle1 + ", " + color + " " + middle2 + ", " + color + " " + end + ");" /* W3C */
// IE gradient is disabled because it makes tooltip's not being displayed!
+"filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'" + color2 + "\',endColorstr=\'" + color +"\',GradientType=0);zoom:1;" /* IE6-9, careful, they always mess up */
}
/* Method to color all locations in the file (using jQuery for simplicity)
*/
function colorize(color)
{
// 1. Starting from just one base color!
color = correctHex(color);
jQuery('.show_color').text(color).css({color:color});
// 2. What is a readable contrast?
var text_color = textColor(color);
jQuery('.show_contrast').text(color).css({color: text_color, backgroundColor:color});
// 3. Time for the glossy color!
var colors = calculateGlossyColors(color, text_color, 0.2);
jQuery('.show_secondary1').text(colors.color).css({color: text_color, backgroundColor: colors.color});
jQuery('.show_secondary2').text(colors.color2).css({color: text_color, backgroundColor: colors.color2});
// 4. Now it get’s interesting, gradients!
var css_gradient = gradientBuilder(colors.color, colors.color2, '0%', '49%', '51%', '100%');
jQuery('.show_gradient').text(color).attr("style", css_gradient).css({color: text_color, backgroundColor: colors.color});
// 5. Conclusion
jQuery('.show_final').text(color).attr("style", css_gradient).css({color: text_color, backgroundColor: colors.color, textShadow: (text_color=="#000000"?"0 1px 0 rgba(255,255,255,0.3)":"-1px -1px 0 rgba(0,0,0,0.3)")});
// Speech bubble
// http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
$('head').append('<style>.show_speech_bubble:before{border-color: transparent ' + colors.color + ' !important;}</style>');
jQuery('.show_speech_bubble').text(color).attr("style", css_gradient).css({color: text_color, backgroundColor: colors.color, textShadow: (text_color=="#000000"?"0 1px 0 rgba(255,255,255,0.3)":"-1px -1px 0 rgba(0,0,0,0.3)")});
// iOS app icon
// http://stackoverflow.com/questions/7880497/css-icon-ios-osx-style
jQuery('.show_ios_app_icon .text').css({color: text_color, textShadow: (text_color=="#000000"?"0 1px 0 rgba(255,255,255,0.3)":"-1px -1px 0 rgba(0,0,0,0.3)")});
jQuery('.show_ios_app_icon .gloss').css({backgroundColor: colors.color});
jQuery('.show_ios_app_icon').css({backgroundColor: colors.color2});
// CSS3 Pattern
// http://lea.verou.me/css3patterns/#arrows
function isPropertySupported(property){return property in document.body.style;}
linear_gradient = 'linear-gradient';
if (isPropertySupported('WebkitBackgroundSize')) linear_gradient = '-webkit-linear-gradient';
jQuery('.show_pattern').css({background:
linear_gradient + "(45deg, " + colors.color2 + " 23px, transparent 23px)32px 32px,"
+ linear_gradient + "(45deg, " + colors.color2 + " 23px, transparent 23px,transparent 45px, " + colors.color + " 45px, " + colors.color + " 67px, transparent 67px)0px 0px,"
+ linear_gradient + "(-45deg, " + colors.color2 + " 11px, transparent 11px, transparent 34px," + colors.color2 + " 34px," + colors.color2 + " 56px,transparent 56px,transparent 79px," + colors.color2 + " 79px)0px 0px",
backgroundPosition: "32px 32px 0 0 0 0 !important",
backgroundColor: colors.color,
backgroundSize: "64px 64px, 64px 64px, 64px 64px"}).addClass('hide').removeClass('hide');
// Hover effect
$(".show_final").mouseenter(function(){
$(this).addClass("hover");
});
$(".show_final").mouseleave(function(){
$(this).removeClass("hover");
});
}
/* Default colorize call */
jQuery(document).ready(function(){colorize("#179B99");});
/* Function to do random colors */
function randomColor(){a=6;b='';while(a--){b+=''+(~~(Math.random()*16)).toString(16);}return '#'+b.toUpperCase();}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment