Цветовая палитра с помощью CSS3 & jQuery

9 января 2013 | Опубликовано в css | 1 Комментарий »

В этом уроке мы будем создавать цветовую палитру с помощью CSS преобразований и переходов — простой плагин jQuery. Идея состоит в том, что при нажатии на один из образцов мы будем вращать остальные с целью выявления выбранного.

Демо Скачать исходники

В этом уроке мы будем использовать шрифт в виде иконок, разработанный Fontello.

Разметка

Для разметки мы будем использовать простую структуру с несколькими блоками с тегами span и тегами заголовков.

<div id="sb-container" class="sb-container">

    <div>
        <span class="sb-icon icon-cog"></span>
        <h4><span>All Settings</span></h4>
    </div>

    <div>
        <span class="sb-icon icon-flight"></span>
        <h4><span>User Modes</span></h4>
    </div>    

    <div>
        <!-- ... -->
    </div>    

    <!-- ... -->

    <div>
        <h4><span>Profile</span></h4>
        <h5><span>We ♥ color</span></h5>
    </div>
</div><!-- sb-container -->

Последний блок будет иметь заголовки h4 и h5. Это будет наш крайний корешок — самый верхний образец палитры.

Давайте перейдем к стилям.

CSS

Создаем основной контейнер:

.sb-container {
    position: relative;
    width: 150px;
    height: 400px;
    margin: 30px auto 0 auto;
}

Нашей целью является создание палитры с несколькими образцами. Каждый из них будет вращаться с помощью CSS преобразований. Давайте дадим образцам нужную ширину и высоту и зададим абсолютную позицию. В начальном состоянии все образцы будут накладываться друг на друга. transform-origin будет определять, как будут вращаться образцы. Свойство backface-visibility — hidden поможет правильно отображать текст при повороте.

.sb-container div {

    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
    background: #fff;
    height: 400px;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    background-image: url(../images/fabric.png);
    transform-origin: 25% 90%;
    backface-visibility: hidden;
}

Давайте определим другой цвет заливки и теней для каждого из образцов.

.sb-container div:nth-child(1){

    background-color: #ea2a29;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(2){
    background-color: #f16729;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(3){
    background-color: #f89322;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(4){
    background-color: #ffcf14;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(5){
    background-color: #ffea0d;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(6){
    background-color: #87b11d;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(7){
    background-color: #008253;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(8){
    background-color: #3277b5;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(9){
    background-color: #4c549f;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(10){
    background-color: #764394;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(11){
    background-color: #ca0d86;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4);
}

Мы хотим, чтобы наша палитра выглядела реалистично, поэтому для первого самого нижнего элемента, который является первым дочерним классом, установим очень тонкую тень. Для каждого следующего элемента вторая тень будет увеличиваться.

.sb-container div:last-child{

    background: #645b5c url(../images/cover.jpg) repeat center center;
    box-shadow:
        -1px -1px 3px rgba(0,0,0,0.2),
        12px 12px 20px rgba(0,0,0,0.6),
        inset 2px 2px 0 rgba(255, 255, 255, 0.1);
}

Давайте добавим застежку. Для этого мы будем использовать псевдо-класс :after. Он будет иметь градиент и box shadow, чтобы она имела вид металла. Положение зависит от transform-origin образца.

.sb-container div:last-child:after{
    content: '';
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dddddd;
    background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%);
    box-shadow: -1px -1px 1px rgba(0,0,0,0.5), 1px 1px 1px rgba(255,255,255,0.1);
}

Добавляем стили к заголовкам.

.sb-container div h4{
    color: rgba(255,255,255,0.9);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    border-top: 1px dashed rgba(0,0,0,0.1);
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    margin: 5px;
    padding: 5px;
    user-select: none;
}
.sb-container div:last-child h4{
    background: rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(255,255,255,0.1);
}

Заголовок на обложке будет поворачиваться в правильное положение. Все зависит от размера. Если бы мы использовали другие слова, мы бы изменяли эти значения:

.sb-container div:last-child h5{

    font-size: 50px;
    white-space: nowrap;
    text-align: left;
    margin: 0;
    padding: 0;
    position: absolute;
    line-height: 50px;
    top: 0px;
    left: 0px;
    color: #111;
    text-shadow: -1px -1px 1px rgba(255,255,255,0.1);
    text-transform: uppercase;
    transform: rotate(-90deg) translateX(-157%) translateY(73px);
    transform-origin: 0 0;
    user-select: none;
}

Последнее, но не менее важное — задать стиль классу с иконками. Мы будем использовать значки, которые скачали с Fontello. Будем задавать стили для span и псевдо-класса :before, который будут содержать нужные символы.

span.sb-icon{

    display: block;
    height: 70px;
    width: 70px;
    margin: 20px auto;
    user-select: none;
}
span.sb-icon:before {
    font-family: 'icons';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: block;
    text-decoration: inherit;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
    line-height: 64px;
    width: 100%;
    font-size: 60px;
    color: #000;
    text-shadow: 0 0 1px #000;
}
.icon-cog:before { content: '\35'; } /* '5' */
.icon-flight:before { content: '\37'; } /* '7' */
.icon-eye:before { content: '\34'; } /* '4' */
.icon-install:before { content: '\39'; } /* '9' */
.icon-bag:before { content: '\36'; } /* '6' */
.icon-globe:before { content: '\38'; } /* '8' */
.icon-picture:before { content: '\32'; } /* '2' */
.icon-video:before { content: '\30'; } /* '0' */
.icon-download:before { content: '\41'; } /* 'A' */
.icon-mobile:before { content: '\42'; } /* 'B' */
.icon-camera:before { content: '\33'; } /* '3' */

Со стилями закончили. Давайте добавим немного магии!

JAVASCRIPT

Давайте посмотрим на возможности нашего плагина:

$.SwatchBook.defaults = {
    // index of initial centered item
    center : 6,
    // number of degrees that is between each item
    angleInc : 8,
    speed : 700,
    easing : 'ease',
    // amount in degrees for the opened item's next sibling
    proximity : 45,
    // amount in degrees between the opened item's next siblings
    neighbor : 4,
    // animate on load
    onLoadAnim : true,
    // if it should be closed by default
    initclosed : false,
    // index of the element that when clicked, triggers the open/close function
    // by default there is no such element
    closeIdx : -1,
    // open one specific item initially (overrides initclosed)
    openAt : -1
};

Параметры означают следующее:

center: индекс центрального элемента, который будет размещен под углом 0 градусов, когда палитра открыта
индекс, на который индекс «центра», на который будет иметь под углом 0 градусов, когда образец книга открыта
angleInc: расстояние между элементами (в градусах)
speed & easing: скорость перехода функций
proximity: расстояние от открытого элемента к следющему
neighbor: расстояние между образцами, которые стоят после выбранного
onLoadAnim: Если true образец книги откроется с переходом на нагрузку, в противном случае он будет открыт по умолчанию
initclosed: Если true это правда образец книги изначально будет закрыт
closeIdx: индекс элемента, при нажатии на который будет вызвана функция закрытия образца книги
openAt: индекс элемента, который будет открыт первоначально

Мы начнем с выполнения функции _init :

_init : function( options ) {

    this.options = $.extend( true, {}, $.SwatchBook.defaults, options );

    this.$items = this.$el.children( 'div' );
    this.itemsCount = this.$items.length;
    this.current = -1;
    this.support = Modernizr.csstransitions;
    this.cache = [];

    if( this.options.onLoadAnim ) {
        this._setTransition();
    }

    if( !this.options.initclosed ) {
        this._center( this.options.center, this.options.onLoadAnim );
    }
    else {

        this.isClosed = true;
        if( !this.options.onLoadAnim ) {
            this._setTransition();
        }

    }

    if( this.options.openAt >= 0 && this.options.openAt < this.itemsCount ) {
        this._openItem( this.$items.eq( this.options.openAt ) );
    }

    this._initEvents();
}

Здесь кэшируем и инициализируем некоторые переменные, которые будут использоваться в дальнейшем.

Кроме того, нам нужно проверить — открыта или закрыта изначально наша палитра. Если она должна быть закрыта, нам нужно установить CSS-переходы для элементов (_setTransition function).

Наконец мы загружаем обработчик событий:

_setTransition : function() {

 
    if( this.support ) {
        this.$items.css( { 'transition': 'all ' + this.options.speed + 'ms ' + this.options.easing } );
    }
}

При нажатии на один из элементов, он будет вращаться, поэтому значение установлено 0 degrees. Но нам также нужно повернуть его братьев и сестер таким образом, чтобы мы могли прочитать содержание открытого элемента.

_initEvents : function() {

    var self = this;

    this.$items.on( 'click.swatchbook', function( event ) {
        self._openItem( $( this ) );
    } );

}

_openItem : function( $item ) {

    var itmIdx = $item.index();

    if( itmIdx !== this.current ) {

        if( this.options.closeIdx !== -1 && itmIdx === this.options.closeIdx ) {

            this._openclose();
            this._setCurrent();

        }
        else {

            this._setCurrent( $item );
            $item.css( { 'transform' : 'rotate(0deg)' } );
            this._rotateSiblings( $item );

        }

    }
}

_rotateSiblings имеет следующий вид:

_rotateSiblings : function( $item ) {

    var self = this,
        idx = $item.index(),
        $cached = this.cache[ idx ],
        $siblings;

    if( $cached ) {
        $siblings = $cached;
    }
    else {

        $siblings = $item.siblings();
        this.cache[ idx ] = $siblings;

    }

    $siblings.each( function( i ) {

        var rotateVal = i < idx ?
            self.options.angleInc * ( i - idx ) :
            i - idx === 1 ?
                self.options.proximity :
                self.options.proximity + ( i - idx - 1 ) * self.options.neighbor;

        var transformStr = 'rotate(' + rotateVal + 'deg)';

        $( this ).css( { 'transform' : transformStr } );

    } );
}

В принципе, мы вращаем следующие образцы палитры таким образом, чтобы у нас оставалось место для прочтения содержимого выбранного элемента. Их значение определяется в опциях proximity и neighbor. Если мы хотим палитру, которая будет изначально закрытой, и/или мы указываем на образец, что будет открывать/закрывать ее — обработчик событий на этом образце открывает/закрывает палитру в зависимости от его текущего состояния:

_openclose : function() {

    this.isClosed ? this._center( this.options.center, true ) : this.$items.css( { 'transform' : 'rotate(0deg)' } );
    this.isClosed = !this.isClosed;
}

Это все! Надеемся, что вам понравился пример, и он сможет вдохновить вас!

Демо Скачать файлы

Автор: MARY LOU.

Перевод — Дежурка

Опубликовано в css, января 9, 2013
Метки: css3, javascript, javascript уроки, Jquery, уроки сss3, цветовая палитра

�

Цветовая палитра с помощью CSS3 & jQuery

Разметка

CSS

JAVASCRIPT

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые