Veni, vidi, vici.
Я как-то обещал объяснить, каким образом в моём дневнике реализованы окна и слайдеры. Говорю сразу - если вам это не нужно, лучше просто не читайте, незачем говорить мне, что вам это не нужно.
Дальше несколько основных моментов, которые необходимо знать.
Во-первых, селекторы. Уверен, вам знаком :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. Найти его последнюю версию можно здесь.
Краткое описание.
В верхнее поле вписывается основной текст поста. Если вам нужно добавить заголовок, используйте тэг <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.
В последнее поле вам нужно вписать количество изображений.
Для начала, сам дизайн моего дневника.
Для начала, сам дизайн моего дневника. Уверен, его можно оптимизировать, знаю, в нём хватает лишнего. Моё оправдание - руки не дошли. Да, если решите использовать - пожалуйста, перекачайте изображения к себе в БИ и замените фон. Спасибо. )Шрифт
заголовка: жирный 15
теста: обычный 14
гарнитура: Georgia
Цвет текста
заголовка: #dddddd
ссылки: #cccccc
записи: #bbbbbb
оффтопика: #555555
Цвет фона и границ
фона дневника: #
фона записи: #
фона заголовка: #
границы: #222222
CSS
заголовка: жирный 15
теста: обычный 14
гарнитура: Georgia
Цвет текста
заголовка: #dddddd
ссылки: #cccccc
записи: #bbbbbb
оффтопика: #555555
Цвет фона и границ
фона дневника: #
фона записи: #
фона заголовка: #
границы: #222222
CSS
Дальше несколько основных моментов, которые необходимо знать.
Дальше несколько основных моментов, которые необходимо знать.
Во-первых, селекторы. Уверен, вам знаком :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, основные блоки, Дизайн, Мысли вслух, Учеба
-
-
16.04.2011 в 21:01-
-
16.04.2011 в 21:02Рад, что вам понравилось. )
-
-
16.04.2011 в 21:22-
-
16.04.2011 в 21:32-
-
16.04.2011 в 21:36You are welcome. ^_^
-
-
16.04.2011 в 22:24-
-
16.04.2011 в 23:07-
-
16.04.2011 в 23:41-
-
17.04.2011 в 13:44Спасибо. ^_^
Да, там существенный минус - оно закрывается, когда уводишь мышь с окна браузера, а это порой происходит случайно, что неприятно. Пока не знаю, как это исправить и можно ли вообще. А ещё не помешало переписать систему комментариев... Хочу сделать её как в ICQ и вообще в чатах, было бы гораздо удобнее. Может, на днях и займусь этим. )
-
-
17.04.2011 в 13:45Sorry, didn't see you.
Glad you like it. ^_^
-
-
17.04.2011 в 20:23-
-
18.04.2011 в 18:35вашу бы энергию, да в нужное (читай, практичное) русло.
-
-
30.08.2011 в 21:05dead_mockingbird квадратное - не квадратное, а симпатичное
-
-
30.08.2011 в 21:38Я тут давно код того днева не кидал. Да и его уже давно не обновлял - было пару идей, особенно в плане оптимизации, но пока не занялся, не сделал. А ещё была ещё более необычная идея для дизайна днева, но опять же - сесть, сделать...
-
-
30.08.2011 в 21:48вот сейчас сижу, делаю...а хочется уже все меньше и меньше)
-
-
30.08.2011 в 22:49