CSS3 Automagic Color Palette/调色板

2014-05-01 05:53:33 -0700

此代码仅供参考

代码说明

Dynamically created color style guide based on LESS variables

html代码

<style type="text/css">
.color-palette ul.gray li:nth-child( 1) {
    background: #389aff;
    color: #fff;
}
.color-palette ul.gray li:nth-child( 1):before {
    content: "coolBlue";
}
.color-palette ul.gray li:nth-child( 1):after {
    content: "#389aff";
}
.color-palette ul.gray li {
    width: 100%;
    margin-bottom: 1.2rem;
}
@media only screen and (min-width: 769px) and (max-width: 1128px) {
    .color-palette ul.gray li {
        min-width: 23.52941%;
    }
}
@media only screen and (min-width: 530px) and (max-width: 768px) {
    .color-palette ul.gray li {
        min-width: 32.02614%;
    }
}
@media only screen and (max-width: 529px) {
    .color-palette ul.gray li {
        min-width: 100%;
    }
}
.color-palette ul.example li:nth-child( 6) {
    background: #404040;
    color: #f3f3f3;
}
.color-palette ul.example li:nth-child( 6):before {
    content: "plainJane";
}
.color-palette ul.example li:nth-child( 6):after {
    content: "#404040";
}
.color-palette ul.example li:nth-child( 5) {
    background: #93648d;
    color: #fff;
}
.color-palette ul.example li:nth-child( 5):before {
    content: "orchidPurple";
}
.color-palette ul.example li:nth-child( 5):after {
    content: "#93648d";
}
.color-palette ul.example li:nth-child( 4) {
    background: #4cc3d9;
    color: #fff;
}
.color-palette ul.example li:nth-child( 4):before {
    content: "oceanBlue";
}
.color-palette ul.example li:nth-child( 4):after {
    content: "#4cc3d9";
}
.color-palette ul.example li:nth-child( 3) {
    background: #7bc8a4;
    color: #fff;
}
.color-palette ul.example li:nth-child( 3):before {
    content: "mintGreen";
}
.color-palette ul.example li:nth-child( 3):after {
    content: "#7bc8a4";
}
.color-palette ul.example li:nth-child( 2) {
    background: #ffe25d;
    color: #5d4c00;
}
.color-palette ul.example li:nth-child( 2):before {
    content: "canaryYellow";
}
.color-palette ul.example li:nth-child( 2):after {
    content: "#ffe25d";
}
.color-palette ul.example li:nth-child( 1) {
    background: #f16745;
    color: #fff;
}
.color-palette ul.example li:nth-child( 1):before {
    content: "cosmicOrange";
}
.color-palette ul.example li:nth-child( 1):after {
    content: "#f16745";
}
.color-palette ul.example li {
    width: 15.03268%;
    margin-bottom: 1.2rem;
}
@media only screen and (min-width: 769px) and (max-width: 1128px) {
    .color-palette ul.example li {
        min-width: 23.52941%;
    }
}
@media only screen and (min-width: 530px) and (max-width: 768px) {
    .color-palette ul.example li {
        min-width: 32.02614%;
    }
}
@media only screen and (max-width: 529px) {
    .color-palette ul.example li {
        min-width: 100%;
    }
}
.color-palette ul.quantity-example li:nth-child( 3) {
    background: #197359;
    color: #f4fdfa;
}
.color-palette ul.quantity-example li:nth-child( 3):before {
    content: "forestGreen";
}
.color-palette ul.quantity-example li:nth-child( 3):after {
    content: "#197359";
}
.color-palette ul.quantity-example li:nth-child( 2) {
    background: #5e308c;
    color: #eae0f4;
}
.color-palette ul.quantity-example li:nth-child( 2):before {
    content: "purple";
}
.color-palette ul.quantity-example li:nth-child( 2):after {
    content: "#5e308c";
}
.color-palette ul.quantity-example li:nth-child( 1) {
    background: #bf2431;
    color: #fffdfd;
}
.color-palette ul.quantity-example li:nth-child( 1):before {
    content: "rocketRed";
}
.color-palette ul.quantity-example li:nth-child( 1):after {
    content: "#bf2431";
}
.color-palette ul.quantity-example li {
    width: 32.02614%;
    margin-bottom: 1.2rem;
}
@media only screen and (min-width: 769px) and (max-width: 1128px) {
    .color-palette ul.quantity-example li {
        min-width: 23.52941%;
    }
}
@media only screen and (min-width: 530px) and (max-width: 768px) {
    .color-palette ul.quantity-example li {
        min-width: 32.02614%;
    }
}
@media only screen and (max-width: 529px) {
    .color-palette ul.quantity-example li {
        min-width: 100%;
    }
}
html,
body {
    font-size: 10px;
    background: #e5ebf4;
    font-family: 'Open Sans', sans-serif;
}
body {
    margin: 0;
}
* {
    box-sizing: border-box;
}
h1 {
    position: relative;
    margin: 0 auto 15px;
    width: auto;
    padding-bottom: 15px;
    font-size: 4.1rem;
    font-weight: 300;
    letter-spacing: -0.15rem;
}
h1:after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    height: 2px;
    width: 100%;
    background: #bf616a;
    background: -webkit-linear-gradient(left, transparent 0%, #bf616a 50%, transparent 100%);
    background: linear-gradient(left, transparent 0%, #bf616a 50%, transparent 100%);
}
h1 span:nth-of-type(1) {
    color: #fff;
}
h1 span:nth-of-type(2) {
    color: #ff0;
}
h1 span:nth-of-type(3) {
    color: #ff005a;
}
h1 span:nth-of-type(4) {
    color: #00d2ff;
}
h1 span:nth-of-type(5) {
    color: #00ff8a;
}
h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
}
p {
    font-size: 1.4rem;
    margin: 0 0 5px 0;
    font-weight: 400;
}
header {
    background: #2b303b;
    text-align: center;
    padding: 50px;
}
header h1 {
    color: #c0c5ce;
}
header p {
    color: #96b5b4;
}
section {
    position: relative;
    padding: 1.2rem 1.2rem 0;
    width: 80%;
    margin: 30px auto;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e5ebf4));
    background: -webkit-linear-gradient(top, #e5ebf4, #fff);
    background: -o-linear-gradient(top, #e5ebf4, #fff);
    background-color: #fff;
    background-size: 100% 100px;
    background-repeat: no-repeat;
    border: 2px solid white;
    border-radius: 24px;
    box-shadow: 0 0 14px #bec9d8;
}
@media only screen and (min-width: 530px) and (max-width: 768px) {
    section {
        width: 90%;
    }
}
@media only screen and (max-width: 529px) {
    section {
        width: 96%;
    }
}
section:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 96%;
    bottom: 0;
    height: 20px;
    left: 2%;
    padding-bottom: 0px;
    border-bottom: 2px solid red;
    border-radius: 50%;
    box-shadow: 0 0 0px 3px #bbb, 0 0 0px 4px #eee, 0 0 0px 6px #fff, 0 0 32px #101215;
}
section > *:last-child {
    margin-bottom: 0;
}
ul {
    text-align: justify !important;
    text-justify: distribute-all-lines;
    font-size: 0 !important;
    list-style: none;
    padding: 0;
    margin-bottom: 12px;
}
ul > * {
    text-align: left;
    font-size: medium;
}
ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}
ul li {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    border-radius: 12px;
    padding: 10px 0;
    text-align: center;
}
ul li:before {
    display: block;
    /*  THE GRID justifygrid.com  */
    
    font-weight: bold;
}
</style>

<header>
    <h1>Automagic <span>C</span><span>o</span><span>l</span><span>o</span><span>r</span> Palette</h1>
    <p>Dynamically created color style guide based on LESS variables</p>
</header>

<section class="color-palette">
    <h2>Color Group Name</h2>
    <p>Brief usage description, Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <ul class="example">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <h2>Example Colors</h2>
    <p>Color name and value are automatically appended via CSS, and conditionally colored based on the original value, to ensure readability.</p>
    <ul class="quantity-example">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <h2>Quantity Example</h2>
    <p>Groups of colors can vary in quantity and the grid will automatically adapt.</p>
    <ul class="gray">
        <li></li>
    </ul>
</section>

代码演示

Automagic Color Palette

Dynamically created color style guide based on LESS variables

Color Group Name

Brief usage description, Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Example Colors

Color name and value are automatically appended via CSS, and conditionally colored based on the original value, to ensure readability.

Quantity Example

Groups of colors can vary in quantity and the grid will automatically adapt.

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N