CSS Windows

Я как-то обещал объяснить, каким образом в моём дневнике реализованы окна и слайдеры. Говорю сразу - если вам это не нужно, лучше просто не читайте, незачем говорить мне, что вам это не нужно.

Для начала, сам дизайн моего дневника.

Для начала, сам дизайн моего дневника. Уверен, его можно оптимизировать, знаю, в нём хватает лишнего. Моё оправдание - руки не дошли. Да, если решите использовать - пожалуйста, перекачайте изображения к себе в БИ и замените фон. Спасибо. )

Шрифт
заголовка: жирный 15
теста: обычный 14
гарнитура: Georgia

Цвет текста
заголовка: #dddddd
ссылки: #cccccc
записи: #bbbbbb
оффтопика: #555555

Цвет фона и границ
фона дневника: #
фона записи: #
фона заголовка: #
границы: #222222

CSS

 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Global--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 body {background:#dcd8fe url('/userdir/2/4/1/3/2413177/67759640.jpg') fixed repeat-x bottom;text-shadow:0 0 3px #888888;height:100%;overflow:auto;}
 h2{ text-shadow: 0 0 3px #666666; }
 hr {border-color:#222222;}
 div { cursor:default;}
 a {text-shadow:0 0 3px #888888;}
 a:hover {text-shadow:0 0 5px #cccccc;text-decoration:none !important;}
 #wrapper {margin-top:30margin-bottom:10}
 #wrapper,#page-c{width:880px !important; margin-left:auto !important; margin-right:auto !important; position:relative !important;opacity:1.00; filter:alpha(opacity=100))}
 #side{width:0text-align:center;}
 #extratop{height:180background:url('/userdir/2/4/1/3/2413177/67760414.png') 50% bottom no-repeat;margin-bottom:30margin-left:-0}
 .bordered {border-radius:15px 5-moz-border-radius:15px 5background:url('/userdir/2/4/1/3/2413177/67584206.png') !important;box-shadow:0 0 10px #000000;-moz-box-shadow:0 0 10px #000000;-webkit-box-shadow:0 0 10px #000000;}
 ::selection {text-shadow:0 0 5px #fff; color:#000;}
 #YaSearch {display:none !important;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Pager--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #pageBar { position:fixed; left:50%; top:50%; width:0 background:none !important;opacity:0.9;filter:alpha(opacity=90);}
 #pageBar table{display:block;text-align:center;padding:15px 0width:30background:#000 !important;position:absolute;top:-28 left:-490text-align:center; border-radius:25px 10 -moz-border-radius:25px 10 font-size:10pt; -moz-box-shadow: 0px 0px 10px #111; -webkit-box-shadow: 0px 0px 10px #111; box-shadow: 0px 0px 10px #111;overflow:hidden;}
 #pageBar table:hover { -moz-box-shadow: 0px 0px 10px #222; -webkit-box-shadow: 0px 0px 10px #222; box-shadow: 0px 0px 10px #222; }
 #pageBar tbody, #pageBar td, #pageBar tr { width:30px !important; }
 #pageBar a, #pageBar strong { display:block !important;}
 #pageBar a:hover { background:#161616; text-decoration:none; cursor:default;}
 #pageBar strong { background:#222; }
 #pageBar .pages_str { display:none; }
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Comments--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 .singleComment {position:relative;}
 .singleComment .paragraph {margin-left:20padding-top:10}
 .singleComment .postContent {position:relative;}
 .postTitle span{font-size:10pt; color:#999;text-shadow:0 0 3px #999;}
 .singleComment .authorName {text-align:center;}
 .singleComment .postTitle {margin-bottom:0px !important;}
 ._____0{1:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------UserInfo---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 .avatar {background:#000;text-align:center;overflow:hidden;}
 .avatar img {border-radius:15-moz-border-radius:15}
 .commentAuthor {width:16height:16overflow:hidden;position:absolute;top:-51left:-5background:url('/userdir/2/4/1/3/2413177/67789820.png');}
 .commentAuthor:hover {width:130height:auto;border-radius:15-moz-border-radius:15z-index:10;border:1px solid #111;box-shadow:0 0 10px #443;-moz-box-shadow:0 0 10px #443;-webkit-box-shadow:0 0 10px #443;background:url('/userdir/2/4/1/3/2413177/67583927.png');}
 .commentAuthor .avatar, .commentAuthor .sign {margin-top:10margin-left:24}
 .commentAuthor:hover .avatar, .commentAuthor:hover .sign {margin-left:5}
 .urlLink {padding-left:15}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------PostInStream-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #postsArea .singlePost .authorName {display:none;}
 #postsArea .singlePost .postContent .commentAuthor {display:none;}
 #postsArea .singlePost .block_design .postInner {margin-left:0}
 #postsArea .singlePost .paragraph {width:100%; margin-left: 0}
 #postsArea .singlePost .block_design .paragraph {margin-left:0}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Post----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 .postActionLinks{position:absolute; right:10z-index:1;}
 .postTitle {text-align:center; padding-top:3px !important;}
 #post0 .postTitle {text-align:center; padding-top:0px !important;}
 .singlePost, .singleComment {opacity:0.80;filter:alpha(opacity=80); border-color:#000000!important;}
 .singlePost:hover, .singleComment:hover {opacity:1;filter:alpha(opacity=100);}
 .paragraph a, #epigraph a{text-decoration:none;}
 .paragraph a:hover, #epigraph a:hover{text-decoration:underline;}
 .quote_text {border-left:3px solid #222222; border-right:3px solid #111111; padding: 0px 10 margin: 0px 10 color: #666;}
 .singlePost .postTitle span {font-size:8pt;display:block;margin-bottom:-3margin-left:22}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Owner-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #thisDiaryInfo {top:205px !important;right:7px !important;}
 #thisDiaryInfo a{color:#888855;text-shadow:0 0 3px #222;}
 #thisDiaryInfo a:hover{color:#888855;text-shadow:0 0 5px #555;cursor:default;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ToTop-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #bottomNav {box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;background:none !important;border:none !important;height:1}
 #bottomNav li {display:none;}
 #bottom_up {display:block !important;position:fixed;right:50%; top:50%;opacity:0.9;filter:alpha(opacity=90);}
 #bottom_up a {position:absolute; top:-30 right:-495 width:30 height:1 background:url('/userdir/2/4/1/3/2413177/67709975.png'); padding-top:60clip:rect(0px 30px 60px 0px);}
 #bottom_up a:hover {background:url('/userdir/2/4/1/3/2413177/67759526.png');}
 ._____0{1:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Menu-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #more_login {display:none;}
 .top #side {margin-bottom:0}
 .top #side h1 {text-align:center; display:none;}
 #thisDiaryOwner li a,#thisDiaryLinks li a, #myDiaryLinks li a, #globalLinks li a, #myLinks li a {display:block;width:100%;background-color:#111;}
 #myDiaryLinks li span, #globalLinks li span, #myDiaryLinks li b, #globalLinks li b {margin:2px 2px 2px 5}
 #myLinks li a {padding: 2px 2px 2px 5 width:130}
 #myLinks ul {width:137}
 #side .bordered:hover{-moz-box-shadow: 0px 0px 10px #111; -webkit-box-shadow: 0px 0px 10px #111; box-shadow: 0px 0px 10px #111; }
 #side .bordered { background:#222;opacity:0.9;filter:alpha(opacity=90);padding:1px 1px 2px 1px !important;border-radius: 9px 3px 9px 3-moz-border-radius: 9px 3px 9px 3}
 #side .bordered:hover{ opacity:1;filter:alpha(opacity=100);}
 .menuSection {text-shadow:0 0 3px #93a3da; }
 .menuSection ul{border-radius:15px 5 -moz-border-radius:15px 5background:#000 !important;opacity:0.94;filter:alpha(opacity=94);}
 .menuSection a{border-radius: 9px 3px 9px 3-moz-border-radius: 9px 3px 9px 3padding:0px 1}
 .menuSection b {font-weight:normal;}
 .menuSection div ul{text-align:left;}
 #thisDiaryLinks li a {padding:2px 2px 2px 5width:123}
 #thisDiaryLinks ul {width:130px !important;}
 #thisDiaryOwner li a {padding:2px 2px 2px 5width:148}
 #thisDiaryOwner ul {width:155px !important;}
 #thisDiaryLinks li a:hover, #thisDiaryOwner li a:hover, #myDiaryLinks li a:hover, #globalLinks li a:hover, #myLinks li a:hover{background-color:#222;text-decoration:none;cursor:default;}
 #pchs {color: #000; text-shadow:none;}
 #pchs li{display:block; float:left;}
 #pchs li a {padding:0px 4 background:#111;}
 #pchs li a:hover{background:#222; text-decoration:none; cursor:default;}
 #pchs li a font {text-shadow:0 0 3px #b00;}
 #pchs li a font:hover {text-shadow:0 0 3px #f00;}
 #tagslistlink br{display:none;}
 #TagsList span{padding-right:6px !important;}
 #login_form_title {display:none;}
 #authorAlbum, #albumLink, #all_links, #authorLiks, #lastComments {display:none;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------TopBar------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #topNav {display:inline !important; position:fixed; left:0 top:0 text-align:center; z-index:2; width:100%; height:10 padding-top:1 border-radius:0; -moz-border-radius:0; border-bottom:1px solid #000; margin:0 padding-bottom:0opacity:0.4;filter:alpha(opacity=40);background:#000 url('/userdir/2/4/1/3/2413177/67713995.png') center center no-repeat !important;}
 #topNav ul {display:none;}
 #topNav:hover {opacity:0.80;filter:alpha(opacity=80);height:30 background:url('/userdir/2/4/1/3/2413177/67714379.png') repeat-x !important;padding-top:1margin-top:0border:none;}
 #topNav:hover ul {display:inline;width:auto;margin:auto; }
 #topNav a{font-weight:bold;display:inline; padding:2px 10px 2px 10 opacity:0.9;filter:alpha(opacity=90);color:#666; text-shadow:0 0 3px #333;}
 #topNav a:hover {opacity:1;filter:alpha(opacity=100);text-decoration:none;cursor:default;color:#aaa!important; text-shadow:0 0 3px #555!important;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------HoverSystem-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #postsArea, #epigraph, #epigraph:hover {background: none !important;border:none !important;box-shadow:none !important;-moz-box-shadow:none !important;-webkit-box-shadow:none !important;padding-top:0px !important;}
 .singlePost {height:21px !important; clip:rect(-10px 870px 31px -10px); position:relative;background:url('/userdir/2/4/1/3/2413177/67584206.png');margin:5px 0px !important;box-shadow:0 0 10px #222;-moz-box-shadow:0 0 10px #222;-webkit-box-shadow:0 0 10px #222;border-radius: 9px 3px 9px 3-moz-border-radius: 9px 3px 9px 3padding-top:0px !important; padding-bottom:5px !important;border:1px solid #333!important;}
 .singlePost:hover {box-shadow:0 0 10px #333;-moz-box-shadow:0 0 10px #333;-webkit-box-shadow:0 0 10px #333;}
 .singlePost .postTitle span {position:absolute;top:5left:10}
 .singlePost .postTitle h2 {margin-top:-2px !important;}
 .postDate {position:absolute;top:6left:66font-size:8pt !important;}
 .singlePost .postContent, .singlePost .postContent .postInner, .singlePost .postContent .postInner .paragraph {display:none;}
 .singlePost:hover .postContent {display:block; position:absolute; top:5 right:41 background:url('/userdir/2/4/1/3/2413177/67764497.png'); width:15px !important; height:15z-index:1;}
 .singlePost .postContent:hover {width:30px !important; right:26}
 .singlePost .postContent:hover .postInner {display:block; width:15px !important; height:15 position:absolute; top:0 right:0 background:url('/userdir/2/4/1/3/2413177/67764497.png') -15px 0}
 .singlePost .postContent .postInner:hover {width:31px !important;right:-16}
 .singlePost .postContent .postInner:hover .paragraph {display:block; width:15px !important; height:1 position:absolute; top:0 right:0 padding-top:15px !important; clip:rect(0px 15px 15px 0px); overflow:hidden !important;}
 .singlePost .postContent .postInner .paragraph:hover {width:100% !important;height:96% !important; position:fixed; top:0 left:0 clip:auto; background:url('/userdir/2/4/1/3/2413177/67584206.png'); z-index:100; padding:2% 0% !important; overflow:auto !important;text-shadow: 0 0 3px #666666;text-align:center !important;}
 .singlePost .postActionLinks {right:60px !important;top:4opacity:0.2;filter:alpha(opacity=20);}
 .order_button {height:1}
 #sortOrder {position:absolute;right:-13top:15float:none !important;}
 #sortOrder li {float:none;margin-top:5opacity:0.5;filter:alpha(opacity=50);}
 #sortOrder li:hover {opacity:0.8;filter:alpha(opacity=80);}
 .atMood {width:380height:1 clip:rect(0px, 380px, 16px, 0px); padding-top:16 background: url('/userdir/2/4/1/3/2413177/67911530.png'); position:fixed; top:3%; right:3%; z-index:120;}
 .atMood em {display:none;}
 .postLinksBackg {background:url('/userdir/2/4/1/3/2413177/67771391.png') no-repeat;position:absolute;top:5left:10width:16height:1padding-top:16px !important; clip:rect(0px 16px 16px 0px);width:16overflow:visible !important;}
 .singlePost .header {background:url('/userdir/2/4/1/3/2413177/67764050.png') 802px 5px no-repeat;height:21}
 .postLinksBackg .urlLink, .postLinksBackg .postLinks {display:none;}
 .postLinksBackg:hover {clip:auto; overflow:visible; width:200 height: 250 top:5 left:-10 background:none;}
 .postLinksBackg:hover .urlLink, .postLinksBackg:hover .postLinks {display:block;}
 .postLinksBackg:hover .urlLink a span {display:none;}
 .postLinksBackg:hover .urlLink a {position:absolute; top:0 left: 20px !important; width:16 height:16 background: url('/userdir/2/4/1/3/2413177/67771631.png');z-index:30;}
 .postLinksBackg:hover .postLinks {padding:10px 5 position:absolute; top:17 left:10 background:url('/userdir/2/4/1/3/2413177/67584206.png'); border-radius: 18px 6-moz-border-radius: 18px 6 z-index:10; box-shadow:0 0 10px #443; -moz-box-shadow:0 0 10px #443; -webkit-box-shadow:0 0 10px #443;}
 .postLinksBackg:hover .postLinks li {display:block;margin:1px 6text-align:left;}
 .prevnext {display:none;}
 .singleComment .postLinksBackg .clear {background:none; left:0}
 .singleComment .postLinksBackg {left: 13}
 .singleComment .postLinksBackg:hover {height:140left:-7}
 .singleComment .postLinksBackg:hover .urlLink a {left:20}
 .postInnerText {text-align:justify;width:600 padding: 20 background:#222220; border-radius: 18px 6 -moz-border-radius: 18px 6 box-shadow: 0 0 10px #332; -moz-box-shadow: 0 0 10px #332; -webkit-box-shadow: 0 0 10px #332; margin: auto; margin-top:45 overflow:auto !important; opacity:0.85; filter:alpha(opacity=85);}
 .postInnerText h1 {display:block; width:100%; text-align:center; background: #000; font-size: 17 color: #dddddd; text-shadow: 0 0 5px #aaa; margin: 10px 0px 5px 0px !important; padding:5px 0px !important; border-radius: 15px 5-moz-border-radius: 15px 5 box-shadow:0 0 10px #000; -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000;}
 .postInnerAlbum{width:100%; display:block; position:fixed; bottom:0 left:0 height: 1 background: #151515 url('/userdir/2/4/1/3/2413177/67820636.png') center center no-repeat; z-index:200; box-shadow:0 -5 10px #444; -moz-box-shadow:0 -5 10px #444; -webkit-box-shadow:0 0 10px #222; opacity:0.95; filter:alpha(opacity=95); padding-top:33 overflow:hidden;}
 .postInnerAlbum a, .postInnerAlbum span {display:none;}
 .postInnerAlbum:hover a, .postInnerAlbum:hover span {display:inline;}
 .postInnerAlbum:hover {opacity:1; filter:alpha(opacity=100); height:240 background: #151515; padding: 15px 0 overflow-x:auto; overflow-y:visible; white-space: nowrap; }
 .postInnerAlbum:hover img {margin:0px 10 border-radius: 18px 6 -moz-border-radius: 18px 6 box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; display:inline !important;}
 .bigImage {position:fixed; left:50%; top:50%;z-index:240;}
 .bigImage a {position:absolute; left:-400 top:-300}
 .bigImage img {border-radius: 30px 15 -moz-border-radius: 30px 15 opacity:1 !important; filter:alpha(opacity=100) !important;}
 .blackThing {position:fixed;z-index:230;width:100%; height:100%; top:0 left:0 background:#000; opacity:0.5; filter:alpha (opacity=50); display:block; visibility:visible;}
 .closeMe {position:fixed; background: url('/userdir/2/4/1/3/2413177/67825718.png'); width:55 height:55 right:10 bottom: 10 z-index:250; opacity:0.85; filter:alpha (opacity=85);}
 .closeMe:hover {opacity:1; filter:alpha (opacity=100);}
 .streamView {display:inline !important;}
 .singleView {display:none !important;}
 .lastPost .streamView {display:none !important;}
 .lastPost .singleView {display:inline !important; }
 .postInnerAlbum .LinkMore {width:320px !important;}
 #epigraph {opacity:1; filter:alpha(opacity=100);}
 #epigraph .postActionLinks {display:none;}
 #post0 .paragraph:hover:active {display:none;}
 #post0 .header {height:28 background-position: 802px 7}
 #post0 .header h2 {display:block !important; background: url('/userdir/2/4/1/3/2413177/67988876.png') center center no-repeat; width:100%; height: 25padding-top: 3}
 #JournalDisclaymer #post0 .header h2 {background: none !important; color:#b4b4b3; text-shadow:0 0 3px #666;}
 #post0 .postInnerText {margin-bottom:35}
 #JournalFavorite .singlePost .postContent .postInner .paragraph:hover {text-align:justify !important; width:70% !important; padding: 2% 15% !important;}
 #JournalFavorite #postsArea .singlePost .authorName {display:block !important; text-align:right; position:absolute; top:2 right: 63}
 #extrabottom {position:absolute; top:255 left:-7 background:url('/userdir/2/4/1/3/2413177/67991294.png') no-repeat; width:20 height:20}
 #extrabottom:hover {display:block !important; position:absolute; width:310 height:105 top:255 left:-10 border-radius:18px 6 -moz-border-radius:18px 6 box-shadow:0 0 10px #000; -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; cursor:default; background: #000 url('/userdir/2/4/1/3/2413177/67991348.png') 0px 5px no-repeat; opacity:0.97; filter:alpha(opacity=97);}
 ._____0{1:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Icons-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 .atMusic {position:fixed; left:15 top: 20 height:55 background:url('/userdir/2/4/1/3/2413177/67785260.png') no-repeat; padding-left: 55 padding-top:20}
 .atMusic span{display:none;}
 .atTag {margin-top: -20px !important; padding-bottom: 40px !important;}
 .atTag a:hover {text-decoration:none;}
 .atTag span{display:none;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------AddBlocks---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #add_block1 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67759526.png');}
 #add_block2 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67714379.png');}
 #add_block3 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67583927.png');}
 #add_block4 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67764497.png');}
 #add_block5 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67911530.png');}
 #add_block6 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67785254.png');}
 #add_block7 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67785260.png');}
 #add_block8 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67771631.png');}
 #add_block9 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67820636.png');}
 #add_block10 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67825718.png');}
 #extrabottom span {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67991348.png');}
 ._____0{1:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Other-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #msg_form {padding:20 background:url('/userdir/2/4/1/3/2413177/67584206.png'); border-radius: 18px 6 -moz-border-radius: 18px 6 box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000;}
 #new_post_title {text-shadow: 0 0 5px #222, 0 0 3px #333;}

Дальше несколько основных моментов, которые необходимо знать.

Дальше несколько основных моментов, которые необходимо знать.

Во-первых, селекторы. Уверен, вам знаком :hover. А вы знаете, что его можно использовать не только на ссылках, но и на любых, в общем-то, элементах, а, главное, на блоках? При этом, можно изменять любые параметры, включая размеры, background и clip (читать здесь). Кроме того, можно управлять стилем child'а по hover'у на parent'е. Т.е. можно задать .style_1 {...}, .style_2 {...}, style_1 style_2 {...}, style_1:hover style_2 {...}. Ещё стоит обратить внимание на селектор :active - он применяется в момент нажатия кнопкой мыши по блоку и отключается, когда вы отпускаете кнопку. Как правило, он вполне себе бесполезен, но есть несколько способов его применить (в частности - для скрытия блока, который открывается по hover'у его parent'а или меньшего варианта его самого).

Во-вторых, кэширование. Если при наведении на какой-либо элемент вы меняете его background на изображение, ранее отсутствовавшее на странице, вы увидите, как оно подгружается, что, уверен, вам абсолютно не нужно. Как это исправить? Загрузить это изображение заранее. Для этого вам понадобится свободный блок (я использовал add_block'и с этой целью). Всё, что надо сделать - повесить на него это изображение background'ом, повесить его в верхнем левом углу страницы (чтобы он не растягивал страницу лишний раз) через position:absolute, поставить на него минимальные размеры (1px) и сделать невидимым (opacity:0 и filter:alpha(opacity=0)).

В-третьих, position:fixed. Он аналогичен position:absolute, только объект привязывается не к parent'у с position:absolute или position:relative, а к экрану. Таким образом можно делать всякие кнопки, менюшки и вообще блоки, которые всегда будут находится в одной точке экрана, вне зависимости от скролла и ресайза. При этом можно использовать z-index - для контроля высоты блока относительно других блоков с position:absolute или position:fixed. Внимание: чрезмерное использование position:fixed приводит к существенному снижению производительности, особенно под Opera.

И, в-четвёртых, вам нужно что-либо для сканирования кода и отображения стилей. В Google Chrome и Opera это встроенный webkit, в Firefox вам придётся установить примочку Firebug. Если интересно, Firebug можно поставить и на Google Chrome (описание здесь). Поверьте, без них сколько-нибудь серьёзное модифицирование дизайна дневника крайне неудобно.

А теперь можно перейти непосредственно к слайдерам.

А теперь можно перейти непосредственно к слайдерам.

Принцип простой. Есть два изображения - активный слайдер и неактивный слайдер. Неактивный мы вешаем на какой-либо блок, который присутствует в каждом посте, но не связан с содержанием поста (я использовал .singlePost .header). Активный применяется несколько раз, об этом ниже. У нас есть следующая серия вложенных блоков: .singlePost > .postContent > .postInner > .paragraph > div > {содержимое поста}. Соответственно, мы можем настроить внешние элементы таким образом, чтобы, в зависимости от их состояния, изменялись или вовсе исчезали внутренние. А ещё мы можем поставить на них соответствующие background'ы (дальше - bg).

Итак, как это работает? Когда мы наводим на пост (.singlePost:hover), мы делаем видимым .postContent (display:block), размер которого соответствует одной трети изображения-слайдера (которое стоит на bg). Когда мы наводим на .postContent, мы делаем видимым его child, .postInner, и расширяем .postContent до 2/3 слайдера. При этом, ширина .postInner составляет 1/3 слайдера, и активный слайдер стоит на bg и у него тоже. На следующем этапе, мы обрабатываем наведение на на .postInner. Оно расширяет его и делает видимым его child, .paragraph. Дальше всё просто - при наведении на .paragraph мы изменяем его свойства, добавляя к ним position:fixed, width:100% и height:100%. Почему оно не исчезает сразу же? Потому что курсор продолжает находится на .paragraph, а значит стиль с .hover всё ещё активен. Однако дальнейшее содержимое поста настраивается с помощью стилей, вписанных непосредственно в пост. Чтобы автоматизировать процесс, я написал генератор кода поста. Об этом ниже.

Post Generator.

Post Generator. Найти его последнюю версию можно здесь.

Краткое описание.

В верхнее поле вписывается основной текст поста. Если вам нужно добавить заголовок, используйте тэг <h1>.

Во второе поле вы можете вписать описание изображений, которые впоследствии будут в галерее. По строке на каждое. Если вы хотите оставить какое-либо изображение без описания - просто не вписывайте ничего в его строку. Если вы не хотите ничего подписывать вообще - оставьте поле пустым.

Дальше вам нужно вписать образец ссылки на изображение. Например: "http://dl.dropbox.com/u/25760322/spark_1_1.jpg". Важно: все дальнейшие ссылки для этого поста должны иметь вид "http://dl.dropbox.com/u/25760322/spark_1_X.jpg", где X - номер изображения. При этом, изображение должно иметь разрешение 300x225, увеличенное должно носить имя "http://dl.dropbox.com/u/25760322/spark_1_X_.jpg" и иметь разрешение 800x600, а полноразмерное изображение должно носить имя "http://dl.dropbox.com/u/25760322/spark_1_X__.jpg" (его разрешение значения не имеет) (все пути валидны только для моего аккаунта dropbox, у вас будут немного другие). Да, все изображения должны быть jpeg'ами. Размещать их надо на dropbox'е либо на своём хостинге - чтобы путь был одинаковым. Для автоматизации процессов ресайза и ренейма советую использовать Batch Image Converter и File Menu Tools.

В последнее поле вам нужно вписать количество изображений.

Вот и всё. Надеюсь, этот пост показался вам интересным \ полезным.
^_^

CSS Windows

Смотрите также