HTML5界面背景色选择器界面模板

Page theme color picker, 包含一个手绘箭头用于提示用户选择颜色方案。

css3, color

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 4067
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
    isSavedColor()

$('.colors').hide();
    $('#expandcolors').click(function() {
        $('.colors').slideToggle();
        $(this).toggleClass('transform');
    });
})

function alterColor(rgb, type, percent) {
    rgb = rgb.replace('rgb(', '').replace(')', '').split(',');

var red = $.trim(rgb[0]);
    var green = $.trim(rgb[1]);
    var blue = $.trim(rgb[2]);

//If rgb is black set it to gray
    if (red == 0 && green == 0 && blue == 0) {
        red = 100;
        green = 100;
        blue = 100;
    }

if (type === "darken") {
        red = parseInt(red * (100 - percent) / 100, 10);
        green = parseInt(green * (100 - percent) / 100, 10);
        blue = parseInt(blue * (100 - percent) / 100, 10);
    } else {
        red = parseInt(red * (100 + percent) / 100, 10);
        green = parseInt(green * (100 + percent) / 100, 10);
        blue = parseInt(blue * (100 + percent) / 100, 10);
    }

rgb = 'rgb(' + red + ', ' + green + ', ' + blue + ')';

return rgb;
}

function isSavedColor() {
    if (localStorage.mySavedColor != null) {
        $('.darker').css('color', localStorage.darkerColor);
        $('.lighter').css('color', localStorage.lighterColor);
        $('body').css('background', localStorage.color);

$("ul.colors li:nth-child(" + localStorage.selected + ")")
            .toggleClass('selected')
            .siblings()
            .removeClass('selected');
    }

}

function saveColor(darkerColor, lighterColor, color, selected) {
    localStorage.mySavedColor = true;
    localStorage.darkerColor = darkerColor;
    localStorage.lighterColor = lighterColor;
    localStorage.color = color;
    localStorage.selected = selected;
}

$('.colors li').click(function() {

var color = $('.color', this).css('background-color');
    var darkerColor = alterColor(color, 'darken', 30);
    var lighterColor = alterColor(color, 'lighten', 50);
    var selected = '';

$(this)
        .toggleClass('selected')
        .siblings()
        .removeClass('selected');

$('ul.colors li').each(function(i) {
        if ($(this).hasClass('selected')) {
            selected = i + 1;
        }
    })

$('.darker').css('color', darkerColor);
    $('.lighter').css('color', lighterColor);
    $('body').css('background', color);

saveColor(darkerColor, lighterColor, color, selected)
});

编译

CSS

@charset "UTF-8";
* {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    padding: 0;
}
body {
    background: #B7B7B7;
}
h1 {
    color: gray;
    text-align: center;
}
h2 {
    color: #ededed;
    text-align: center;
}
span {
    color: gray;
    text-align: center;
    display: block;
    margin-top: 20px;
}
.tooltip {
    position: absolute;
    bottom: 110px;
    left: 370px;
    font-weight: 600;
}
img {
    position: absolute;
    bottom: 30px;
    left: 200px;
    transform: rotate(120deg);
    width: 150px;
    opacity: .5;
}
.head {
    background: #292D43;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    height: 30px;
    position: relative;
    width: 190px;
    padding: 10px 0px 0px 10px;
}
.head #expandcolors {
    position: absolute;
    margin-top: -2px;
    right: 10px;
    background: none;
    border: none;
    color: white;
    opacity: 0.5;
    transition: .5s ease-in-out;
    cursor: pointer;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: .5s ease-in-out;
}
.head #expandcolors:focus {
    outline: 0;
}
.transform {
    -webkit-transform: rotate(0deg) !important;
    -moz-transform: rotate(0deg) !important;
    -ms-transform: rotate(0deg) !important;
    -o-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
    transition: .5s ease-in-out;
}
.wrap {
    background: white;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    position: fixed;
    bottom: 0;
    left: 20px;
    max-width: 200px;
}
.colors {
    background: #31364E;
    list-style-type: none;
    margin: 0;
    max-height: 1000px;
    overflow: hidden;
    padding: 5px;
    transition: max-height .5s ease-in;
}
.colors li {
    background: none;
    cursor: auto;
    display: inline-block;
    height: 31px;
    margin: 0 -4px 0 0;
    padding: 10px 0;
    text-align: center;
    width: 25%;
}
.colors li:hover .color {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 0 2px rgba(205, 205, 205, 0.9);
    transform: scale(1.05);
}
.colors li.selected .color {
    opacity: .9;
    position: relative;
    transform: scale(1.25);
}
.colors li.selected .color::after {
    color: azure;
    content: '✓';
    height: 100%;
    left: 0;
    line-height: 34px;
    position: absolute;
    text-indent: 0;
    width: 100%;
}
.colors .color {
    border-radius: 100%;
    cursor: pointer;
    height: 33px;
    margin: 0 auto;
    text-indent: -9999px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 33px;
}

HTML

<br>
<h1 class="darker">This is a title</h1>
<h2 class="lighter">And I am a subtitle ^.^</h2>
<span class="darker tooltip">Open this up to choose your favourite theme color</span>
<img src="/uploads/1708/hand-drawn-arrow-1.png">

<div class="wrap">
    <div class="head">Pick your favourite color
        <button id="expandcolors">&#9587;</button>
    </div>
    <ul name="colors" data-for="colors[]" class="colors">
        <li>
            <div class="color" style="background-color:#E94A35;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#F59D00;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#F5E100;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#009755;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#0073BF;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#083D7A;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#6EC4FD;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#7935E9;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#000000;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#B58989;"></div>
        </li>
        <li class="selected">
            <div class="color" style="background-color:#B7B7B7;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#D2B85C;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#745029;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#790000;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#F26D7D;"></div>
        </li>
        <li>
            <div class="color" style="background-color:#6DF2B5;"></div>
        </li>
    </ul>
</div>

Page theme color picker, 包含一个手绘箭头用于提示用户选择颜色方案。

css3, color

编辑器支持Emmet

快捷键

Page theme color picker, 包含一个手绘箭头用于提示用户选择颜色方案。

css3, color

HTML5 CSS3一款很漂亮的玫瑰红用户订阅界面模板

HTML5 CSS3蜂巢（六边形）形状的页面布局模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：