три диза с ФБ

[css-mania]

УльХим
Предпросмотр	Картинки	Настройки цвета	Код
	Фон страницы Фон записей	Шаблон: блочный Меню: слева Шрифт: Arial, 14 Заголовок: жирный курсив, 13 Текст: обычный, 14 Цвет заголовка: #8c97af Ссылок: #6b747f Записи: #5c6570 Оффтопа: #3e475a	#wrapper {padding:0 !important; width:985 min-width:955px!important; margin:0 auto !important;overflow:visible !important;} #page-c {padding-left: 45% !important; } #page-t {width:890px !important; } #page-t {background: url('ФОН БЛОКА ЗАПИСЕЙ'); } #page-t a, .postContent .postInner img{opacity : 0.8; -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s;} #page-t a:hover, .postContent .postInner img:hover {opacity : 1 !important;} body {background: #000000 url('ФОН СТРАНИЦЫ') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; margin:0; padding:0;} #side{width:155px !important; margin-left: -210px!important; position:fixed; padding-left: 7% !important; } a {text-decoration: none !important;} #side a, side {color: #2e3037; -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);} #side a:hover {color: #51658f; -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); } a:hover {color: #51658f;} .avatar img,.avatarNew img {max-width:110px !important; max-heght:110px !important; display: block; position: relative; border: 8px solid #000; opacity : 0.5; -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s;} .avatar img:hover,.avatarNew img:hover { display: block; position: relative; border: 8px solid # 000!important; opacity : 1 !important;} .sign {font-size: 11 color: #465866;} #addCommentArea_title { font: 18px 'Georgia'; font-style: normal!important; color: #556670; text-align:center!important;} #myCommunitiesLink, #myLinks, #headlineList, #rssLink, #myLinksLink, #upInChart , #lastComments, #diarySpiritLink, #paySupportLink, #faqLink, #fallDiaryLink, #sortOrder, #topNavLinks, #communityCatalogueLink, #myCommunity, #favListLink, #myCommunity, #pchListLink, #randomDiaryLink, #allDiaryLink, #diarySupportLink, #unsubscribeEmail, #pchs, #subscribeEmail, #myNotepadLink, #commentsArea_title, #myAccountLink {display:none! important;} #epigraph .postLinksBackg {display: none;} #login_change {background-color: transparent; border-color: #050505; width:140px!important; }
Примечание: в качестве исходника к фону использован арт © Kazzy Togano
Сирень
Предпросмотр	Картинки	Настройки цвета	Код
	Фон страницы Фон враппера Экстратоп	Шаблон: блочный Меню: слева Шрифт: Arial, 14; в заголовке – 12 Цвет заголовка: #7b78ce Цвет ссылки: #5a67b9 Цвет текста: #050505 Цвет оффтопа: #808fb2 Границ нет, всё остальное прозрачно	#wrapper{min-width:1000px!important;width:950margin: 0 auto !important;padding:0 !important;overflow:visible !important; background: url('ФОН ВРАППЕРА'); background-attachment: fixed;} #side{width:147px !important;margin:0 !important;} #side h1 a{ font-family: 'Arkhive'; font-size: 22px!important; font-weight: bold!important; color: #7386c9!important;} #side *{border:none;} #page-c{width: 842px !important;padding:0 !important;padding-right:5px !important;} #page-t {margin:0 !important;} body {background-attachment: fixed; padding:0} #postsArea {background-color: #ffffff; -moz-border-radius-topleft: 0 -moz-border-radius-topright: 0 -moz-border-radius-bottomright: 10 -moz-border-radius-bottomleft: 10 -webkit-border-radius: 0px 0px 10px 10 border-radius: 0px 0px 10px 10} .header span { font-family: 'Geprgia'; font-size: 14px!important; font-weight: bold!important; color: #ac9dac;} .header h2 { font-family: 'Georgia'; font-size: 17px!important; font-weight: normal!important; color: #a6a6cf;} #commentsArea, #newCommentsArea, #addCommentArea {background-color: #ffffff; -moz-border-radius-topleft: 10 -moz-border-radius-topright:10 -moz-border-radius-bottomright: 10 -moz-border-radius-bottomleft: 10 -webkit-border-radius: 10px 10px 10px 10 border-radius: 10px 10px 10px 10} #addCommentArea_title {font: 18px 'Georgia'; font-style: normal!important; color: #a6a6cf; text-align:center!important;} .authorName a{ font-family: 'Georgia'; font-size: 15px!important; font-style: italic!important; color: #8180c6; text-align:center!important;} #extratop{ background: url('ЭКСТРАТОП') no-repeat; float:right; margin-top: 0px !important; width:1000 height: 500} .avatar img,.avatarNew img {position: relative; display: block; margin: 0 padding: 2 text-align:center !important; -moz-border-radius-topleft: 8 -moz-border-radius-topright: 8 -moz-border-radius-bottomright: 8 -moz-border-radius-bottomleft: 8 -webkit-border-radius: 8px 8px 8px 8 border-radius: 8px 8px 8px 8 background-color:#ffffff; border: 2px dotted #d4c7ef; opacity: 0.7; -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s; } .avatar img:hover,.avatarNew img:hover {display: block; position: relative; opacity: 1 !important;} .sign {color: #ac9dac; font-size: 11} .urlLink {font-size: 10px !important;} .postDate { font-family: 'Arkhive'; font-size: 22px!important; font-weight: bold!important; font-style: normal!important; color: #7b78ce!important;} #myDiaryLink a{font-family: 'Arkhive'; font-size: 19px!important; color: #858bcb!important; font-weight: bold!important;} #myCommunityLink a{font-family: 'Arkhive'; font-size: 18px!important; color: #858bcb!important; font-weight: bold!important;} #mainpageLink a{font-family: 'Arkhive'; font-size: 19px!important; color: #858bcb!important; font-weight: bold!important} #pchs_title b {font-family: 'Arkhive'; font-size: 18px!important; color: #858bcb!important; font-weight: bold!important;} .postLinksBackg {display:block !important; border-bottom: 2px dotted #b4b4e5; margin-top:3px !important; padding:3px 0 !important;} A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {color: #8180c6;} #myCommunitiesLink, #myLinks, #headlineList, #rssLink, #myLinksLink, #upInChart , #lastComments, #diarySpiritLink, #paySupportLink, #faqLink, #fallDiaryLink, #sortOrder, #topNavLinks, #communityCatalogueLink, #favListLink, #myCommunity, #pchListLink, #randomDiaryLink, #allDiaryLink, #diarySupportLink, #unsubscribeEmail, #pchs, #subscribeEmail, #myNotepadLink, #commentsArea_title, #myAccountLink {display:none!important;} #epigraph .postLinksBackg {display: none!important;} #JournalComments .postLinksBackg {display: none!important;} #epigraph .urlLinks a {display: none;} #login_change {background-color: #ffffff; border: none!important;}
Примечания Для корректного отображения надписей нужен шрифт Arkhive; Фоновая картинка загружается обычным способом; В качестве исходника использован командный арт
Летящий
Предпросмотр	Картинки	Настройки цвета	Код
	Фон страницы Фон блока записей Разделитель АДДБЛОК 1, АДДБЛОК 2	Шаблон: блочный Меню: слева Шрифт: Arial, 14; в заголовке – жирный + курсив Цвет заголовка: #b18ecc Цвет ссылки: #3a429b Цвет текста: #5073cd Цвет оффтопа: #3e53c1 Границ нет, всё остальное прозрачно	#wrapper {padding:0 !important; width:985 min-width:955px!important; margin:0 auto !important;overflow:visible !important; position: relative;} #page-c {padding-left: 45% !important; } #page-t {width:880px !important; background: url('ФОН БЛОКА ЗАПИСЕЙ'); margin-top: -5} body {background: #110b25 url('ФОН СТРАНИЦЫ') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; margin: 0 padding:0;} #side{width:150px !important; margin-left: -0px!important; margin-top: 17%; position:fixed; padding-left: 7% !important;} @media all and (min-width:1281px) #side{width:150px !important; position:fixed; margin-left: -0px!important; margin-top: 17%; padding-left: 7% !important;} @media all and (max-width:1280px) #side{width:150px !important; position:fixed; margin-left: -0px!important; margin-top: 17%; padding-left: 7% !important;} #side h1 a{font-weight: normal; font-family: "Agatha-Modern"; font-size: 31px!important; font-weight: normal!important; color: #ff27cb7 !important;} #side h1 a:hover {color: #8c69dd !important; text-decoration: none !important;} #extratop {background: transparent; repeat-x; position: absolute; left: 45%; right:0 margin-top:-8 width:880 height: 100} #authorName {font: 15px Georgia;} .authorName {font-family: 'Georgia'; font-size: 14px!important; font-weight: bold!important;} .menuSection {font-size:13 text-align:right;} #add_block1 {background: url('АДД_БЛОК 1') no-repeat; height: 585 width: 1000 left: 0 top: 0 z-index: -1; position: fixed; overflow: visible;} #add_block2 {background: url('АДД_БЛОК 2') no-repeat; height: 602 width: 50 left: 119 top: 585 z-index: -1; position: fixed;} #addCommentArea_title {font: 18px 'Georgia'; font-style: normal!important; color: #4D56B0; text-align:center!important;} #message {background-color: #e9d7f3; -moz-border-radius-topleft: 5 -moz-border-radius-topright: 5 -moz-border-radius-bottomright: 5 -moz-border-radius-bottomleft: 5 -webkit-border-radius: 5px 5px 5px 5 border-radius: 5px 5px 5px 5px!important;} .paragraph div {padding: 5} a:link {text-decoration: none} a:visited {text-decoration: none} a:active {text-decoration: none} a:hover {color: #5361F5;} .postDate {font: 16px 'Georgia'; font-style: normal!important; color: #8c69dd !important;} .postTitle, .postTitle span {background: url('РАЗДЕЛИТЕЛЬ') no-repeat; -moz-border-radius-topleft: 5 -moz-border-radius-topright: 5 -moz-border-radius-bottomright: 5 -moz-border-radius-bottomleft: 5 -webkit-border-radius: 5px 5px 5px 5 border-radius: 5px 5px 5px 5} .sign {font-size: 11 color: #2d3361; text-align:center!important;} .urlLink {font-size: 10px!important;} .atTag span, .atMusic span, .atMood {font-size: 12px!important;} .avatar img,.avatarNew img {max-width:110px !important; max-heght:110px !important; display: block; position: relative; border: 8px solid #000; opacity : 0.7; -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s;} .avatar img:hover,.avatarNew img:hover { display: block; position: relative; border: 8px solid # 000!important; opacity : 1 !important;} #myCommunitiesLink, #myLinks, #headlineList, #rssLink, #myLinksLink, #upInChart , #lastComments, #diarySpiritLink, #paySupportLink, #faqLink, #fallDiaryLink, #sortOrder, #topNavLinks, #communityCatalogueLink, #myCommunity, #favListLink, #myCommunity, #pchListLink, #randomDiaryLink, #allDiaryLink, #diarySupportLink, #unsubscribeEmail, #pchs, #subscribeEmail, #myNotepadLink, #commentsArea_title, #myProfileLink, #albumLink, #myAccountLink {display:none! important;} #epigraph .postLinksBackg {display: none;} #iAmQuit b a{ position:fixed; top: 410 left: 120 font-size: 12 color: #74b7f0 !important;} #more_login a{position:fixed; top: 412 left: 90} #login_change { position:fixed; top: 425 left: 40 background-color: #050505; border: none; width:160px!important;}
Дизайн настроен под высоту монитора от 1000px, на сильно широкоформатных и невысоких мониторах будет разъезжаться или обрезаться; Для корректного отображения надписей должен быть шрифт Agatha-Modern Примечания 2. Особенности дизайна: • затемнённый полупрозрачный фон записей; • вспыхивающие и гаснущие аватары; • зафиксированное не прокручивающееся меню; • правосторонний блок записей В качестве исходника был использован арт © Off-Record