№ 1085 - Dark Blue Shadow

[winterwolf]

Дизайн резиновый, немного анимации, теней. Оформленны кнопки, поля ввода, голосовалка, поле кода и т.д.

Пример

еще скриншоты

При использовании дизайна просьба ставить баннер сообщества

Настройки

дизайн табличный, навигационка слева
Дизайн блочный, меню - справа
Шрифт - Trbushet MS, 13
заголовок - жирный, 14, #000
текст - обычный, 13, #9a9a9a
ссылки - #fff
оффтоп - #9a9a9a

Примерить

ваш дневник/?design=3989138

код

{_____________ Images _____________}
 .submit{background: #282422 url('IMAGE1') !important; }
 #message, #JournalLinks textarea, .code, input.text{background: url('IMAGE2') left repeat-y #1c1a18; }
 html{background: url('IMAGE3') -20px 0 repeat-y #282422}
 body{background: url('IMAGE4') repeat-x top; }
 #wrapper{background: url('IMAGE5') -20px 0 no-repeat;}
 {__________________________________}
 body{padding: 0px}
 #wrapper{min-width:900px;}
 a, .linkssection .postLinks a { color: #296387; text-decoration: none !important }
 a:hover{color: #3e96ce;}
 #message, #JournalLinks textarea, .code{ border-bottom: 1px solid #302d2b !important; border-right: 1px solid #302d2b !important; border-top: 1px solid #0a0a0b !important; padding: 5px; width: 99% !important}
 .code{border-left: none; background: #1C1A18; border-left: 1px solid #0a0a0b !important;}
 input.text{ border-bottom: 1px solid #302d2b !important; border-right: 1px solid #302d2b !important; border-top: 1px solid #0a0a0b !important; padding: 5px; border-radius: 0 8px 8px 0;}
 .avatar img{ border-color: #121214 #302D2B #302D2B #121214; border-style: solid; border-width: 3px;}
 #thisDiaryPhoto img{ border-color: #0b141f #436184 #436184 #0b141f; border-style: solid; border-width: 3px; border-color: rgba(11,20,31,0.8) rgba(67,97,132,0.5) rgba(67,97,132,0.5) rgba(11,20,31,0.8); }
 .singlePost, .singleComment {border-bottom: 1px solid #121110; border-top: 1px solid #383635; margin-bottom: 0px !important; padding-right: 5px; padding-left:10px;}
 #epigraph .singlePost{border: none;}
 .header, .postDate{color: 000 !important; text-shadow: 1px 1px #333;}
 .order_button{border-bottom: 1px solid #121110; margin-bottom: 0px !important}
 {____________ Side ________________}
 #side a{color: #6e8fb5; text-shadow: 1px 1px rgba(0, 0, 0, 0.6);}
 #side a:hover{text-decoration: none; color: #fff;}
 #thisDiaryOwner{padding-right: 0px;}
 #side h1{ padding-bottom: 3px; padding-top: 3px;}
 #side h1 a, #pchs_title {color: #000; text-shadow: 1px 1px #455b7e;}
 #side h1 a{color: #000 !important;}
 #thisDiaryInfo a{ text-shadow: 1px 1px #2b4365; color: #000; font-weight: bold; font-size: 14px}
 #thisDiaryInfo a:hover{ color: #000;}
 #TagsList { background: none rgba(0,0,0,0.4); border-bottom: 1px solid #365482; border-top: 1px solid #121E32; font-size: 90%; padding: 10px 10px 10px 20px; margin-left: -10px;}
 .menuSection { border-top: 1px solid #36527E; border-top: 1px solid rgba(54,82,126,0.4); border-bottom: 1px solid #152235; border-bottom: 1px solid rgba(21,34,53,0.5);margin-bottom: 0 !important; }
 #thisDiaryInfo{ background: rgba(0,0,0,0.3); border-top: 1px solid #0c182b; border-bottom: 1px solid #355079;}
 #YaSearch{border-top:none;}
 #epigraph{background: rgba(0,0,0,0.4); border-bottom: 1px solid #302d2b; border-top: none;}
 .left #page-t { margin-left: 226px; }
 {___________ Transition ___________}
 #side a, #topNav li a, .postLinksBackg li a, .urlLink a, .atTag a, .authorName a, .paragraph a{ -moz-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -ms-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -o-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); }
 #side a:hover, #topNav li:hover a, .postLinksBackg li:hover a{text-decoration: none; -moz-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -ms-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);-o-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);-webkit-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);transition-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);}
 {_________ Top Navigation _________}
 #topNav a{ font-weight: bold; color: #666 !important; text-shadow: 1px 1px 4px #000;}
 #topNav li a{ }
 #topNav li:hover a{text-shadow: 1px 1px #000; color: #296387 !important;}
 #topNav a:hover{ text-decoration:none;}
 {____________ Post links __________}
 .postLinksBackg li a, .urlLink a, .atTag a, .authorName a, .authorName a, .paragraph a{color: #296387!important; text-shadow: 1px 1px #000; text-decoration: none}
 .postLinksBackg li:hover a, .urlLink a:hover, .atTag a:hover, .authorName:hover a, .paragraph a:hover{text-shadow: 1px 1px #000; color: #3e96ce !important; -moz-transition-duration:350ms; -webkit-transition-duration:350ms; -o-transition-duration:350ms; transition-duration: 350ms;}
 {____________ Buttons _____________}
 .submit{ padding: 5px 10px 5px 10px; border-radius: 3px; color: #ddd !important; border-bottom: 1px solid #0a0a0b !important; border-right: 1px solid #0a0a0b !important; border-top: 1px solid #302d2b !important; border-left: 1px solid #302d2b !important; opacity: 1!important; color:#000!important; text-shadow: 1px 1px #444; background: -moz-linear-gradient(center top , #3E3D3D 0%, #323232 40%, #323232 100%) repeat scroll 0 0 transparent !important; }
 .submit:hover{background: -moz-linear-gradient(center top, #515050 0%, #4a4848 40%, #323232 100%) repeat scroll 0 0 transparent !important; text-shadow: 1px 1px #555;}
 #addCommentArea{ border-top: 1px solid #383635}
 {________________ Vote ____________}
 { All images }
 .voting img[src*=".gif"]{ border-width: 1px 0 1px 0; padding: 12px 3px 0 0; height: 0px; border-style: solid; border-color: #0A0A0B #302D2B #302D2B #0A0A0B;}
 { Only left and right one }
 .voting img[src*="-l.gif"]{ border-width: 1px 0 1px 1px; border-radius: 3px 0 0 3px}
 .voting img[src*="-r.gif"]{ border-width: 1px 1px 1px 0; border-radius: 0 3px 3px 0}
 .voting img[src*="r1"]{ background: #367425;}
 .voting img[src*="r2"]{ background: #7B0002; background: rgba(123,0,2,0.5)}
 .voting img[src*="r3"]{ background: #521668;}
 .voting img[src*="r4"]{ background: #DAC800;}
 .voting img[src*="r5"]{ background: #01A696;}
 .voting img[src*="r6"]{ background: #85A729;}
 .voting img[src*="r7"]{ background: #A66101;}
 .voting img[src*="r8"]{ background: #0F2F85;}
 .voting img[src*="r9"]{ background: #29A77D;}
 .voting img[src*="r10"]{ background: #A60159;}
 {_____________ Other ______________}
 .quote_text { background: none repeat scroll 0 0 #23201E; border: 1px solid #181310; color: #666666; display: block; padding: 5px; }
 .offtop { color: #555 !important; }
 #commentsArea_title, #pageBar, #Stats{background: rgba(0,0,0,0.2)}
 #commentsArea_title{color: #444; text-shadow: 1px 1px #000;}
 #pchs_title{color: rgba(0,0,0,0.7)}

картинки
Картинки, используемые в дизайне:
IMAGE1
IMAGE2
IMAGE3
IMAGE4
IMAGE5


Все картинки рисовал
Идея notepad++

Comments

[T. M. Riddle]

Это здорово! Очень хорошая работа. Ещё бы других цветовых схем, правда...

[kittymara]

Да, хотелось бы и в другом цвете. Диз понравился.

[Helga Rais]

Ношу с огромным удовольствием, но страдаю от того, что он темный. Так что да, было бы в светлом цвете - было бы просто