Chorke Color Scheme: Difference between revisions

From Chorke Wiki
Jump to navigation Jump to search
Line 170: Line 170:
=== Chorke banner like TP-Link ===
=== Chorke banner like TP-Link ===
For [http://chorke.org 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.
For [http://chorke.org 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.
[[File:Chorke banner like TP-Link.jpg|600px|frame|left]]
[[File:Chorke banner like TP-Link.jpg|600px|frame|center]]
 
=== Smart Health Standards Forum ===
<gallery>
Chorke benzene color background.png|Benzene Color
Chorke benzene plain background.png|Benzene Plain
</gallery>

Revision as of 20:27, 16 April 2018

Reference site

Chorke Color Scheme is one of the important most factor. We love green and it's variation

  1. Gradient Button
  2. IBBL Banner
  3. Download Button
  4. Download Now
  5. Download Button & Banner
  6. LaTex Theme
  7. Angle Matcolors
  8. Gradient Generator
  9. Gradient Editor
  10. mycolor.space/gradient
  11. forums.docker.com/banner
  12. tomcat.apache.org/banner

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%));
}

From forums.docker.com/t/

.cki-banner-bg {
    background-color: #1b5e20;
    background-image: radial-gradient(circle, #4caf50 0%, #1b5e20 100%);
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
}

/*.cki-banner-bg {
    background: #4caf50;
    background: -moz-linear-gradient(top, #4caf50 0%, #1b5e20 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #4caf50), color-stop(100%, #1b5e20));
    background: -webkit-linear-gradient(top, #4caf50 0%, #1b5e20 100%);
    background: -o-linear-gradient(top, #4caf50 0%, #1b5e20 100%);
    background: -ms-linear-gradient(top, #4caf50 0%, #1b5e20 100%);
    background: linear-gradient(to bottom, #4caf50 0%, #1b5e20 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4caf50', endColorstr='#1b5e20', GradientType=0 );
}*/

From tomcat.apache.org

.cki-banner-bg {
    padding-left: 15px;
    padding-right: 15px;
    background-color: #4caf50;
    background: linear-gradient(to bottom, #1b5e20 -10%, #4caf50 100%);
    position: relative;
}

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.

Smart Health Standards Forum