Less Color Functions
How do I make an less color functions?
This pen will demonstrate about how to use color functions in less. Its pretty cool functionality if you want some different shades of your theme.. What is a less color functions? How do you make a less color functions? This script and codes were developed by Tushar Mehrotra on 13 September 2022, Tuesday.
Less Color Functions - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Less Color Functions</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <h2 class="text-center">Less Color Functions</h2> <div class="row"> <div class="col-xs-6"> <h4 class="text-center">Darken function<a class="link link-darken" data-toggle="modal" data-target=".myModal"><i class="fa fa-paperclip" aria-hidden="true"></i></a></h4> <div class="colorfunctions darken"></div> </div> <div class="col-xs-6"> <h4 class="text-center">Lighten function<a class="link link-lighten" data-toggle="modal" data-target=".myModal"><i class="fa fa-paperclip" aria-hidden="true"></i></a></h4> <div class="colorfunctions lighten"></div> </div> <div class="col-xs-6"> <h4 class="text-center">Saturation function<a class="link link-saturation" data-toggle="modal" data-target=".myModal"><i class="fa fa-paperclip" aria-hidden="true"></i></a></h4> <div class="colorfunctions saturation"></div> </div> <div class="col-xs-6"> <h4 class="text-center">Desaturation function<a class="link link-desaturation" data-toggle="modal" data-target=".myModal"><i class="fa fa-paperclip" aria-hidden="true"></i></a></h4> <div class="colorfunctions desaturation"></div> </div> <div class="col-xs-6"> <h4 class="text-center">Mix function<a class="link link-mix" data-toggle="modal" data-target=".myModal"><i class="fa fa-paperclip" aria-hidden="true"></i></a></h4> <div class="colorfunctions mix"></div> </div> <div class="col-xs-6"> <h4 class="text-center">Spin function<a class="link link-spin" data-toggle="modal" data-target=".myModal"><i class="fa fa-paperclip" aria-hidden="true"></i></a></h4> <div class="colorfunctions spin"></div> </div> </div>
</div>
<!-- Modal -->
<div class="modal fade myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"> ×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"></div> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>
Less Color Functions - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
body { background: #DCDCDD; font-family: 'Open Sans', sans-serif;
}
h2 { margin-bottom: 50px;
}
.colorfunctions { width: 200px; margin: 20px auto; height: 200px;
}
.colorfunctions.darken { background: #ED6A5A; border: 10px solid #cb2a16;
}
.colorfunctions.lighten { background: #5CA4A9; border: 10px solid #9fc9cc;
}
.colorfunctions.saturation { background: #59CD90; border: 10px solid #39ed8e;
}
.colorfunctions.desaturation { background: #FAC05E; border: 10px solid #d1b588;
}
.colorfunctions.mix { background: #586BA4; border: 10px solid #636a87;
}
.colorfunctions.spin { background: #6D696A; border: 10px solid #a45867;
}
a { cursor: pointer; display: inline-block; margin-left: 5px;
}
.link.link-darken { color: #ED6A5A;
}
.link.link-lighten { color: #5CA4A9;
}
.link.link-saturation { color: #59CD90;
}
.link.link-desaturation { color: #FAC05E;
}
.link.link-mix { color: #586BA4;
}
.link.link-spin { color: #6D696A;
}
![Less Color Functions - Script Codes](http://shots.codepen.io/MTushar/pen/oLZegW-512.jpg)
Developer | Tushar Mehrotra |
Username | MTushar |
Uploaded | September 13, 2022 |
Rating | 3 |
Size | 3,495 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Random Programming Quote Generator | 5,855 Kb |
Jquery datepicker | 1,497 Kb |
AngularJS Form Validation | 2,896 Kb |
Vertical timeline page | 2,267 Kb |
CSS3 Pricing Table | 3,923 Kb |
Login or Register Form | 3,614 Kb |
JS Calculator | 3,213 Kb |
Subscribe Newsletter | 3,419 Kb |
Github profile finder | 2,514 Kb |
Profile card | 2,671 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Birthday Party Starter | Aussieyang | 1,629 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Simple Login Form Template | Banunn | 3,571 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
Box Shadow Effects | Retrofuturistic | 2,143 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!