- правильные геометрические фигуры в дизайне
- без пестроты и буйства красок, три основных цвета
задник можно черный, но подложка светлая, текст тёмный на светлом фоне и должен легко читаться (!)
- окно цитаты с четырёх сторон в рамочке и чуть другим цветом, чем основной фон
- по шапке, которая картинка в верхней части - на Ваших дизайнах они на многих очень больше, на 2/3 экрана, но пусть она будет поменьше. как на концепте, не больше.
Техническое задание на DEEP SPACE
Страница: 1
Сообщений 1 страница 14 из 14
Поделиться12017-03-03 22:34:25
Поделиться22017-03-05 17:33:25
Свернутый текст
Поделиться32017-03-05 19:25:32
Код:
html, body { background: url("http://sf.uploads.ru/hu5x0.jpg") repeat-x top left, url("http://sf.uploads.ru/2YCZB.jpg") center; background-color: #06060b;} body {margin: 0 auto; overflow-x: hidden;} #pun {background-color: #06060b; background-image: url(http://s7.uploads.ru/Tbap5.jpg); }
Поделиться42017-03-05 23:28:01
Код:
<script><!--Своя картинка или Слово в Панель навигации --> var Img_Word=0; //0-Картинка;1-Cлово /Ставим картинку или Слово ? navlinks=new Array( "navextra1","Слово или ссылка на картинку", // Дополнительный пункт меню 1 "navextra2","Слово или ссылка на картинку", // Дополнительный пункт меню 2 "navextra3","Слово или ссылка на картинку", // Дополнительный пункт меню 3 "navindex","Слово или ссылка на картинку", // Форум "navuserlist","Слово или ссылка на картинку",// Участники "navrules","Слово или ссылка на картинку", // Правила "navsearch","Слово или ссылка на картинку", // Поиск "navprofile","Слово или ссылка на картинку", // Профиль "navpm","Слово или ссылка на картинку", // Сообщения "navadmin","Слово или ссылка на картинку", // Администрирование "navregister","Слово или ссылка на картинку",// Регистрация "navlogin","Слово или ссылка на картинку", // Войти "navlogout","Слово или ссылка на картинку" // Выход - !ПОСЛЕДНИЙ элемент без запятой ) var s,i;for (i=0; i < navlinks.length; i++){s=navlinks[i+1]; if(!Img_Word){s='<img class="navlinks" src="'+s+'" border="0" />'} $("#"+navlinks[i]+" a").html("<span>"+s+"</span>");i++;} </script>
Поделиться52017-03-05 23:43:08
Код:
<noedit><div id="google_translate_element"></div><script> function googleTranslateElementInit() { $(document).ready(function(){ new google.translate.TranslateElement({ pageLanguage: 'ru' }, 'google_translate_element'); }); } </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"> </script>
Поделиться62017-03-06 20:57:03
Код:
<script><!--Своя картинка или Слово в Панель навигации --> var Img_Word=1; //0-Картинка;1-Cлово /Ставим картинку или Слово ? navlinks=new Array( "navindex","HOME", // Форум "navuserlist","USERS",// Участники "navsearch","SEARCH", // Поиск "navprofile","ROFILE", // Профиль "navpm","MAIL", // Сообщения "navadmin","TOOLS", // Администрирование "navregister","JOIN US",// Регистрация "navlogin","ENTER", // Войти "navlogout","OUT" // Выход - !ПОСЛЕДНИЙ элемент без запятой ) var s,i;for (i=0; i < navlinks.length; i++){s=navlinks[i+1]; if(!Img_Word){s='<img class="navlinks" src="'+s+'" border="0" />'} $("#"+navlinks[i]+" a").html("<span>"+s+"</span>");i++;} </script>
Поделиться72017-03-07 10:24:04
Код:
/* D1 Logo and description -------------------------------------------------------------*/ /* D1.1 */ #pun-title { margin: 0; border-style: none none none none; border-width: 1px 1px 0 1px; } /* D1.2 */ #pun-title h1 { display : block; height : 40px; padding: 2em 1em 0 1em; } /* D1.3 */ #pun-title .container { border-style: none none none none; } /* D1.4 */ #pun-title h1 span { font-size: 1.5em; } /* D1.4 */ #pun-title h1 span { font-size: 1.5em; } #pun-title table { border: none; height: 339px!important; width: 1600px!important; overflow: hidden; } #pun-title td.title-logo-tdl { border: none; width: 100%; } #pun-title td.title-logo-tdr { border: none; width: 420px; } /* D2 Page navigation -------------------------------------------------------------*/ /* D2.1 */ #pun-pagelinks { position: absolute; top: -15px; left: 0; margin: 0; border: none; padding: 0; width: 100%; } /* D2.2 */ #pun-pagelinks .container { background: transparent; border: none; padding: 0} /* D2.3 */ #pun-pagelinks .container li { display: inline } /* D2.4 */ #pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover { height: 2em; line-height: 2em; padding: 0; font-size: 1.1em; margin-left: -9999px; display: block; float:left; width: 100%; } /* D2.5 */ #pun-pagelinks a:active, #pun-pagelinks a:focus { position:relative; margin: 0; } #pun-pagelinks li a span { display:block; margin: 0 1em } /* D3 Forum navigation -------------------------------------------------------------*/ /* D3.1 */ #pun-navlinks, #pun-navlinks .container { border-style: none; border-width: 0; position: top center } /* D3.2 */ #pun-navlinks .container { width: 100%; margin-top: -282px; /* margin-left: 18px; */ text-align: center; position: absolute; } /* D.3 */ #pun-navlinks li { display: inline; padding-right: 1em; } /* D3.4 */ #pun-navlinks li a { font-style: normal!important; color: #68221c!important; text-transform: uppercase; display: inline-block!important; font-family: 'Open Sans Condensed', sans-serif; font-size: 16px!important; font-weight: 400!important; height: 18px!important; line-height: 19px!important; min-width: 40px!important; padding: 0px 8px!important; position: relative!important; font-variant: uppercase !important; text-shadow: 1px 1px 1px #000000!important; } #pun-navlinks li a:hover, #pun-navlinks li a:focus, #pun-navlinks li a:active { text-shadow:3px 3px 3px #143800,-3px -3px -3px #5B0000!important; color:#9a7e7b!important } /* D4 User links -------------------------------------------------------------*/ /* D4.1 */ #pun-ulinks { margin: -5px!important; background-color: transparent!important; font-family: "Arial"!important; font-variant: small-caps !important!important; margin-left: 160px!important; font-size: 11px!important; } /* D4.2 */ #pun-ulinks .container { position: absolute!important; top: 512px!important; margin: -170px -142px auto!important; padding: 0.3em!important; border: none!important; background-color: transparent!important; width: 900px!important; font-weight: normal!important; text-align: center!important; /* text-shadow: 0.5px 0.5px 0.5px #5ea8bc!important; */ } /* D4.3 */ #pun-ulinks li, #pun-ulinks li a { display: inline!important; font-family: sans-serif; border-left-style: none!important; border-left-width: 0px!important; color: #442b26!important; font-size: 13px; } #pun-ulinks li a:hover { color: #8c2b19!important; } /* D4.4 */ #pun-ulinks li a { padding: 0 0.3em 0 0.6em } /* D4.5 */ #pun-ulinks li.item1, #pun-ulinks li.item1 a { border-left-style: none; border-left-width: 0; padding-left: 0 } /* D5 Welcome box and Top Breadcrumbs -------------------------------------------------------------*/ /* D5.1 */ #pun-status, #pun-status .container { border-bottom: none; margin-bottom: 0; } /* D5.2 */ #pun-status .container { padding: 0.8em 1em 1em 1em; } /* D5.3 */ #pun-status span { white-space: nowrap; margin-right: 0.5em; } /* D5.4 */ #pun-crumbs1 { font-weight: bold; overflow: hidden; margin-top: 0; } /* D5.5 */ #pun-crumbs1 p.container { border-top: none; padding: 1em 1em 0.8em 1em; font-size: 1.1em; } /* D5.6 */ #pun-break1 { margin: 0 1em; border-style: solid none; border-width: 1px 0; height: 0; margin: -2px 1em; position: relative; z-index: 1; } /* D6 Announcement -------------------------------------------------------------*/ /* D6.1 */ #pun-announcement h2 { padding: 0; margin: 0 1em -3.5em 1em; border-style: none none solid none; border-width: 0 0 1px 0; position: center; font-weight: bold; } /* D6.2 */ #pun-announcement h2 span { display: block; padding: 1em 0 0.8em 0; border-bottom-style: solid; border-bottom-width: 1px; } /* D6.3 */ #pun-announcement .container { padding: 4.3em 1em 1em 1em; }
Поделиться82017-03-07 10:24:25
Код:
/* D1 Logo and description -------------------------------------------------------------*/ /* D1.1 */ #pun-title { margin: 0; border-style: none none none none; border-width: 1px 1px 0 1px; } /* D1.2 */ #pun-title h1 { display : block; height : 450px; padding: 2em 1em 0 1em; } /* D1.3 */ #pun-title .container { border-style: none none none none; } /* D1.4 */ #pun-title h1 span { font-size: 1.5em; display: none; } #pun-title table { border: none; height: 450px; width: 100%; } #pun-title td.title-logo-tdl { border: none; width: 100%; } #pun-title td.title-logo-tdr { border: none; width: 468px; } /* D2 Page navigation -------------------------------------------------------------*/ /* D2.1 */ #pun-pagelinks { position: absolute; top: -15px; left: 0; margin: 0; border: none; padding: 0; width: 100%; } /* D2.2 */ #pun-pagelinks .container { background: transparent; border: none; padding: 0} /* D2.3 */ #pun-pagelinks .container li { display: inline } /* D2.4 */ #pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover { height: 2em; line-height: 2em; padding: 0; font-size: 1.2em; margin-left: -9999px; display: block; float:left; width: 100%; } /* D2.5 */ #pun-pagelinks a:active, #pun-pagelinks a:focus { position:relative; margin: 0; } #pun-pagelinks li a span { display:block; margin: 0 1em } /* D3 Forum navigation -------------------------------------------------------------*/ /* D3.1 */ #pun-navlinks, #pun-navlinks .container { border-style: none; border-width: 0; } /* D3.2 */ #pun-navlinks .container { width: 100%; margin-top: -455px; margin-left: 90px; text-align: left; position: absolute; } /* D.3 */ #pun-navlinks li { display: inline; padding-right: 1em; } /* D3.4 */ #pun-navlinks li a { font-size: 1.1em; font-family: 'Furore'; position: relative!important; } /* D4 User links -------------------------------------------------------------*/ /* D4.1 */ #pun-ulinks { margin: 0px; } /* D4.2 */ #pun-ulinks .container { border-top: none; padding: 0px 0px; text-align: center; margin-top: -51px; } /* D4.3 */ #pun-ulinks li, #pun-ulinks li a { display: inline; border-left-style: none; border-left-width: 1px; white-space: nowrap; } /* D4.4 */ #pun-ulinks li a { padding: 0 0.3em 0 0.6em } /* D4.5 */ #pun-ulinks li.item1, #pun-ulinks li.item1 a { border-left-style: none; border-left-width: 0; padding-left: 0 } /* D5 Welcome box and Top Breadcrumbs -------------------------------------------------------------*/ /* D5.1 */ #pun-status, #pun-status .container { border-bottom: none; margin-bottom: 0; } /* D5.2 */ #pun-status .container { padding: 0.8em 1em 1em 1em; } /* D5.3 */ #pun-status span { white-space: nowrap; margin-right: 0.5em; } /* D5.4 */ #pun-crumbs1 { font-weight: bold; overflow: hidden; margin-top: 0; } /* D5.5 */ #pun-crumbs1 p.container { border-top: none; padding: 1em 1em 0.8em 1em; font-size: 1.1em; } /* D5.6 */ #pun-break1 { margin: 0 1em; border-style: none none; border-width: 1px 0; height: 0; margin: -2px 1em; position: relative; z-index: 1; } /* D6 Announcement -------------------------------------------------------------*/ /* D6.1 */ #pun-announcement h2 { padding: 0; margin: 0 1em -3.5em 1em; border-style: none none none none; border-width: 0 0 1px 0; position: relative; font-weight: bold; } /* D6.2 */ #pun-announcement h2 span { display: block; padding: 1em 0 0.8em 0; border-bottom-style: none; border-bottom-width: 1px; } /* D6.3 */ #pun-announcement .container { padding-left: 10px; margin-top: -300px; }
Поделиться112017-03-07 18:02:59
Код:
/* Вертикальное меню в профиле и сообщениях */ #profile > .container { padding: 1em 1em 1em 0 !important; } #profilenav { float: left; display: inline-block; width: 42px; margin: 0 1em 0; z-index: 10; } #profilenav ul, #profilenav li { padding: 0; margin: 0; } #profilenav h2 { display: none; } #profilenav ul { border: 1px solid #dbdbdb; background: #ebebeb; margin-bottom: 1em; } #profilenav ul li { border-bottom: 1px solid #dbdbdb; } #profilenav ul li:last-child { border-bottom: 0; } #profilenav li a { display: block; height: 0; width: 0; padding: 20px; color: transparent; text-decoration: none !important; text-indent: -9999px; z-index: 1; border-radius: 0; box-shadow: none; } #profilenav li a:hover { line-height: 0; padding-left: 60px; } #profilenav li a:hover, #nav-standard li a:hover, #pun-adnav li a:hover { text-decoration: none !important; } #profilenav ul li a:hover { position: relative; padding-right: 140px; color: #fff; text-indent: 0; } #pun-profile #profilenav ul li a, #pun-messages #profilenav ul li a { background-repeat: no-repeat; } /* Цвет при наведении и активного пункта */ #profilenav li.isactive a, #profilenav ul li a:hover { background-color: #4c9b72; } /* Спрайт для Профиль */ #pun-profile #profilenav ul li a { background-image: url(https://forumstatic.ru/files/0007/af/57/65555.png); } /* Спрайт для Сообщения */ #pun-messages #profilenav ul li a { background-image: url(https://forumstatic.ru/files/0007/af/57/55565.png); } /* Входящие / Основной */ #pun-messages #profilenav ul .item1 a { background-position: 0 0; } #pun-profile #profilenav ul .item1 a:hover, #pun-profile #profilenav ul .item1.isactive a, #pun-messages #profilenav ul .item1.isactive a, #pun-messages #profilenav ul .item1 a:hover { background-position: -42px 0; } /* -- */ /* Отправленные / Персональный */ #pun-profile #profilenav ul .item2 a, #pun-messages #profilenav ul .item2 a { background-position: 0 -42px; } #pun-profile #profilenav ul .item2 a:hover, #pun-profile #profilenav ul .item2.isactive a, #pun-messages #profilenav ul .item2.isactive a, #pun-messages #profilenav ul .item2 a:hover { background-position: -42px -42px; } /* -- */ /* Новое сообщение / Общение */ #pun-profile #profilenav ul .item3 a, #pun-messages #profilenav ul:last-child .item1 a { background-position: 0 -84px; } #pun-profile #profilenav ul .item3 a:hover, #pun-profile #profilenav ul .item3.isactive a, #pun-messages #profilenav ul:last-child .item1.isactive a, #pun-messages #profilenav ul:last-child .item1 a:hover { background-position: -42px -84px; } /* -- */ /* Статус / Аватар */ #pun-profile #profilenav ul .item4 a, #pun-messages #profilenav ul:last-child .item2 a { background-position: 0 -126px; } #pun-profile #profilenav ul .item4 a:hover, #pun-profile #profilenav ul .item4.isactive a, #pun-messages #profilenav ul:last-child .item2.isactive a, #pun-messages #profilenav ul:last-child .item2 a:hover { background-position: -42px -126px; } /* -- */ /* Всё прочитано / Подпись */ #pun-profile #profilenav ul .item5 a, #pun-messages #profilenav ul:last-child .item3 a { background-position: 0 -168px; } #pun-profile #profilenav ul .item5 a:hover, #pun-profile #profilenav ul .item5.isactive a, #pun-messages #profilenav ul:last-child .item3.isactive a, #pun-messages #profilenav ul:last-child .item3 a:hover { background-position: -42px -168px; } /* -- */ /* Очистить папку / Отображение */ #pun-profile #profilenav ul .item6 a, #pun-messages #profilenav ul:last-child .item4 a { background-position: 0 -210px; } #pun-profile #profilenav ul .item6 a:hover, #pun-profile #profilenav ul .item6.isactive a, #pun-messages #profilenav ul:last-child .item4.isactive a, #pun-messages #profilenav ul:last-child .item4 a:hover { background-position: -42px -210px; } /* -- */ /* Приватность */ #pun-profile #profilenav ul .item7 a { background-position: 0 -252px; } #pun-profile #profilenav ul .item7 a:hover, #pun-profile #profilenav ul .item7.isactive a { background-position: -42px -252px; } /* -- */ /* Дополнительно */ #pun-profile #profilenav ul .item8 a { background-position: 0 -294px; } #pun-profile #profilenav ul .item8 a:hover, #pun-profile #profilenav ul .item8.isactive a { background-position: -42px -294px; } /* -- */ /* Приглашения */ #pun-profile #profilenav ul .item9 a { background-position: 0 -336px; } #pun-profile #profilenav ul .item9 a:hover, #pun-profile #profilenav ul .item9.isactive a { background-position: -42px -336px; } /* -- */ /* Загрузки */ #pun-profile #profilenav ul .item10 a { background-position: 0 -378px; } #pun-profile #profilenav ul .item10 a:hover, #pun-profile #profilenav ul .item10.isactive a { background-position: -42px -378px; } /* -- */ /* Управление */ #pun-profile #profilenav ul .item11 a { background-position: 0 -420px; } #pun-profile #profilenav ul .item11 a:hover, #pun-profile #profilenav ul .item11.isactive a { background-position: -42px -420px; } /* -- */
Поделиться122017-03-07 20:35:21
Код:
.bestpara { border-image: url("http://imgdepo.com/id/i10213252") 5 5 5 5 round round; border-style: solid; border-width: 5px; height: 46px; opacity: 0.5; overflow: hidden; position: relative; transition: all 0.5s ease-in-out 0s; width: 105px; } .bestparaname { background-color: rgba(15, 15, 15, 0.9); color: #85683d; font-family: pt sans narrow; font-size: 10px; margin-top: -42px !important; padding: 1px 4px 3px; position: absolute; text-align: center; text-shadow: 1px 1px 0 rgba(0, 0, 0, 1); text-transform: lowercase; transform: translate(-110px, 0px); transition: all 0.5s ease-in-out 0s; width: 97px; } .bestparaname2 { background-color: rgba(15, 15, 15, 0.9); color: #85683d; font-family: pt sans narrow; font-size: 10px; margin-top: -25px !important; padding: 1px 4px 3px; position: absolute; text-align: center; text-shadow: 1px 1px 0 rgba(0, 0, 0, 1); text-transform: lowercase; transform: translate(110px, 0px); transition: all 0.5s ease-in-out 0s; width: 97px; } .bestpara:hover { opacity: 1; } .bestpara:hover .bestparaname { opacity: 1; transform: translate(0px, 0px); } .bestpara:hover .bestparaname2 { opacity: 1; transform: translate(0px, 0px); }
Страница: 1