Тема — @CSS — стилизация дневников — уЧеБа, учЕБа, учЕба, учЕБА, УчЕБА

вторник, 18 июня 2013

16:17

все записи пользователя в сообществе safe and sound

are you?

здравствуйте. я, в своем роде, нуб. код мой, поэтому кривой и работает благодаря тонкому балансу ошибок и помарок.
вопрос такой:
как задать фон библиотеке ссылок? вот она

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

@темы: Дизайн, Учеба, платный сервис

URL

воскресенье, 05 мая 2013

21:06

Убрать "Последние комментарии"

все записи пользователя в сообществе Даниэль де Сант-Этьен

Stop the World – I Want to Get Off (с)

Доброго времени суток всем!
Может, это довольно дурацкий вопрос, но как сделать, чтобы поле "Последние комментарии" вообще не отображалось?

Просто получается не очень красиво, а переделывать меню полностью не хочется, плюс с аккаунта владельца дневника всё выглядит нормально.
Смотреть.

Никаких параметров #lastComments не задано.

АПД.
Решено: #lastComments {display:none;}

@темы: Учеба, меню, diaryCSS

URL

четверг, 27 декабря 2012

21:23

Список классов и id

все записи пользователя в сообществе UDFj

Уважаемые сообщники, куда "ушли" Список классов и id по нашим дневникам?
Может кто-то случайно сохранил страничку? Поделитесь, пожалуйста.

-------
boko: достал из кеша гугла, перенес на народ, обновил эпиграф

@темы: Мысли вслух, Учеба, diaryCSS, платный сервис

URL

среда, 31 октября 2012

18:00

дублируется разделитель после эпиграфа

все записи пользователя в сообществе his dear detective

чистосердечное признанье заставил Ди писать Леон теперь и шеф зовёт беднягу о дорогой мой детектив

Выглядит это так:

Надо чтобы был он там только один. После обычных записей разделитель один, все как надо.
Кусок кода с разделителем (или надо код полностью?):

.singlePost {padding-bottom: 90px !important; background: url('/userdir/3/0/7/4/3074482/76555794.gif';) center bottom no-repeat;}

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

@темы: Учеба, основные блоки

URL

пятница, 27 июля 2012

04:38

Как сделать экстратоп в центре вверху, чтобы он не сжимал дневник и не плавал?

все записи пользователя в сообществе Неуч

Как сделать экстратоп в центре вверху, чтобы он не сжимал дневник и не плавал?
Разрешение моего дисплея 1280x1024 точек)))
#extratop {background: url('/userdir/3/0/3/2/3032546/75558011.jpg') no-repeat; background-position: 3% 0%; !important; width:100%; height:710px; line-height:100% !important; top: 0px;}
#wrapper{min-width:888px !important;width:888px;margin: 0 auto !important;padding:0 !important;overflow:hidden !important;}
Помогите подкорректировать код CSS?
body{background:url('/userdir/3/0/3/2/3032546/75557458.jpg') repeat;}
body{background-attachment:fixed;} это задний фон)))
Как сделать, чтобы при входе в дневник играла музыка как фон повторяясь и чтобы всё это работало в одном коде?
читать дальше

@темы: Дизайн, Мысли вслух, Учеба, фоновые картинки

URL

понедельник, 21 мая 2012

12:04

все записи пользователя в сообществе TheHappyEnd

No hope, no love, no glory, no happy ending

Доброго времени суток.
Я знаю, что сейчас, вероятно, очень сильно опозорюсь, но я буквально недавно начала изучать CSS на Дайрях и поэтому появилось много всяких глупых вопросов. Благодаря этому сообществу я нашла ответы на часть из них, но не на все. Прошу меня простить, если что-то пропустила.

1) Я хочу добавить в блочный дизайн новый блок, который бы находился всегда слева от поста (и с отступом от него примерно в 10-15 пикселей) и в котором находились бы аватар (на главной странице дневника я хочу поставить туда псевдо-аватар) и служебные ссылки по типу "комментарии", "подписаться", "в цитатник". Суть в том, что этот блок должен дублироваться с каждым новым постом, и я совершенно не понимаю, как это можно организовать. Мне бы хотя бы эту часть вопроса решить, с остальным сама попытаюсь разобраться.

2) Можно ли сделать отступ между записями в блочном дизайне и если да, то как?

Решено.

@темы: Учеба, отступы

URL

пятница, 11 мая 2012

16:13

все записи пользователя в сообществе Даниэль де Сант-Этьен

Stop the World – I Want to Get Off (с)

Доброго времени суток! Извините, если такой вопрос уже задавался, но найти ничего похожего в ответах я не смог)

Есть код:

 #extratop {width:990px; height: 57px; background: url('/userdir/2/9/7/0/2970505/74682051.jpg') no-repeat top left;}
 #extrabottom {width:990px; height: 160px; background: url('/userdir/2/9/7/0/2970505/74682014.png') no-repeat center center;}
 #wrapper{width:990px;min-width:0;}
 #side{width:224px;}
 .left #page-c {margin-left:-234px;}
 .left #page-t {margin-left:234px;}
 .right #page-c {margin-right:-234px;}
 .right #page-t {margin-right:234px;}

Ширина wrapper'а подогнана под ширину фоновой картинки (990 пик), фон под картинкой залит чёрным.
При этом происходит следующее:

Как сделать блок с текстом уже, чтобы между рамкой и краем картинки получался небольшой отступ, рамка и текст находились на светлом фоне?
Пробовал делать уже блок page-c, но тогда весь блок съезжает в сторону, даже если пытаться сориентировать его по другому краю или по центру.

Заранее спасибо)

Ответ получен, всем спасибо

@темы: Учеба, основные блоки

URL

вторник, 14 февраля 2012

00:03

все записи пользователя в сообществе Cadaveria.

никто уже не верит в обычную дружбу - всем обязательно ебли, кишок и пиздостраданий

Здравствуйте. Я новичок в верстке на css, но исправлять готовые страницы ~~с треском,~~ получается. Недавно захотела поупражняться с сервисом tumblr.com и тут же возникла проблема - где можно найти описание и элементы для body? Имеется ввиду - в какой части прописывается - сначала, где-то в середине или в самом конце? Если это возможно, помогите с построением вот такой блок-схемы, если нет, буду очень благодарна за ссылки на уроки, с помощью которых получится ее соорудить.
Заранее спасибо)

@темы: Учеба, основные блоки

URL

среда, 07 декабря 2011

12:05

Я чайник

все записи пользователя в сообществе safin1234

How much wood would a woodchuck chuck if a woodchuck could chuck wood :)

Здравствуйте.
У меня висели эти стандартные 100 дайрирублей и все-равно не знала что с ними делать, так что я взяла и заплатила за css, думала - о, здорово! Теперь я себе сделаю такой красивый дизайн!
А теперь я сижу и смотрю на все это вот так O_o и понятия не имею что с этим делать и как.
Может поделится кто-нибудь какой-нибудь ссылкой на обучающие материалы?
Зарание спасибо.

@темы: Учеба

URL

пятница, 02 декабря 2011

21:34

все записи пользователя в сообществе Squaloshadelet

freedom

Кто-нибудь может объяснить или дать ссылку на инструкцию? Не могу адаптировать жж дизайн под дайри. Название селекторов абсолютно разное и я, идиот, путаюсь.

@темы: Дизайн, Учеба, diaryCSS

URL

20:17

Вечер добрый

все записи пользователя в сообществе Squaloshadelet

freedom

Хм, не уверен, что кто либо здесь сможет мне помочь, а тем более проявит желание, но все же спрошу. Решил замутить дизайн сложнее, чем делаю обычно. Но увы, не хватает опыта. Нашел великолепный шаблон: malionette.org/web/lj/layouts/029.php - но увы, мне нужно видеть хоть кусочек кода или знать обозначения этого, что бы составить собственный. Кто-нибудь может разъяснить или подкинуть ссылку, а может кто-нибудь уже сам разобрал? Мне бы хотя бы скелет этого чуда, дабы вникнуть в него.

@темы: Дизайн, Учеба

URL

среда, 19 октября 2011

14:04

Back to Top

все записи пользователя в сообществе D Storm

Veni, vidi, vici.

Перенёс тут кнопочку из VK. Вернее, вытащил и настроил.

Как установить.
1. Закинуть это изображение в БИ. Скопировать ссылку.
2. Добавить к CSS дизайн следующий код:

 #bottomNav {display:block; box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;background:none !important;border:none !important;height:1px;}
 #bottomNav li {display:none;}
 #bottom_up {display:block !important;position:fixed;left:15px; top:45px;}
 #bottom_up a {position:absolute; top:-30px; width:92px; height:1px; background:url('__IMAGE_LINK__') no-repeat; padding-top:25px;clip:rect(0px 92px 25px 0px);opacity:0.6;filter:alpha(opacity=60);}
 #bottom_up a:hover {opacity:0.9;filter:alpha(opacity=90);}

3. Заменить __IMAGE_LINK__ на ссылку на изображение из БИ. Обрезать всё до '/userdir/...'.

Пример.

@темы: Дизайн, Мысли вслух, Учеба, основные блоки

URL

среда, 14 сентября 2011

21:26

все записи пользователя в сообществе safe and sound

are you?

Подскажите. пожалуйста, какой id у этого блока меню (выделен красным)?

Заранее благодарю.

@темы: Дизайн, Учеба, меню

URL

понедельник, 22 августа 2011

15:46

все записи пользователя в сообществе dead_mockingbird

and knew what cats know that makes them scream like babies in night...

Эта заметка посвящается и предназначается педантам вроде меня и любителям оформлять все-все-все. :3 А вот бывает — делаешь оформление для @дневников, стараешься выдерживать все в одном стиле, а потом на глаза попадается голосование, и понимаешь, что оно по внешнему виду ооочень сильно выделяется из общей картины. Вообще, возможностей кастомизировать голосование очень мало по причине того, что оно находится внутри таблицы, но можно дотянуться до разноцветных столбиков и «разукрасить» их в соответствии с цветовой палитрой дизайна.

@темы: Учеба

URL

среда, 29 июня 2011

22:25

все записи пользователя в сообществе FFalChrom

Именно так.

Извиняюсь, если подобное уже было, но подскажите, как убрать эту полоску, которая на скрине? на главной странице дневника ее нету, а вот в коментариях и других она появляется!

вот код

#extratop { background: url('/userdir/2/4/3/3/2433796/70115994.png'); width:850px; height:495px; line-height: 100% !important;} #commentsArea, #addCommentArea {width:770px !important;margin-left: 40px !important; margin:0; padding:0; } #wrapper{min-width:850 px!important; width: 900px; margin: 0 auto !important; padding:0 !important; overflow:hidden !important; } #page-t { background: url('/userdir/2/4/3/3/2433796/70114795.png'); width:850px !important;} #postsArea {width:770px !important; margin-left: 40px !important; margin:0; padding:0; } body{background: #5faefb url('/userdir/2/4/3/3/2433796/70114804.png') no-repeat; } #wrapper { top: -10px; left: 105px} #extrabottom {background: # no-repeat; width: 850px; height: 97px; line-height: 100% !important; margin-top: 0px; background: url('/userdir/2/4/3/3/2433796/70123503.png')} .postLinksBackg{border-top: 1px dashed #999999; border-bottom: 1px dashed #999999; margin:0 !important;} #globalLinks_title {display:block; width:167px; height:65px; line-height:500px; overflow:hidden; background: url('/userdir/2/4/3/3/2433796/70114796.png') 2px 4px no-repeat;} #myDiaryLinks_title, #myCommunityLink_title {display:block; width:147px; height:82px; line-height:500px; overflow:hidden; background: url('/userdir/2/4/3/3/2433796/70114797.png') 2px 4px no-repeat;} #thisDiaryOwner_title {display:block; width:90px; height:87px; line-height:500px; overflow:hidden; background: url('/userdir/2/4/3/3/2433796/70114801.png') 2px 4px no-repeat;} #iAmQuit a{display: block; width:88px; height:64px; line-height:500px; overflow:hidden; background: url('/userdir/2/4/3/3/2433796/70114799.png') 2px 4px no-repeat;} #thisDiaryLinks_title {display:block; width:124px; height:71px; line-height:500px; overflow:hidden; background: url('/userdir/2/4/3/3/2433796/70114790.png') 2px 4px no-repeat;} #more_login, #Stats {display: none;} #side {position:absolute; top:-30px !important; left: 4%; right; 25%; width:80%;} #side ul {background:#999999; -moz-opacity:.70 !important;opacity:.70 !important; filter:alpha(opacity=70); !important;} #side h1 a{position:relative; font-size:19px !important; left: 300px; top:460px;} #authorName {position:absolute !important; font-size:19px !important; left:220px; top: 460px; right: 30% !important;} #YaSearch {position:absolute; font-size:10px !important; left:615px; top:35px !important;} #thisDiaryInfo{position:absolute !important; font-size:15px !important; left:410px; top: 258px; right: 30% !important;} #YaSearchForm {width:65%;} #YaSearchForm input.submit {display: none;} #bottomNav { background: url('/userdir/2/4/3/3/2433796/70114795.png'); width:850px !important; margin:0; padding:0;} .singlePost { margin:0; padding:0;} #msg_form { margin:0; padding:0;}

За ранее спасибо!

@темы: Учеба

URL

вторник, 03 мая 2011

20:06

все записи пользователя в сообществе Nelliely

Пока мы думаем, как убить время, время убивает нас. (с) А. Алле

Уважаемы мастера, помогите пожалуйста.
В данный момент меню при моём дизайне выглядит так:

Очень хотелось бы убрать список постоянных читателей из него, или на крайний случай свернуть его до надписи "Постоянные читатели (228)", (т.е без перечисления ников)
#pchs {display: none} пробовала, не помогает.

@темы: Учеба, меню, diaryCSS, платный сервис

URL

суббота, 16 апреля 2011

20:50

CSS Windows

все записи пользователя в сообществе D Storm

Veni, vidi, vici.

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

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

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

Шрифт
заголовка: жирный 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:30px;margin-bottom:10px;}
 #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:0px;text-align:center;}
 #extratop{height:180px;background:url('/userdir/2/4/1/3/2413177/67760414.png') 50% bottom no-repeat;margin-bottom:30px;margin-left:-0px;}
 .bordered {border-radius:15px 5px;-moz-border-radius:15px 5px;background: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:0px; background:none !important;opacity:0.9;filter:alpha(opacity=90);}
 #pageBar table{display:block;text-align:center;padding:15px 0px;width:30px;background:#000 !important;position:absolute;top:-28px; left:-490px;text-align:center; border-radius:25px 10px; -moz-border-radius:25px 10px; 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:20px;padding-top:10px;}
 .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:15px;-moz-border-radius:15px;}
 .commentAuthor {width:16px;height:16px;overflow:hidden;position:absolute;top:-51px;left:-5px;background:url('/userdir/2/4/1/3/2413177/67789820.png');}
 .commentAuthor:hover {width:130px;height:auto;border-radius:15px;-moz-border-radius:15px;z-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:10px;margin-left:24px;}
 .commentAuthor:hover .avatar, .commentAuthor:hover .sign {margin-left:5px;}
 .urlLink {padding-left:15px;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------PostInStream-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #postsArea .singlePost .authorName {display:none;}
 #postsArea .singlePost .postContent .commentAuthor {display:none;}
 #postsArea .singlePost .block_design .postInner {margin-left:0px;}
 #postsArea .singlePost .paragraph {width:100%; margin-left: 0px;}
 #postsArea .singlePost .block_design .paragraph {margin-left:0px;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Post----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 .postActionLinks{position:absolute; right:10px;z-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 10px; margin: 0px 10px; color: #666;}
 .singlePost .postTitle span {font-size:8pt;display:block;margin-bottom:-3px;margin-left:22px;}
 ._____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:1px;}
 #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:-30px; right:-495px; width:30px; height:1px; background:url('/userdir/2/4/1/3/2413177/67709975.png'); padding-top:60px;clip: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:0px;}
 .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 5px;}
 #myLinks li a {padding: 2px 2px 2px 5px; width:130px;}
 #myLinks ul {width:137px;}
 #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 3px;-moz-border-radius: 9px 3px 9px 3px;}
 #side .bordered:hover{ opacity:1;filter:alpha(opacity=100);}
 .menuSection {text-shadow:0 0 3px #93a3da; }
 .menuSection ul{border-radius:15px 5px; -moz-border-radius:15px 5px;background:#000 !important;opacity:0.94;filter:alpha(opacity=94);}
 .menuSection a{border-radius: 9px 3px 9px 3px;-moz-border-radius: 9px 3px 9px 3px;padding:0px 1px;}
 .menuSection b {font-weight:normal;}
 .menuSection div ul{text-align:left;}
 #thisDiaryLinks li a {padding:2px 2px 2px 5px;width:123px;}
 #thisDiaryLinks ul {width:130px !important;}
 #thisDiaryOwner li a {padding:2px 2px 2px 5px;width:148px;}
 #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 4px; 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:0px; top:0px; text-align:center; z-index:2; width:100%; height:10px; padding-top:1px; border-radius:0; -moz-border-radius:0; border-bottom:1px solid #000; margin:0px; padding-bottom:0px;opacity: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:30px; background:url('/userdir/2/4/1/3/2413177/67714379.png') repeat-x !important;padding-top:1px;margin-top:0px;border:none;}
 #topNav:hover ul {display:inline;width:auto;margin:auto; }
 #topNav a{font-weight:bold;display:inline; padding:2px 10px 2px 10px; 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 3px;-moz-border-radius: 9px 3px 9px 3px;padding-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:5px;left:10px;}
 .singlePost .postTitle h2 {margin-top:-2px !important;}
 .postDate {position:absolute;top:6px;left:66px;font-size:8pt !important;}
 .singlePost .postContent, .singlePost .postContent .postInner, .singlePost .postContent .postInner .paragraph {display:none;}
 .singlePost:hover .postContent {display:block; position:absolute; top:5px; right:41px; background:url('/userdir/2/4/1/3/2413177/67764497.png'); width:15px !important; height:15px;z-index:1;}
 .singlePost .postContent:hover {width:30px !important; right:26px;}
 .singlePost .postContent:hover .postInner {display:block; width:15px !important; height:15px; position:absolute; top:0px; right:0px; background:url('/userdir/2/4/1/3/2413177/67764497.png') -15px 0px;}
 .singlePost .postContent .postInner:hover {width:31px !important;right:-16px;}
 .singlePost .postContent .postInner:hover .paragraph {display:block; width:15px !important; height:1px; position:absolute; top:0px; right:0px; 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:0px; left:0px; 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:4px;opacity:0.2;filter:alpha(opacity=20);}
 .order_button {height:1px;}
 #sortOrder {position:absolute;right:-13px;top:15px;float:none !important;}
 #sortOrder li {float:none;margin-top:5px;opacity:0.5;filter:alpha(opacity=50);}
 #sortOrder li:hover {opacity:0.8;filter:alpha(opacity=80);}
 .atMood {width:380px;height:1px; clip:rect(0px, 380px, 16px, 0px); padding-top:16px; 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:5px;left:10px;width:16px;height:1px;padding-top:16px !important; clip:rect(0px 16px 16px 0px);width:16px;overflow:visible !important;}
 .singlePost .header {background:url('/userdir/2/4/1/3/2413177/67764050.png') 802px 5px no-repeat;height:21px;}
 .postLinksBackg .urlLink, .postLinksBackg .postLinks {display:none;}
 .postLinksBackg:hover {clip:auto; overflow:visible; width:200px; height: 250px; top:5px; left:-10px; background:none;}
 .postLinksBackg:hover .urlLink, .postLinksBackg:hover .postLinks {display:block;}
 .postLinksBackg:hover .urlLink a span {display:none;}
 .postLinksBackg:hover .urlLink a {position:absolute; top:0px; left: 20px !important; width:16px; height:16px; background: url('/userdir/2/4/1/3/2413177/67771631.png');z-index:30;}
 .postLinksBackg:hover .postLinks {padding:10px 5px; position:absolute; top:17px; left:10px; background:url('/userdir/2/4/1/3/2413177/67584206.png'); border-radius: 18px 6px;-moz-border-radius: 18px 6px; 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 6px;text-align:left;}
 .prevnext {display:none;}
 .singleComment .postLinksBackg .clear {background:none; left:0px;}
 .singleComment .postLinksBackg {left: 13px;}
 .singleComment .postLinksBackg:hover {height:140px;left:-7px;}
 .singleComment .postLinksBackg:hover .urlLink a {left:20px;}
 .postInnerText {text-align:justify;width:600px; padding: 20px; background:#222220; border-radius: 18px 6px; -moz-border-radius: 18px 6px; box-shadow: 0 0 10px #332; -moz-box-shadow: 0 0 10px #332; -webkit-box-shadow: 0 0 10px #332; margin: auto; margin-top:45px; overflow:auto !important; opacity:0.85; filter:alpha(opacity=85);}
 .postInnerText h1 {display:block; width:100%; text-align:center; background: #000; font-size: 17px; color: #dddddd; text-shadow: 0 0 5px #aaa; margin: 10px 0px 5px 0px !important; padding:5px 0px !important; border-radius: 15px 5px;-moz-border-radius: 15px 5px; 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:0px; left:0px; height: 1px; 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:33px; 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:240px; background: #151515; padding: 15px 0px; overflow-x:auto; overflow-y:visible; white-space: nowrap; }
 .postInnerAlbum:hover img {margin:0px 10px; border-radius: 18px 6px; -moz-border-radius: 18px 6px; 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:-400px; top:-300px;}
 .bigImage img {border-radius: 30px 15px; -moz-border-radius: 30px 15px; opacity:1 !important; filter:alpha(opacity=100) !important;}
 .blackThing {position:fixed;z-index:230;width:100%; height:100%; top:0px; left:0px; 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:55px; height:55px; right:10px; bottom: 10px; 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:28px; background-position: 802px 7px;}
 #post0 .header h2 {display:block !important; background: url('/userdir/2/4/1/3/2413177/67988876.png') center center no-repeat; width:100%; height: 25px;padding-top: 3px;}
 #JournalDisclaymer #post0 .header h2 {background: none !important; color:#b4b4b3; text-shadow:0 0 3px #666;}
 #post0 .postInnerText {margin-bottom:35px;}
 #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:2px; right: 63px;}
 #extrabottom {position:absolute; top:255px; left:-7px; background:url('/userdir/2/4/1/3/2413177/67991294.png') no-repeat; width:20px; height:20px;}
 #extrabottom:hover {display:block !important; position:absolute; width:310px; height:105px; top:255px; left:-10px; border-radius:18px 6px; -moz-border-radius:18px 6px; 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:15px; top: 20px; height:55px; background:url('/userdir/2/4/1/3/2413177/67785260.png') no-repeat; padding-left: 55px; padding-top:20px;}
 .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:20px; background:url('/userdir/2/4/1/3/2413177/67584206.png'); border-radius: 18px 6px; -moz-border-radius: 18px 6px; 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.

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

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

@темы: Дизайн, Мысли вслух, Учеба, текст, меню, фоновые картинки, diaryCSS, основные блоки

URL

воскресенье, 27 марта 2011

14:17

все записи пользователя в сообществе Nelliely

Пока мы думаем, как убить время, время убивает нас. (с) А. Алле

Уважаемы мастера, помогите пожалуйста

Возможно ли в CSS сделать подобные завитушки вокруг записи?
Если возможно, то подскажите пожалуйста код (поподробней, а то я ещё только учусь)

@темы: Учеба, рамки и полоски, diaryCSS, основные блоки

URL

четверг, 27 января 2011

16:08

Поиск сенсея.

все записи пользователя в сообществе safe and sound

are you?

Здравствуйте.
В css я новичок, но все же какое-то представление имею. Однако, понятия не имею о динамическом дизайне.
Почитать в сети о нем я могу, однако я ищу человека, которому будет не лень поговорить и объяснить мне все лично.
Надеюсь, что найдется хоть один доброволец.
Всем хорошего дня.

* дизайн в моем дневнике моего авторства.
* собеседника ищу не на один диалог, а на систематическую помощь, возможность задавать любые вопросы.

@темы: Учеба, diaryCSS

URL

четверг, 18 ноября 2010

05:09

Запись цвета в RGB.

все записи пользователя в сообществе Bernadett-e

В море соли и так до чёрта, морю не надо слёз.

Встретила в учебнике, что в CSS цвет можно записать в форме [ color: rgb(255; 0; 0) } То есть, по числовому значению RGB.

Вопрос: почему эта более удобная и гибкая форма записи почти не используется? Фотошоп, конечно, легко выдаёт код для web, но мне интересна причина..

@темы: Учеба

URL


Запомнить