html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

В этом уроке мы будем создавать цветовую палитру с помощью 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.

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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

27
    +9 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции