Diễn đàn

Upro Club | Develop for future
 
Trang ChínhTrang Chính  Trợ giúpTrợ giúp  Tìm kiếmTìm kiếm  Thành viênThành viên  Đăng kýĐăng ký  Đăng Nhập  
R@Me$h (728)
TS Kenz (123)
bibipro (87)
bebelk (6)
Dark Thunder (6)
kilokyb (1)
MGame (1)
[XP Themes] Naruto Theme for XP Trả lời[XP Themes] Naruto Theme for XP - 2 Trả lời
Ra mắt hệ thống Rank cho diễn đàn Trả lờiRa mắt hệ thống Rank cho diễn đàn - 1 Trả lời

Trang 1 trong tổng số 1 trang


-

[CSS] Bảng màu

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down
16/5/2013, 3:21 pm
avatar
            TS Kenz
Danh hiệu cá nhânLàm biếng

Làm biếng
Admin
Tâm trạng : Gian xảo
Posts : 123
Points : 16166
Thanked : 45
Tham gia : 03/04/2013
Admin
Tâm trạng : Gian xảo
Posts : 123
Points : 16166
Thanked : 45
Tham gia : 03/04/2013
Bài gửiTiêu đề: [CSS] Bảng màu
Xem lý lịch thành viên

HTML:

Code:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Color Palette</title>

    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

</head>
<body>
    <div class="color-palette">

        <h2>Choose a color pattern!</h2>

        <div class="color-container width5 clearfix">

            <h3>Strawberry</h3>

            <span class="color c73102a"></span>
            <span class="color ca6386b"></span>
            <span class="color c3b574b"></span>
            <span class="color c15bf5f"></span>
            <span class="color c62bf54"></span>

        </div>

        <hr>

        <div class="color-container width4 clearfix">

            <h3>Orange</h3>

            <span class="color ce8b830"></span>
            <span class="color ce48831"></span>
            <span class="color cd84c35"></span>
            <span class="color c9e3c2f"></span>

        </div>

        <hr>

        <div class="color-container width5 clearfix">

            <h3>Winter</h3>

            <span class="color c020c17"></span>
            <span class="color c021325"></span>
            <span class="color c00353d"></span>
            <span class="color c006063"></span>
            <span class="color c018687"></span>

        </div>

        <hr>
       
        <div class="color-container width3 clearfix">

            <h3>Retro</h3>

            <span class="color cadcd37"></span>
            <span class="color cfa5735"></span>
            <span class="color c37ac72"></span>

        </div>

    </div>
</body>
</html> 


CSS:

Code:
@charset "utf-8";
/* CSS Document */

/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */

@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);

/* ---------- GENERAL ---------- */

body {
    background-color: #cbd0d4;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    line-height: 1.5em;


 

hr {
    background-color: #28303b;
    border: 0;
    height: 1px;
    margin: 0;
    padding: 0;
}

.clearfix { *zoom: 1; } /* For IE 6/7 */
.clearfix:before, .clearfix:after {
    display: table;
    content: "";
}
.clearfix:after { clear: both; }

/* ---------- COLOR-PALETTE ---------- */

.color-palette {
    background-color: #1c252e;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 50px auto;
    padding: 32px;
    position: relative;
    width: 180px;
}

.color-palette:before {
    background-color: #1c252e;
    content: "";
    display: block;
    height: 8px;
    left: 118px;
    position: absolute;
    width: 8px;
    top: -4px;
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    z-index: -1;
}

.color-palette h2 {
    color: #9aa1a7;
    font-size: 16px;
}

.color-container {
    margin: 21px 0;
    width: 180px;
}

.color-container:first-child {
    margin-top: 0;
}

.color-container:last-child {
    margin-bottom: 0;
}

.color-container h3 {
    color: #9aa1a7;
    font-size: 14px;
    margin-bottom: 8px;
}

.color-container .color:first-of-type {
    border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
}

.color-container .color:last-of-type {
    border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
}

.width10 .color { width: 10%; }
.width6 .color { width: 16.67%; }
.width5 .color { width: 20%; }
.width4 .color { width: 25%; }
.width3 .color { width: 33.3%; }
.width2 .color { width: 50%; }
.width1 .color { width: 100%; }


.color {
    display: block;
    float: left;
    height: 24px;
}

/* STRAWBERRY */
.c73102a { background-color: #73102a; }
.ca6386b { background-color: #a6386b; }
.c3b574b { background-color: #3b574b; }
.c15bf5f { background-color: #15bf5f; }
.c62bf54 { background-color: #62bf54; }

/* ORANGE */
.ce8b830 { background-color: #e8b830; }
.ce48831 { background-color: #e48831; }
.cd84c35 { background-color: #d84c35; }
.c9e3c2f { background-color: #9e3c2f; }

/* WINTER */
.c020c17 { background-color: #020c17; }
.c021325 { background-color: #021325; }
.c00353d { background-color: #00353d; }
.c006063 { background-color: #006063; }
.c018687 { background-color: #018687; }

/* RETRO */
.cadcd37 { background-color: #adcd37; }
.cfa5735 { background-color: #fa5735; }
.c37ac72 { background-color: #37ac72; }






Trang 1 trong tổng số 1 trang


Thông tin chủ đề
Đang truy cập Diễn Đàn này: Không

Quyền viết bài
Bạn không có quyền trả lời bài viết