С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
 
|
 Добавлено: 11/09/16 в 21:54 |
Есть div (один, это важно) и css. Сделать золотое яйцо.
- Контейнер
| Код: |
.box {
display: inline-block;
width: 256px;
height: 320px;
background: orange;
border-radius: 60%/70% 70% 50% 50%;
}
|
- Текстура
| Код: |
.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;
}
|
- Свет
| Код: |
.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;}
|
- Крутим
| Код: |
.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;}
} |
- Вертим
| Код: |
.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);}
}
|
- И все вместе
| Код: |
.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 
|
|
|
|
| |
С нами с 23.06.14
Сообщения: 931
Рейтинг: 190
|
| Добавлено: 12/09/16 в 03:15 |
Magic ) 
|
|
|
|
| |
С нами с 11.12.11
Сообщения: 351
Рейтинг: 737
|
| Добавлено: 12/09/16 в 17:14 |
Побежал делать яйца! Давно мечтал!
|
|
|
|
| |
Web Дизайн Сервис
С нами с 08.06.04
Сообщения: 21623
Рейтинг: 2246
|
| Добавлено: 12/09/16 в 18:47 |
хуясе  
как я жил без золотого то 
|
|
|
|
| |
С нами с 23.06.14
Сообщения: 931
Рейтинг: 190
|
| Добавлено: 12/09/16 в 19:01 |
Отличная наработка на самом деле, можно же за основу взять, а в итоге делать не только яйцо, а к примеру ту же кнопку "View All", или линк на спонсора, которая будет вот так переливаться и манить кликнуть на нее
|
|
|
|
| |
📈sflash.biz
С нами с 03.11.12
Сообщения: 3913
Рейтинг: 4447
|
| Добавлено: 12/09/16 в 20:36 |
Яакк вроде не пил не пил, а тут на тебе! 
|
|
|
|
| |
Z
С нами с 15.05.05
Сообщения: 55045
Рейтинг: 7770
|
| Добавлено: 12/09/16 в 22:57 |
охуенчик
|
|
|
|
| |
Любитель хорошего ;)
С нами с 08.06.07
Сообщения: 16151
Рейтинг: 6269
|
| Добавлено: 13/09/16 в 02:30 |
Всегда мечтал о золотых яйцах.
Вот только притормаживает такая штука изрядно.
|
|
|
|
| |
С нами с 24.10.04
Сообщения: 18881
Рейтинг: 9010
|
| Добавлено: 13/09/16 в 08:42 |
осталось сделать золотой хуй и золотую пизду, и можно делать сайты для взрослых 
|
|
|
|
| |
Elite mercenary
С нами с 26.04.09
Сообщения: 10376
Рейтинг: 1650
|
| Добавлено: 13/09/16 в 12:35 |
Реклама МТС
|
|
|
|
| |
С нами с 30.04.05
Сообщения: 6634
Рейтинг: 3472
|
| Добавлено: 13/09/16 в 15:20 |
Я вообще начало подумал, что топик про яйца Фобирже
|
|
|
|
| |
С нами с 14.10.03
Сообщения: 374
Рейтинг: 609
|
| Добавлено: 13/09/16 в 16:37 |
Оффтопик: Skyworker: Фаберже, неуч 
|
|
|
|
| |
