Тема — @CSS — стилизация дневников — МЫсли вслух, МыСлИ вСлУх, мысли вслуХ

среда, 17 сентября 2014

18:36

Поддержка стандартных дизайнов?

все записи пользователя в сообществе Nefer-Ra

R.I.P. your mind

Занимается ли кто-то поддержанием стандартных дизайнов из каталога оформлений в актуальном состоянии? Вот есть дизайн devil left a message, всем хорош, но не учитывает полосу с предупреждением и два пункта меню - упоминания и платные сервисы, которые вылезают и некрасиво висят в углу экрана. Как это пофиксить? Копировать оформление себе и править?
Если да, то как?

@темы: Мысли вслух, diaryCSS

URL

вторник, 05 августа 2014

20:35

Оформление на заказ

все записи пользователя в сообществе Эльна Майалис

Женщина народа сидов

Дорогие сообщники, у меня к вам весьма меркантильный вопрос. Если он не соответствует тематике сообщества - прошу модераторов его удалить. Но мне именно это сообщество показалось самым подходящим для того, чтобы разузнать следующее:
Кто из вас делает оформления на заказ? Пользуется ли это спросом? Если да - то что именно входит в готовый дизайн, и что обычно просят пользователи? Много ли времени ушло на то, чтобы овладеть CSS до такого уровня? Допустимо ли использование шаблонов (пусть и своих собственных) при условии смены изображений и цветовой гаммы?
Поделитесь, пожалуйста, своим мнением. Заранее благодарна.

@темы: Дизайн, Мысли вслух, Точка зрения, платный сервис

URL

среда, 16 июля 2014

16:15

эээ

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

Когда наступает депрессия или смятение, попробуй лечь на спину на полу и подними лапы вверх. Иногда мир выглядит лучше вверх ногами.

Что это за селектор такой - #w18p? О_о

@темы: Мысли вслух

URL

суббота, 16 ноября 2013

22:50

Маленький лайфхак

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

Не говорите так быстро, я не успеваю класть х*р на ваши слова.

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

Правой кнопкой мыши по посту, который нужно скрыть - исследовать элемент - выдастся айди поста вида #post111111111. Или можно номер посмотреть по url поста.
В свой код вписываем #post111111111 {display: none;}, пост скрывается из ленты, наслаждаемся, сирца, котята, щастье. Потом можно удалить.

К примеру, ID это поста 193235450 (diarycss.diary.ru/p193235450.htm), строка в коде #post193235450 {display: none;} скроет его из ваших лент.

@темы: Мысли вслух

URL

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

21:23

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

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

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

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

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

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

вторник, 06 декабря 2011

04:19

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

Distrust is the way of guard, Untruth is the way of thrust.

Надеюсь, правилами сообщества это не запрещено.)
Нарисовала себе недавно дизайн. Отсюда просьба: можете полазать по дневнику и поискать косяки?
У меня Firefox, разрешение - 1366х768.
У меня все выглядит так:

У вас справа, под ником, должны быть еще ссылки "Написать на у-мыло", "Подписаться по и-мэйл" и "Добавить в избранное".
Неактуально.

@темы: Мысли вслух, Точка зрения, diaryCSS

URL

понедельник, 28 ноября 2011

02:31

Объявления

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

Veni, vidi, vici.

Сейчас особо нет времени, поэтому в двух словах. Составляющие уже описывал, так что тут всё просто. Если вам нужно повесить какое-то объявление в своём дневе (и так, чтобы оно было видно отовсюду) - используйте следующий код:

 #extrabottom:after{position:absolute;width:100%;top:0px;left:0px;background:#ff0000;border-radius:15px 30px;-moz-border-radius:15px 30px;box-shadow:0 0 5px #af0000;-webkit-box-shadow:0 0 5px #af0000;-moz-box-shadow:0 0 5px #af0000;padding:10px;text-align:center;font-weight:bold;opacity:0.7;color:#000;content:"ТЕКСТ_ВАШЕГО_ОБЪЯВЛЕНИЯ_В_НЕАКТИВНОМ_СОСТОЯНИИ"; }
 #extrabottom:hover:after{text-align:justify;content:"ТЕКСТ_ВАШЕГО_ОБЪЯВЛЕНИЯ_В_СОСТОЯНИИ_ПРИ_НАВЕДЕНИИ_НА_НЕГО_МЫШИ"; }

Пояснения. Все визуальные параметры вы можете перенастроить, это очевидно. При наведении мыши вы можете переписать любые параметры (в коде выше это только текст сообщения и выравнивание по ширине).

Пример (если ничего не видно - обновите страницу).

@темы: Мысли вслух, текст, основные блоки

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

вторник, 27 сентября 2011

07:36

:before и :after

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

Veni, vidi, vici.

Данная запись о том, как добавить в оформление текст непосредственно через CSS. В чём преимущество перед заранее приготовленным изображением с текстом? Во-первых, весит в разы меньше, во-вторых, проще оформить в стилистике самого дневника. Итак, к делу.

Вся фишка в селекторах. В данном случае, конкретно в двух: :before и :after, - которые добавляют блок текста до либо после блока, к которыму были применены, соответственно. Возьмём, к примеру, #add_block1. Применение селектора выглядит следующим образом:

#add_block1:before {content:"test text";}

Также в content можно прописывать url (только из БИ, разумеется) (синтаксис тот же, что и в background). Кроме того, в блоках с данными селекторами можно описывать непосредственно стиль текста и его положение на странице. Пример:

#add_block1:after {position:fixed; top:20px; left: 20px; color:#ff0000; text-shadow: 0 0 3px #ff0000; font-size:12px; content:"test text";}

Пожалуй, есть только одна проблема. Этот текст всё равно нельзя выделять и копировать, чтобы получить к нему доступ надо лезть в код страницы. Ну а в остальном - использование данных селекторов может быть весьма удобным.

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

URL

07:19

Разделение контента

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

Veni, vidi, vici.

Здесь я расскажу о том, как с помощью CSS в дневнике реализовать отображение трёх различных блоков контента в ленте избранного, дневнике и режиме комментариев соответственно. Зачем это нужно? Как правило, для шлифовки сложного оформления, но могут быть и другие причины. So, let's start.

Для начала создаём в записи три блока для контента. Выглядеть они должны примерно так.

<div class="feedTrigger">контент для ленты</div>
<div class="journalTrigger" style="display:none;">контент для дневника</div>
<div class="commentsTrigger" style="display:none;">контент для записи</div>

Зачем прописывать style="display:none"? Это скроет ненужные блоки в режиме ленты избранного, где ваш CSS не действует.

Итак, всё, что осталось - описать данные классы в CSS. Можете смело использовать следующий код:

.feedTrigger {display:none;}
#Journal .journalTrigger, #JournalDraft .journalTrigger {display:block !important;}
#JournalComments .commentsTrigger, #JournalDraft .commentsTrigger {display:block !important;}
#JournalFavorite .feedTrigger, #JournalQuote .feedTrigger, #JournalDraft .feedTrigger {display:block !important;}

И всё работает. Последняя строчка нужна для того, чтобы feed контент отображался в своём избранном (чужие и свои блоки такого типа) и в своём цитатнике. Также подразумевается, что в черновиках должны быть видны вообще все варианты.

Пример: лента, дневник, запись.

@темы: Мысли вслух, текст, diaryCSS, основные блоки

URL

пятница, 15 июля 2011

17:38

Альтернатива MORE

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

Veni, vidi, vici.

Достаточно давно уже обещал сделать эту штуку. Наконец добрался.

Итак, идея в том, чтобы сделать аналог MORE, которые оставался бы свёрнутым при просмотре одиночного поста (комментариев).

Объяснение того, как работает. Для тех, кто хочет понять.

Готовый код и инструкции к применению.Готовый код и инструкции к применению.

.panelIn {width:300px; height:300px; padding:20px; border-radius: 30px 15px; -moz-border-radius: 30px 15px; box-shadow: 0 0 15px #222; -webkit-box-shadow:box-shadow: 0 0 15px #222; -moz-box-shadow: 0 0 15px #222; background: url('/userdir/1/9/2/4/1924297/70496636.png'); display:none; position:absolute; overflow:auto; left:-170px; top:-170px; border:1px solid #111; color:#ccc; text-shadow: 0 0 1px #ccc; z-index:200 !important;}
.panelOut {position:relative; display:inline !important; text-shadow: 0 0 3px #93a3da; color:#93a3da;}
.panelOut:hover {cursor:pointer; text-shadow: 0 0 9px #93a3da;}
.panelOut:active .panelIn, .panelIn:hover {display:block; cursor:default !important;}

Сразу говорю, код адаптирован под мой днев, поэтому, перед тем как применять, не поленитесь слегка подогнать его под себя. Кроме того, в .panelIn прописан background. Либо замените его на какой-нибудь цвет, либо залейте изображение к себе в БИ и измените ссылку (если вам нужно то же, что у меня - оно тут). Иначе не получится, парсер CSS чистит ссылки на изображения из чужих БИ.

Это вставляйте в пост:

<div class="panelOut">название ссылки<div class="panelIn">содержимое вложения</div></div>

Один важный момент. Название ссылки не должно быть слишком длинным, иначе при нажатии в неправильном месте курсор может не оказаться поверх блока, и тот сразу же исчезнет. И ещё лучше бы не делать .panelIn слишком большим, иначе он может залезть за край экрана, и тогда контент потеряется, что не есть хорошо.

Пример 1. "Предисловие" и "первая глава".
Пример 2. Любой пост дневника.

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

URL

09:51

Иллюзия анимации

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

Veni, vidi, vici.

Нет, речь, разумеется, не о гиф. Но о спрайтах.

Идея проста. Берём несколько блоков, вкладываем друг в друга, привязываем на одно место (через position:absolute и position:relative (или position:absolute \ position:fixed) на внешнем), прописываем отношения по hover'ам. Загвоздка в том, что hover не срабатывает просто при появлении блока под курсором, статус проверяется при движении мышью. На практике, если цель - заставить чуть более плавно, чем обычно, выплыть (появиться фейдом, загореться или ещё что) какой-то элемент в дизайне дневника, это не будет проблемой, потому что попиксельно мышь никто не двигает. Ещё один момент - реагирует css быстро (по мере продвижения курсора на каждый пиксель (при быстром движении - на каждый шаг, там он больше 1px)), а значит лучше бы иметь систему вложенных блоков побольше (чтобы было больше кадров) (что можно сделать искуственно в эпиграфе или посте, но при проработке дизайна днева не получится, ведь приходится придерживаться изначально заданных кол-ва и структуры блоков).

По поводу отношений между вложенными блоками. Вариант первый - при наведении на первый блок (скажем, q1) мы прослеживаем его hover и применяем стиль ко вложенному блоку (например, q2) (q1:hover q2{...}), потом также к последующему и т.п. до последнего (при этом в конце анимация остановится). Вариант второй - изначально видны все, но при наведении они скрываются (я в примере просто сводил height и width к 1px, но можно придумать что интереснее, с тем же clip'ом, скажем (забавно, но display:none не сработал)); при этом, "анимация" циклична, но тут один большой фейл - hover в данном случае (разумеется) проходит через все уровни сразу, и вылетают, соответственно, по сути рандомные кадры.

Об изображении. Как уже говорил, тут целесообразно использовать спрайты. Т.е. большое изображение, состоящее из маленьких кадров (пример). При навешивании background'а мы просто двигаем это самое изображение. Так мы сразу его кэшируем, что весьма удобно, ибо избавляет от хлопот с предварительным кэшингом. В моём примере я не убирал отработавшие фреймы (т.е. всё видно одновременно). На деле, чтобы убрать их достаточно снять bg на hover'е (qX:hover {background:none;}).

Кроме того. Не обязательно закручивать эту штуку именно с bg и спрайтами, можно по тому же принципу hover'ов на вложенных блоках прописывать разные стили (позицию, размеры, прозрачность, сглаженность углов... что угодно, в общем) на разных элементах.

На практике ещё нигде не применял, но небольшой пример сделал. Тут.

Как-то так. Надеюсь, кому-нибудь пригодится\покажется интересным. Придумаю что ещё интересное (по этому или другому поводу) - отпишу где-нибудь тут.

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

URL

среда, 13 июля 2011

13:42

"коммерческое" предолжение)

все записи пользователя в сообществе Время...

Все изменится. Рано или поздно. Так или иначе.

Долго я думала - не будет ли сей пост оффтопом. ну надеюсь, что все же нет, т.к. куда уж без этого...)))
Дорогие дайриковцы, есть к вам коммерческое предложение, весьма для вас выгодное (:
для "бывалых" дайриковцев, со стажем 4-5 лет У меня на дайри. ру висит определенная сумма денег, которую мне очень хочется перевести куда-нибудь еще: на Яндекс.кошелек, на Монета.ру или хотя бы кинуть на мобилку))) Но т.к. это, увы, невозможно, то я предлагаю всем желающим (тем, кто пользуется платными сервисами и кому нужны дайри.рубли) совершить выгодный для всех обмен:
Вы кидаете мне определенную сумму денег на мобильник или Яндекс.кошелек, а я здесь, на дайри.ру перевожу вам эту же сумму ПЛЮС еще бонус, просто за то, что пошли на встречу и поучаствовали).
Если кто не в курсах, я – не обманщица, а ходячий магазин, занимаюсь продажами уже… оймамадорогая, 2.5 года! У меня есть странички, где можно почитать отзывы людей и оставить свои, в т.ч. дайри (там же есть и отзывы тех, кто уже обменивался со мной электронной наличностью).

И того, в чем вы выигрываете (это не лохотрон, мне просто нужно, чтобы это было выгодно и вам, иначе никто не захочет со мной связываться, так ведь?)))):
1. не нужно платить больших наценок (для справки - сейчас чтобы оплатить сервисы, на дайри.ру взымаются приличные проценты, в 30-50 рублей, и больше, вы же не теряете этих денег).
2. вы получаете бонус от меня. И хоть это всего 20 ру, но на дайри. ру он достаточно высоко ценится, т.к. стандартный набор услуг платных сервисов на эти же 50 рублей можно оплатить и на месяц вперед!).

По всем вопросам стучите в личку, все поясню и расскажу))
Буду ОЧЕНЬ благодарна, если поучаствуете)))

п.с. только пожалуйста, не переводите деньги не предупредив меня (ибо такой случай был)!

Почему именно для "бывалых" дайриковцев - дневники сдирают умопомрачительные проценты за переводы внутри сети, чуть ли не 40% от суммы. Я узнала это только сейчас, и это, увы, и для меня - дикость - терять 100 рублей при переводе в 300 *о*
Но для тех, у кого есть стаж на дайри - эти проценты за перевод снижаются. Т.е. если вы здесь 5 лет, то, если я отправлю вам 100 ру, вы и получите 100 ру.
Увы %(

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

URL

пятница, 24 июня 2011

12:29

Иконки

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

Оставайтесь голодными. Оставайтесь безрассудными(с)

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

лолчто?!
ну что не так.почему не отображаются иконки?
где я допустил ошибку?

 #myProfileLink a { left: -570px; background:/userdir/2/2/4/3/2243788/70199674.png # 50% 30px# no-repeat; }

@темы: Мысли вслух, меню, diaryCSS

URL

воскресенье, 19 июня 2011

16:08

все записи пользователя в сообществе Настасья Филипповна 2.0

Я стала ведьмой от горя и бедствий, поразивших меня

Уж который раз делаю дизайн, в опере и лисе все красиво, а в хроме с меню какая-то беда. Еще и экстработтом от пейдж-с оторвался пикселей на 10. Причем только на странице комментариев.
Если ж я начну править, подстраивая под хром, в опере и лисе все съедет, а я ими в основном пользуюсь. Это обидно.
В чем дело-то? Меню на странице комментов как-то отдельно прописать можно? Стоит ли вообще, или на всех не угодишь?

@темы: Мысли вслух, меню, основные блоки

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

суббота, 22 января 2011

11:05

Отступ комментариев друг от друга.

все записи пользователя в сообществе Медовая Боня

Пролитала поиск по запросу, долго-долго искала, пожалейте меня.((
Дело всё в том, что я давно хотела бы сделать себе такую штуку, как вот здесь, а именно разделённые комментарии. Или я не то пробовала, или слишком невнимательная была, но у меня даже близко ничего не получается. =\
Есть целый код от того дизайна, что на картинке, оттуда пыталась выудить "то самое", но увы и ах. Ничего не вышло, наверно, потому что тот код максимально подогнан под приведённый дизайн.
Помогите спасите. вы можете сделать меня счастливой.(

@темы: Дизайн, Мысли вслух, отступы, diaryCSS

URL

пятница, 03 сентября 2010

00:47

Greasemonkey

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

Ich bin ein Teil von jener Kraft, die stets das Gute will und das Böse macht.

Всем привет, у меня следующий вопрос: недавно открыл для себя приложение Greasemonkey, можно ли с помощью него и javasсript добавить в дайри какие-нибудь новые функции?

Если да, то какие возможности есть вообще, и есть ли уже какие-нибудь готовые скрипты?

Я ещё полный новичок в этой сфере, так что надеюсь на ваши ответы.

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

URL

среда, 21 июля 2010

21:08

Рацпредложение, оно же вопрос.

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

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

Я сейчас довольно плотно взялась за CSS. Много чего надёргала по чужим дизайнам и структурирую знания. Действие это вылилось в небольшие "уроки", которыми я собираюсь пугать своих ПЧ, в надежде, что им тоже пригодится. А здесь - целевая аудитория в количестве

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

Если идея интересна и её поддержат другие, (а администрация выделит отдельную тему) то у нас получится небольшая, но толковая энциклопедия по основным эффектам, которые здесь возможны.

Вопрос: Что скажете?

1. хорошо, когда теорию не нужно собирать по комментариям.	92	(93.88%)
2. это лишнее - здесь люди опытные и всё это давно прошли.	6	(6.12%)



Всего:	98

@темы: Мысли вслух, Точка зрения

URL


Запомнить