Chorke Color Scheme: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
Line 9: | Line 9: | ||
# [https://www.overleaf.com/gallery/tagged/book/page/3 LaTex Theme] | # [https://www.overleaf.com/gallery/tagged/book/page/3 LaTex Theme] | ||
# [http://doc.chorke.org/theme/material/#!/app/matcolors Angle Matcolors] | # [http://doc.chorke.org/theme/material/#!/app/matcolors Angle Matcolors] | ||
#[https://www.cssmatic.com/gradient-generator Gradient Generator] | # [https://www.cssmatic.com/gradient-generator Gradient Generator] | ||
# [http://www.colorzilla.com/gradient-editor Gradient Generator] | |||
== Collection of Green Gradient == | == Collection of Green Gradient == | ||
Line 116: | Line 117: | ||
background: @include filter-gradient(#0c8710, #84ba54, horizontal); | background: @include filter-gradient(#0c8710, #84ba54, horizontal); | ||
background: @include background-image(linear-gradient(left, rgba(12,135,16,1) 0%, rgba(132,186,84,1) 100%)); | background: @include background-image(linear-gradient(left, rgba(12,135,16,1) 0%, rgba(132,186,84,1) 100%)); | ||
} | |||
</syntaxhighlight> | |||
=== From [http://www.colorzilla.com/gradient-editor colorzilla.com/gradient-editor/] === | |||
<syntaxhighlight lang="scss"> | |||
.cki-banner-bg { | |||
// http://colorzilla.com/gradient-editor/#a9e4f7+0,d8f7ad+0,278909+100 | |||
background-color: rgb(169,228,247); // Old browsers | |||
@include filter-gradient(#a9e4f7, #278909, horizontal); // IE6-9 | |||
@include background-image(linear-gradient(left, rgba(169,228,247,1) 0%,rgba(216,247,173,1) 0%,rgba(39,137,9,1) 100%)); | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> |
Revision as of 04:46, 23 January 2018
Reference site
Chorke Color Scheme is one of the important most factor. We love green and it's variation
- Gradient Button
- IBBL Banner
- Download Button
- Download Now
- Download Button & Banner
- LaTex Theme
- Angle Matcolors
- Gradient Generator
- Gradient Generator
Collection of Green Gradient
From www.bitbybitblog.com
.cki-banner-bg {
top: 5px;
width: 100%;
height: 100px;
background: #1B6B5B;
/* background-color: #000000; */
/* background-color: #0CBE88; */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33A26A', endColorstr='#1B6B5B');
background: -webkit-gradient(linear, left top, left bottom, from(#33A26A), to(#1B6B5B));
background: -moz-linear-gradient(top, #33A26A, #1B6B5B);
}
From www.phpmyadmin.net
.cki-btn-success {
background-image: -webkit-linear-gradient(top,#5cb85c 0,#419641 100%);
background-image: -o-linear-gradient(top,#5cb85c 0,#419641 100%);
background-image: -webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#419641));
background-image: linear-gradient(to bottom,#5cb85c 0,#419641 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c',endColorstr='#ff419641',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #3e8f3e;
}
.cki-btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.cki-btn-default,
.cki-btn-success {
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.075);
}
From ibblportal.islamibankbd.com
.cki-banner-bg {
background: -moz-linear-gradient(center top, rgb(0, 84, 41), rgb(47, 139, 1)) repeat scroll 0% 0% transparent;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#005429), to(#2F8B01));
box-shadow: 0px 0px 1px rgb(190, 209, 185) inset;
-webkit-box-shadow: inset 0 1px 0 #CBD6CE, inset 0 -1px 0 #CBD6CE, 0 0 15px rgba(0, 0, 0, 0.07);
-moz-box-shadow: inset 0 1px 0 #CBD6CE, inset 0 -1px 0 #CBD6CE, 0 0 15px rgba(0, 0, 0, 0.07);
background-color: #007C3C;
overflow: hidden;
padding: 3px;
height: 70px;
clear: both;
margin: 0;
}
From sourceforge.net/projects/jasperstudio
.cki-span-bg {
background-image: linear-gradient(to bottom, #393 0%, #373 100%);
border-radius: 3px;
background: #363;
margin-left: 35px;
overflow: hidden;
text-align: left;
display: block;
padding: 4px;
height: 34px;
margin: 3px;
color: #FFF;
}
From community.jaspersoft.com
.cki-btn.cki-green {
background: #50ab22;
border-top: 1px solid #7CD450;
background: -moz-linear-gradient(top,#50ab22 0%,#3f8c13 45%,#327311 78%,#245c08 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#50ab22),color-stop(45%,#3f8c13),color-stop(78%,#327311),color-stop(100%,#245c08));
background: -webkit-linear-gradient(top,#50ab22 0%,#3f8c13 45%,#327311 78%,#245c08 100%);
background: -o-linear-gradient(top,#50ab22 0%,#3f8c13 45%,#327311 78%,#245c08 100%);
background: -ms-linear-gradient(top,#50ab22 0%,#3f8c13 45%,#327311 78%,#245c08 100%);
background: linear-gradient(to bottom,#50ab22 0%,#3f8c13 45%,#327311 78%,#245c08 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#50ab22',endColorstr='#245c08',GradientType=0);
-webkit-transition: background 150ms;
-webkit-background-size: 100% 120%;
-moz-transition: background 150ms;
-moz-background-size: 100% 120%;
transition: background 150ms;
background-position: 0 -5px;
background-size: 100% 120%;
}
From cssmatic.com/gradient-generator
.cki-banner-bg {
background-color: rgba(12,135,16,1);
background: @include filter-gradient(#0c8710, #84ba54, horizontal);
background: @include background-image(linear-gradient(left, rgba(12,135,16,1) 0%, rgba(132,186,84,1) 100%));
}
From colorzilla.com/gradient-editor/
.cki-banner-bg {
// http://colorzilla.com/gradient-editor/#a9e4f7+0,d8f7ad+0,278909+100
background-color: rgb(169,228,247); // Old browsers
@include filter-gradient(#a9e4f7, #278909, horizontal); // IE6-9
@include background-image(linear-gradient(left, rgba(169,228,247,1) 0%,rgba(216,247,173,1) 0%,rgba(39,137,9,1) 100%));
}
Collection of Green Banner
Chorke banner like TP-Link
For Chorke, Inc. banner we banner graphics some things like that. Background graphics is ok. But there need correction of floating transparent gradient on top of background images.