Diễn đàn
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.
Diễn đàn

Upro Club | Develop for future
 
Trang ChínhTrang Chính  Tìm kiếmTìm kiếm  Latest imagesLatest images  Đă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
TS Kenz
            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
[CSS] Bảng màu  Vide10
Bài gửiTiêu đề: [CSS] Bảng màu

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