Реклама на сайте Advertise with us

Золотые яйца

Расширенный поиск по форуму
 
Новая тема Новая тема   
Автор
Поиск в теме:



С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538


Передовик Master-X (01.11.2009) Передовик Master-X (16.11.2009) Передовик Master-X (01.02.2011) Передовик Master-X (01.12.2011) Передовик Master-X (16.12.2011) Ветеран трепа Master-X (01.01.2014)
Ссылка на сообщениеДобавлено: 11/09/16 в 21:54       Ответить с цитатойцитата 

Есть div (один, это важно) и css. Сделать золотое яйцо.


  1. Контейнер

    Код:

    .box {
      display: inline-block;
      width: 256px;
      height: 320px;
      background: orange;
      border-radius: 60%/70% 70% 50% 50%;
    }




  2. Текстура

    Код:

    .gold-zoom {
      background:
        linear-gradient(to top right, orange 12%, transparent 0%, transparent 88%, orange 0%),
        linear-gradient(to bottom right, transparent 37%, yellow 0%, yellow 63%, transparent 0%),
        linear-gradient(to top right, transparent 37%, orange 0%, orange 63%, transparent 0%) red;
      background-size: 256px 320px;
    }

    .gold {
      background:
        linear-gradient(to top right, orange 12%, transparent 0%, transparent 88%, orange 0%),
        linear-gradient(to bottom right, transparent 37%, yellow 0%, yellow 63%, transparent 0%),
        linear-gradient(to top right, transparent 37%, orange 0%, orange 63%, transparent 0%) red;
      background-size: 3px 3.75px;
    }





  3. Свет

    Код:

    .sunrise {box-shadow: inset -160px -160px 192px -48px #444, -1px -16px 64px -32px orange;}

    .sunset {box-shadow: inset 160px -160px 192px -48px #444, 1px -16px 64px -32px orange;}

    .noon {box-shadow: inset 0px -80px 192px -0px #444, 0px -32px 80px -24px orange;}

    .midnight {box-shadow: inset 0px 0px 256px 256px #444, 0px -32px 80px -24px orange;}





  4. Крутим

    Код:

    .roll {
      transform-origin: bottom;
      animation: 6s linear 0s infinite normal roll;
    }

    @keyframes roll {
      from {box-shadow: inset -320px -160px 192px -48px #444, 0px -16px 80px -32px orange;}
      50% {box-shadow: inset 320px -80px 192px 0px #444, 0px -32px 80px -24px orange;}
      to {box-shadow: inset -320px -160px 192px 416px #444, 0px -16px 80px -32px orange;}
    }





  5. Вертим

    Код:

    .rock {
      transform-origin: bottom;
      animation: 6s ease 0s infinite normal rock;
    }

    @keyframes rock {
      from {transform: rotate3d(1, 1, 1, -3deg);}
      50% {transform: rotate3d(1, 1, 1, 3deg);}
      to {transform: rotate3d(1, 1, 1, -3deg);}
    }






  6. И все вместе

    Код:

    .egg {
      display: inline-block;
      width: 256px;
      height: 320px;
      background: orange;
      border-radius: 60%/70% 70% 50% 50%;

      background:
        linear-gradient(to top right, orange 12%, transparent 0%, transparent 88%, orange 0%),
        linear-gradient(to bottom right, transparent 37%, yellow 0%, yellow 63%, transparent 0%),
        linear-gradient(to top right, transparent 37%, orange 0%, orange 63%, transparent 0%) red;
      background-size: 3px 3.75px;

      transform-origin: bottom;
      animation: 6s linear 0s infinite normal egg;
    }
    @keyframes egg {
      from {
        transform: rotate3d(1, 1, 1, -3deg);
        box-shadow: inset -320px -160px 192px -48px #444, 0px -16px 80px -32px orange;
      }
      50% {
        transform: rotate3d(1, 1, 1, 3deg);
        box-shadow: inset 320px -80px 192px 0px #444, 0px -32px 80px -24px orange;
      }
      to {
        transform: rotate3d(1, 1, 1, -3deg);
        box-shadow: inset -320px -160px 192px 416px #444, 0px -16px 80px -32px orange;
      }
    }






Не за что: https://codepen.io/yacc/pen/KgdxLa icon_smile.gif

8
 



С нами с 23.06.14
Сообщения: 931
Рейтинг: 190

Ссылка на сообщениеДобавлено: 12/09/16 в 03:15       Ответить с цитатойцитата 

Magic ) icon_wink.gif

9
 



С нами с 11.12.11
Сообщения: 351
Рейтинг: 737

Ссылка на сообщениеДобавлено: 12/09/16 в 17:14       Ответить с цитатойцитата 

Побежал делать яйца! Давно мечтал!

9
 

Web Дизайн Сервис

С нами с 08.06.04
Сообщения: 21704
Рейтинг: 2248

Ссылка на сообщениеДобавлено: 12/09/16 в 18:47       Ответить с цитатойцитата 

хуясе icon_eek.gif smail54.gif
как я жил без золотого то icon_surprised.gif

Графический дизайн! | Шаблоны CJ-tube!
tg: @Denzikzt | Den.evilin@gmail.com | Хостюсь тут 13 лет!

8
 



С нами с 23.06.14
Сообщения: 931
Рейтинг: 190

Ссылка на сообщениеДобавлено: 12/09/16 в 19:01       Ответить с цитатойцитата 

Отличная наработка на самом деле, можно же за основу взять, а в итоге делать не только яйцо, а к примеру ту же кнопку "View All", или линк на спонсора, которая будет вот так переливаться и манить кликнуть на нее icon_wink.gif

10
 

📈sflash.biz

С нами с 03.11.12
Сообщения: 3913
Рейтинг: 4447


Передовик Master-X (16.04.2018) Передовик Master-X (16.07.2018) Передовик Master-X (16.12.2022) Передовик Master-X (01.01.2023)
Ссылка на сообщениеДобавлено: 12/09/16 в 20:36       Ответить с цитатойцитата 

Яакк вроде не пил не пил, а тут на тебе! icon_confused.gif

9
 

Z

С нами с 15.05.05
Сообщения: 55144
Рейтинг: 7770


Передовик Master-X (16.10.2007) Передовик Master-X (16.12.2010) Передовик Master-X (01.02.2015) Передовик Master-X (16.05.2015) Передовик Master-X (01.06.2015) Ветеран трепа Master-X (16.06.2015)
Ссылка на сообщениеДобавлено: 12/09/16 в 22:57       Ответить с цитатойцитата 

охуенчик smail54.gif

andreich дарит вам акцию до 1 000р
КАТАЛОГ ПАРТНЕРОК | Бурж Гембла – тут! | RU Датинг на подписках

9
 

Любитель хорошего ;)

С нами с 08.06.07
Сообщения: 16151
Рейтинг: 6269


Передовик Master-X (01.06.2009) Передовик Master-X (01.10.2009) Передовик Master-X (16.10.2009) Передовик Master-X (01.12.2009) Передовик Master-X (01.11.2010) Ветеран трепа Master-X (16.02.2011)
Ссылка на сообщениеДобавлено: 13/09/16 в 02:30       Ответить с цитатойцитата 

Всегда мечтал о золотых яйцах. smail54.gif
Вот только притормаживает такая штука изрядно.

Отличные серверы от SGManaged!

9
 



С нами с 24.10.04
Сообщения: 18881
Рейтинг: 9010


Передовик Master-X (16.03.2006) Передовик Master-X (01.04.2006) Передовик Master-X (16.04.2006) Передовик Master-X (01.05.2006) Передовик Master-X (01.11.2006) Ветеран трепа Master-X ()
Ссылка на сообщениеДобавлено: 13/09/16 в 08:42       Ответить с цитатойцитата 

осталось сделать золотой хуй и золотую пизду, и можно делать сайты для взрослых smail101.gif

9
 

Elite mercenary

С нами с 26.04.09
Сообщения: 10376
Рейтинг: 1650

Ссылка на сообщениеДобавлено: 13/09/16 в 12:35       Ответить с цитатойцитата 

Реклама МТС smail101.gif

9
 



С нами с 30.04.05
Сообщения: 6652
Рейтинг: 3500


Передовик Master-X (01.10.2015) Передовик Master-X (16.03.2016) Передовик Master-X (01.04.2016) Передовик Master-X (16.04.2016) Передовик Master-X (01.05.2016) Ветеран трепа Master-X (01.06.2016)
Ссылка на сообщениеДобавлено: 13/09/16 в 15:20       Ответить с цитатойцитата 

Я вообще начало подумал, что топик про яйца Фобирже smail101.gif

Топовая партнерка под серый крипто-трафф

8
 



С нами с 14.10.03
Сообщения: 374
Рейтинг: 609


Передовик Master-X (01.10.2016)
Ссылка на сообщениеДобавлено: 13/09/16 в 16:37       Ответить с цитатойцитата 

Оффтопик: Skyworker: Фаберже, неуч icon_lol.gif

Пам пам

11
 
Новая тема Новая тема   

Текстовая реклама в форме ответа
Заголовок и до четырех строчек текста
Длина текста до 350 символов
Купить рекламу в этом месте!


Перейти:  



Спонсор раздела Стань спонсором этого раздела!

Реклама на сайте Advertise with us

Опросы

Рецепт новогоднего блюда 2022



Обсудите на форуме обсудить (11)
все опросы »