CSS3 тень для дизайн сайта - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

CSS3 тень для дизайн сайта (Несколько примеров теней на CSS3)

CSS3 тень для дизайн сайта

Angerfist

Воскресенье, 03 Апреля 2016, 13:53 | Сообщение 1

VIP

Сообщений:767

Награды: 21

Замечания: 20%

« 253 »

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

1. Тень для текста
Страница с примерами

Код

/*ВЫПУКЛЫЙ ТЕКСТ*/
h3 {
text-shadow: 1px 1px 1px #776a64, -1px 1px 1px #776a64;
color: #faf2e5;
}
/*ТЕНЬ БЕЗ РАЗМЫТИЯ*/
h3 {
color: #0ba7e2;
text-shadow: 2px 2px #888888;
}
/*ТЕКСТ С ПОДВОДКОЙ*/
h3 {
text-shadow: 1px 1px white, 2px 2px #32231c; color: #b9ba1e;
}
/*ТЕКСТ С ОБВОДКОЙ*/
h3 {
text-shadow: 1px 1px white, 2px 2px white, -1px -1px white, -2px -2px white, -1px 1px white, 1px -1px white, -2px 2px white, 2px -2px white, -3px -3px 4px #4a3321, -3px 3px 4px #4a3321, 3px 3px 4px #4a3321, 3px -3px 4px #4a3321; color:#302e2a;
}
/*ТЕНЬ С РАЗМЫТИЕМ*/
h3 {
color:#9d2498;
text-shadow: 3px 3px 5px black;
}
/*ТЕНЬ В ВИДЕ КОНТУРА-1*/
h3 {
color:#f8ab8d;
text-shadow: -1px 0 1px #612F1B, 1px 0 1px #612F1B, 0 -1px 1px #612F1B, 0 1px 1px #612F1B;
}
/*ТЕНЬ В ВИДЕ КОНТУРА-2*/
h3 {
text-shadow: 1px 1px 0 #4e75a1, 1px -1px 0 #4e75a1, -1px 1px 0 #4e75a1, -1px -1px 0 #4e75a1;
color: white;
}
/*ТЕНЬ В ВИДЕ КОНТУРА-3*/
h3 {
text-shadow: 1px 0 0 #E1C359, 0 -1px 0 #004E66, 0 1px 0 #004E66, -1px 0 0 #004E66;
color: white;
letter-spacing: 2px;
}
/*ЦВЕТНАЯ ТЕНЬ*/
h3 {
color:#6bcbc7;
text-shadow: 3px 3px 3px #d1784a;
}
/*ТЕНЬ, СМЕЩЕННАЯ ВВЕРХ*/
h3 {
color:#f2238b;
text-shadow: -2px -2px #474a5d;
}
/*ВНЕШНЯЯ И ВНУТРЕННЯЯ ТЕНЬ*/
h3 {
color:#90d7ed;
text-shadow: -1px -1px #e85625, 1px 1px #0f344f;
}
/*ВНУТРЕННЯЯ ТЕНЬ*/
h3 {
color:#fcbe11;
text-shadow: 2px 2px #4b2f24;
}
/*СВЕЧЕНИЕ*/
h3 {
color:#583860;
text-shadow: 0 0 30px #d2316e;
}
/*РЕТРО-СТИЛЬ*/
h3 {
color:#F23A38;
text-shadow: -1px 1px 0px #FFEB59, -2px 2px 0px #FFEB59, -3px 3px 0px #D2D7D0, -4px 4px 0px #D2D7D0, -5px 5px 0px #71966B, -6px 6px 0px #71966B;
}
/*СТИЛЬ ТВИТТЕР*/
h3 {
color: #3CF;
text-shadow: -1px 0 1px white, 0 -1px 1px white, 0 1px 1px white, 1px 0 1px white, 0 0 8px white, 0 0 8px white, 0 0 8px white, 2px 2px 3px black;
}
/*3-D ТЕКСТ*/
h3 {
color:FFD20C;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
/*НЕОНОВЫЙ ТЕКСТ*/
h3 {
color:#B1F4F8;
text-shadow: 0 0 10px #B1F4F8, 0 0 20px #B1F4F8, 0 0 30px #B1F4F8, 0 0 40px #2F2BAD, 0 0 50px #2F2BAD;
}
/*ДЛИННАЯ ТЕНЬ*/
h3 {
color:#0E0A07;
text-shadow: 1px 1px #896648, 2px 2px #896648, 3px 3px #95755A, 4px 4px #95755A, 5px 5px #A1856D, 6px 6px #A1856D, 7px 7px #B8A391, 8px 8px #B8A391;
}
/*ТЕНЬ, СМЕЩЕННАЯ ПО ОСИ Х*/
h3 {
color: #142a50;
text-shadow: 2px 0 0 #D8343B;
}
/*ТЕНЬ, СМЕЩЕННАЯ ПО ОСИ Y*/
h3 {
color: #cbc4b6;
text-shadow: 0 2px 2px #354f61;
}
/*РАЗМЫТЫЙ ТЕКСТ*/
h3 {
text-shadow: 0 0 5px #7cc4c1;
color: transparent;
transition: text-shadow 0.4s linear;
}
h3:hover {
text-shadow:0 0 0 #7cc4c1;
}
/*ПРОЗРАЧНЫЙ ТЕКСТ*/
h3 {
text-shadow: -1px -1px 1px white, 1px 1px 1px black;
color: #aca196;
opacity: 0.4;
}
/*ТИПОГРАФСКИЙ ТЕКСТ*/
h3 {
color: #0E0A07;
text-shadow: 0 1px 1px #4d4d4d;
}
/*АНАГЛИФ*/
h3 {
letter-spacing: 5px;
color: #222222;
text-shadow: 2px 0 #ff3232, -2px 0 #00dcdc;
}
/*LETTERPRESS*/
h3 {
font-size: 50px;
line-height: 1;
letter-spacing: 2px;
padding: 5px 30px;
background: #F9C941;
color: #F9C941;
display: inline-block;
text-shadow: 1px 1px 0 #F3E7CF, -1px -1px 0 #56433D;
}

2. Тень для блока
Страница с примерами

Код

/*ТЕНЬ 1*/
p {
box-shadow: 2px 2px 5px 2px rgba(0,0,0, .2);
}
/*ТЕНЬ 2*/
p {
box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);
}
/*ТЕНЬ 3*/
p {
box-shadow: 0 15px 15px -10px rgba(0,0,0, .2);
}
/*ТЕНЬ 4*/
p {
box-shadow: 0 0 0 5px rgba(0,0,0, .2);
}
/*ТЕНЬ 5*/
p {
box-shadow: 0 0 0 5px #ACCECD, 0 0 0 10px #B7AE9D, 0 0 0 15px #544E3E;
}
/*ТЕНЬ 6*/
p {
box-shadow: 0 1px 5px rgba(0, 0, 0, .3), -20px 0 20px -20px rgba(0, 0, 0, .5), 20px 0 20px -20px rgba(0, 0, 0, .5), 0 0 40px rgba(0, 0, 0, .2) inset;
}
/*ТЕНЬ 7*/
p {
box-shadow: 5px 5px 10px 0 rgba(179, 196, 187, 0.5) inset, -5px -5px 10px 0 rgba(179, 196, 187, 0.5) inset;
}
/*ТЕНЬ 8*/
p {
box-shadow: 0 1px 1px 0 rgba(0,0,0,.2), 0 -1px 1px 0 rgba(0,0,0,.2), 0 0 0 7px white inset, 0 0 10px 7px #b3c4bb inset;
}
/*ТЕНЬ 9*/
p {
box-shadow: 5px -5px 0 0 #CDE0EE, 10px -10px 0 0 #5D8BAD, 5px -5px 0 0 #CDE0EE inset, 10px -10px 0 0 #5D8BAD inset, 15px 10px 10px 0 rgba(0,0,0, .2);
transition: box-shadow 0.5s linear;
}
p:hover {
box-shadow: 5px -5px 0 0 #5D8BAD, 10px -10px 0 0 #CDE0EE, 5px -5px 0 0 #5D8BAD inset, 10px -10px 0 0 #CDE0EE inset;
}
/*ТЕНЬ 10*/
p {
box-shadow: inset 0 -4px 0 0 #f6f6f6, inset 0 -5px 0 0 #ddd, inset 0 -10px 0 0 #f6f6f6, inset 0 -11px 0 0 #ddd, 0 2px 8px -2px rgba(0, 0, 0, 0.1);
background: white;
border: 1px solid #ccc;
border-radius: 5px;
}
/*ТЕНЬ 11*/
p {
border-radius: 5px;
box-shadow: 1px 1px 0 0 #CBCFD1, 2px 2px 0 0 #CBCFD1, 3px 3px 0 0 #CBCFD1, 4px 4px 0 0 #CBCFD1, 5px 5px 0 0 #CBCFD1, -1px -1px 0 0 #607584, -2px -2px 0 0 #607584, -3px -3px 0 0 #607584, -4px -4px 0 0 #607584, -5px -5px 0 0 #607584;
}
/*ТЕНЬ 12*/
p {
border-radius: 5px;
box-shadow: 4px 0 0 4px #CCC3A4, 0 0 0 8px #8F755C;
}
/*ТЕНЬ 13*/
p {
background: #cbe3eb;
border-radius: 20px;
box-shadow: 3px -3px 5px #8E9FA4 inset, -3px 3px 5px #8E9FA4 inset, -3px -3px 5px #8E9FA4 inset, 3px 3px 5px #8E9FA4 inset,6px -6px 8px #A2B6BC inset, -6px 6px 8px #A2B6BC inset, -6px -6px 8px #A2B6BC inset, 6px 6px 8px #A2B6BC inset, 9px -9px 11px #B7CCD4 inset, -9px 9px 11px #B7CCD4 inset, -9px -9px 11px #B7CCD4 inset, 9px 9px 11px #B7CCD4 inset, 0 3px 8px -3px rgba(0,0,0,.8);
}
/*ТЕНЬ 14*/
p {
background: linear-gradient(to top,#FDCF6E 0%, #fcba30 30%, #fcba30 70%,#FDCF6E 100%);
border-radius: 20px;
box-shadow: 2px -2px 0 #C9972E, 4px -4px 0 #AA822E, 6px -6px 0 #775F2C, 8px -8px 0 #4F432B, 10px -10px 0 #302e2a;
transition: box-shadow 0.5s linear;
}
p:hover{
box-shadow: -2px 2px 0 #C9972E, -4px 4px 0 #AA822E, -6px 6px 0 #775F2C, -8px 8px 0 #4F432B, -10px 10px 0 #302e2a;
}
/*ТЕНЬ 15*/
p {
border-radius: 30px;
background: #F1E9E1;
box-shadow: 4px 4px 4px #CFC9BE inset, 1px 1px 1px #CFC9BE;
}
/*ТЕНЬ 16*/
p {
box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.3);
background: white;
}
/*ТЕНЬ 17*/
p {
background: white;
border-radius: 10px;
box-shadow: 1px 1px 0 rgba(227,218,219,1), 3px 3px 0 rgba(227,218,219,1), 5px 5px 0 rgba(227,218,219,0.9), 7px 7px 0 rgba(227,218,219,0.9), 9px 9px 0 rgba(227,218,219,0.8), 11px 11px 0 rgba(227,218,219,0.8), 13px 13px 0 rgba(227,218,219,0.7), 15px 15px 0 rgba(227,218,219,0.7);
}
/*ТЕНЬ 18*/
p {
box-shadow: 0 0 2px black, 5px 5px 0 #D8CB3E, -5px 5px 0 #F6DD8D, -5px -5px 0 #C3E4C7, 5px -5px 0 #FAAB8D;
}
/*ТЕНЬ 19*/
p {
position: relative;
background: white;
}
p:after {
content: "";
display: block;
position: absolute;
z-index: -1;
height: 20px;
bottom: 0;
right: 1em;
left: 1em;
border-radius: 50%;
box-shadow: 0 0 10px 10px rgba(0,0,0,.2);
}
/*ТЕНЬ 20*/
p {
position: relative;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
background: white;
}
p:before {
content: "";
display: block;
position: absolute;
z-index: -1;
height: 20px;
width: 30%;
bottom: 0;
left: 10px;
box-shadow: 0 0 10px 10px rgba(0,0,0,.2);
border-bottom-right-radius: 100%;
}
p:after {
content: "";
display: block;
position: absolute;
z-index: -1;
height: 20px;
width: 30%;
bottom: 0;
right: 10px;
box-shadow: 0 0 10px 10px rgba(0,0,0,.2);
border-bottom-left-radius: 100%;
}

Источник материала: html5book.ru

Прикрепления: 1583316.png (115.5 Kb) · 8534479.png (100.6 Kb)

No regrets

Сообщение отредактировал
Angerfist - Воскресенье, 03 Апреля 2016, 13:59

[ RU ]

Kosten

Воскресенье, 03 Апреля 2016, 13:59 | Сообщение 2

Администраторы

Сообщений:44171

Награды: 70

« 565 »

Angerfist, отлично для дизайн сайта пойдет, с меня плюс, отличный материал.

[ RU ]

Angerfist

Воскресенье, 03 Апреля 2016, 14:00 | Сообщение 3

VIP

Сообщений:767

Награды: 21

Замечания: 20%

« 253 »

Ага вот самому пригодилось, решил надо поделится

No regrets

Сообщение отредактировал
Angerfist - Воскресенье, 03 Апреля 2016, 14:03

[ RU ]

Kosten

Воскресенье, 03 Апреля 2016, 14:03 | Сообщение 4

Администраторы

Сообщений:44171

Награды: 70

« 565 »

Angerfist, но у вас реально на хороший материал чуйка еще та. cool

[ RU ]

workman

Понедельник, 04 Апреля 2016, 09:02 | Сообщение 5

VIP

Сообщений:1716

Награды: 9

« 155 »

Ну вот и я решил добавить не большое разнообразие к данной теме. Может кому и пригодится ...

Код

<div class="bl-gde31Ru">
<p>Содержимое блока</p>
</div>

Код

.bl-gde31Ru p{font-size:16px;font-weight:bold}
.bl-gde31Ru{position:relative;width:85%;padding:1em;margin:2em 10px 4em;background:#FFF;border-radius:4px;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;-moz-border-radius:4px}
.bl-gde31Ru:before,.bl-gde31Ru:after{content:"";position:absolute;z-index:-2;bottom:15px;left:10px;width:50%;height:20%;max-width:300px;-webkit-box-shadow:0 15px 10px rgba(0,0,0,0.7);-moz-box-shadow:0 15px 10px rgba(0,0,0,0.7);box-shadow:0 15px 10px rgba(0,0,0,0.7);-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-ms-transform:rotate(-3deg);-o-transform:rotate(-3deg);transform:rotate(-3deg)}
.bl-gde31Ru:after{right:10px;left:auto;-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-ms-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg)}

Прикрепления: 7966498.png (8.9 Kb)

[ RU ]

Kosten

Среда, 06 Апреля 2016, 22:49 | Сообщение 6

Администраторы

Сообщений:44171

Награды: 70

« 565 »

workman, это опять проверять на тестовом и выводить изображение, чтоб понимали, что и зачем этот код.)

[ RU ]

workman

Четверг, 07 Апреля 2016, 09:49 | Сообщение 7

VIP

Сообщений:1716

Награды: 9

« 155 »

Цитата Kosten (

)

это опять проверять на тестовом и выводить изображение, чтоб понимали, что и зачем этот код.)

Так я под сполером показал и дал ссылку на песочницу

[ RU ]

Траст

Среда, 20 Апреля 2016, 17:35 | Сообщение 8

Проверенные

Сообщений:101

« 6 »

Angerfist, согласен с вами, что красиво все будет смотрется, но если в дизайн ставить, так по немногу и хороший вес набирет, просто в меру нужно.

Быстро, дешево и сердито!

[ RU ]

FeStemBer

Среда, 20 Апреля 2016, 18:39 | Сообщение 9

Проверенные

Сообщений:355

Награды: 1

« 13 »

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

[ RU ]

Сафрон

Среда, 20 Апреля 2016, 19:16 | Сообщение 10

VIP

Сообщений:224

Награды: 1

« 6 »

Все у вас что то весит, так правильно, устанавливайте от uCoz и как говорят в Армий, купите себе поросячий голову и потом еб...те ней мозги, так как понятно, что все имеет свой вес, и думаю для вас не открою Америку, что чем красивей сделано, где линий четко прописаны и имеют тени, то и весит нормально.

[ RU ]

csretven

Среда, 20 Апреля 2016, 19:30 | Сообщение 11