ALTERNATIVE
INDIE
CLASSIQUE - PIANO
AMBIENCE - LOUNGE
___ CODES ___

URL
 
воскресенье, 09 апреля 2023
19:36 

Доступ к записи ограничен

Закрытая запись, не предназначенная для публичного просмотра

URL
четверг, 24 февраля 2022
20:52

За одну ночь жизнь переменилась

URL
среда, 01 июля 2020
22:14

Time

No time
No space
Only feelings

URL
пятница, 25 октября 2019
22:32

Здесь жизнь

Одних время сгибает.
Иных ломает.
Прочих - мало...
Средь них единицы тех, кто растёт.

P. S. Мне не нравится водить машину, но я его вожу.

@темы: без подтекста, деперсонализировано!

URL
суббота, 22 июня 2019
21:20

A1 quiet radio

Суббота. Кафедра. Мой дипломник.
Спрашиваю: "Музыка не мешает?".
Отвечает: "Нет. Наоборот. А плей-лист не дадите?"
Я: "Проще сфотографировать. Я это радио уже больше 8 лет слушаю. Эта станция для эстетов"

Всем, кто остался... - вы понимаете.
Всем, кто пришел - велкам.
Всем прочим - желаю обрести вам счастье.

Соушайте А1 quiet radio.
Пейте брют из изящных бокалов.
Лето. Необыкновенное. Дивное лето.

5 дней. Всего 5 лней.

@темы: без подтекста

URL
21:05

Взаимные

Доверие. Интерес. Уважение.

URL
среда, 18 ноября 2015
20:26

Напоминалочка

CSS
parent & child selectors on a diary.ru platform.

@темы: CSS

URL
понедельник, 29 июня 2015
21:21

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



@темы: Music - Jazz Lounge Blues

URL
суббота, 22 ноября 2014
21:18

Картинки вместо "предыдущая", "следующая"

Магия творчества в ФШ - и красивая кнопочка "наверх" аграфом украшает дизайн.
Аксессуары на дневничках не так разнообразны, как хотелось бы. А смена акцентов под любой стиль вносит разнообразие.

В листинге страничек - картинки. К сожалению, скрин продемонстрировать не с чего. Код двух табличных элементов:



— tr.pages_str td:nth-child(2) - картинка листания страничек вправо
— tr.pages_str td:nth-child(1) - влево, соответственно.

Можно всю панельку с листингом, и циферками в том числе, закрепить на экране неподвижно, как описано здесь «Листинг страниц», вместо слов "предыдущая" и "следующая" вставить картинки и вот эксклюзивный элемент дизайна.


Как-нибудь распишу Буквицу с картинками, когда детали обретут ясность и завершённость.
А пока в студии нет красок, лаков и кисточек.


@темы: CSS, CSS-примеры

URL
21:18

Фон в комментариях к отдельной записи


My Precious Muse
Thank You

«Фон странички комментариев к этой записи мог быть особенным», -
думаете вы.

Что же... Будет )


Загляните в комментарии к этой записи и вы всё увидите сами.
Ах да, кажется в комментариях к - примеру - о фонах на разных страничках я несколько поторопилась с выводами.

NB! Следуйте неотступно "букве" кода.
-- I --


♔ Создаём новый пост с одной единственной картинкой. Именно с неё вы начинаете свою запись. После неё в посте может быть всё что угодно.
♔ Картинку лучше всего большого разрешения, скажем не меньше 1920px × 1200px, как в этом посте. Можно больше. Только не забывайте о весе в Мб. Смотрите сами, с мониторов какого размера заглянувших к вам на дневничок вы рассчитываете произвести впечатление.
♔ Да, из основной ленты вы видите её масштабированной, что реализовано в CSS-коде к моему дневничку.
♔ Ко всей красивости и приятности, вы выигрываете в качестве изображения в фоне, не добавляя его в БИ, самым беспощадным образом ограничивающей ваш полёт фантазии до 231кб. Стандартный код для вставки изображения в запись с центрированием в блоке поста:



-- II --

♔ Добавляем в CSS-код две строчки:



♔ Ингридиенты:
  • #JournalComments #post________ .postContent img — селектор картинки для странички комментариев к конкретному посту.


    • NB! вместо ____________ без пробела вписываем номер поста отсюда
    - ССЫЛКА на пост -
    с разъяснением, так как нельзя в этот пост ещё одну картинку добавлять.


  • #JournalComments #post_____________ .commentAuthor{display: none; } — эта строчка кода решает проблему расползающейся картинки аватара в посте отключением блока с аватаркой и подписью.

  • z-index: -1 !important; — помещает увеличенную картинку под враппер, но перед основным фоном.

  • display: block; — "отрывает" картинку от записи.

  • position: fixed;— фиксирует картинку на странице.

  • min-width: 100% !important; — то есть, картинка растянется до своей первоначальной ширины, нижняя часть полотна при несоответствии соотношения сторон скроется под окном браузера, к тому же, картинка будет автоматически масштабироваться при изменении размеров окошка.

  • width: 100%; — почти то же, что и выше, только чтобы уж наверняка,

  • top: 0; left: 0; — для позиционирования картинки от верхнего левого угла окошка браузера.

    • ♔ Есть "но":
    При процентном задании обоих ширин нужно, чтобы картинка или была равна или превышала размеры окошка браузера. То есть потери качества фонового изображения при этом не приключится. Сравните, -- это страничка комментариев -- , а -- вот это -- - оригинальное фоновое изображение. Само собой, можно и 130% задавать, если картинка меньше "окошкиных" размеров. Вы ведь понимаете, изображение на картинке немножко расплывётся.

    Ещё немножко волшебства... )


    @темы: CSS, CSS-примеры

    URL
    21:18

    Gradient & Ornament

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

    уж простите великодушно, но, ввела вас в заблуждение, в котором и сама пребывала. По неопытности, ранее опрометчиво полагала, что градиент не совместим с какими-либо картинками в атрибуте background. Совершенно случайно обнаружила возможность наложения и фоновой картинки и градиента, разумеется того, который поддерживается браузером (смотрите всё в тот же пост по ссылке).


    Code:



    Разбираем код:
    — #post190719794 .paragraph - идентификатор элемента. В данном примере - отдельно взятого поста в дневнике. Можно прописывать для любого элемента.
    — background - атрибут, определяющий оформление фона элемента.

    Особенности:
    — чтобы эффект работал, в CSS-код оформления соответствующего идентификатора необходимо прописывать атрибут background с градиентом, в данном случае линейным, и фоновой картинкой для каждого браузера отдельно. Утомительно, и всё же, утончённого и требовательного перфекциониста не остановят препятствия в достижении прекрасного эффекта. Итак, например, для FireFox:



    и для Opera:



    — если картинку прописать перед градиентом, то получится такой эффект:


    То есть, картинку над градиентом будет видно в любом случае, если её цвет не совпадает с цветом фона и они при этом не "сольётся" с ним.

    Code:


    Возникли вопросы? Пожалуйте в комментарии к посту. Всенепременно и с удовольствием поделюсь )
    Много курю. Карр не берёт. Сама - Карр. Вспомнился недавно просмотренный фильм "Транс". Разве что изолировать месяца на три где-то в местности без растительности, там, где даже саксаулы не растут. Ах, какая же чудная игрушка этот CSS! )

    @настроение: Оставить что-то, надеюсь, полезное.

    @темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

    URL
    21:17

    Списки в Меню

    Чувство, словно превзошла сама себя. Ведь я даже не надеялась разобраться с этой задачей, о которой пойдёт речь в этом посте.
    В меню есть три известных мне списка:
    - 1 - Темы записей.
    - 2 - Постоянные читатели.
    - 3 - Ссылки.

    Эти списки для блочного дизайна в позиции меню вверху при автоматических настройках становятся непрезентабельно длинными и широкими. Для табличного дизайна с меню вверху не проверяла, и посему ответить нечем.
    Если же в дизайне предполагаются рисованные фоны ограниченных размеров для этих блоков, как в моём дневнике или, к примеру, в дневнике  Sans phrases..., то стандартные оформления нарушают целостную гармонию.
    Работа над дизайном господина  Sans phrases... позволила случайно приоткрыть решение вопроса со списками. Сама задача формулировалась так:

    Список со скроллингом,
    идеально вписывающийся в вычурный фон меню.

    Cкрины:

    В дизайне вышеупомянутого господина я сделала куда как проще, поскольку фон прямоугольный - раскрытая книга. Но именно так была подхвачена нить Ариадны. Буквально пара строчек кода для тем в меню и где-то ещё для списка ПЧ.
    Но, в моём дизайне фон с красивыми виньетками сверху и снизу. И моему эстетствующему вкусу не подходила предыдущая модель, в которой списки будут наползать на мои красивости. Решение пришлось дорабатывать. И вот что получилось для СПИСКА ТЕМ в меню:



    Детали кодирования:

    — селектор #thisDiaryOwner ul :
    - в атрибуте margin прописывается позиция фона относительно, по-сути, заголовка.
    - в height и width - высота и ширина блока приблизительно под размер нарисованного фона, в котором коротенький список из двух элементов: "календарь записей" и "Темы записей". Остальные я отключила, не видя в них необходимости.
    - в padding-top - задан отступ от нижней границы блока до первого элемента списка, чтобы текст не наезжал на виньетку.
    - в background - мой красивый, чуть прозрачный .png фон с виньетками.
    - в transition задано время срабатывания opacity на #thisDiaryOwner ul:hover - то есть, время через которое плавно смениться частичная прозрачность на максимальную непрозрачность фона меню и его содержимого - блока списка.

    — селектор #thisDiaryOwner ul:hover - управляет прозрачностью, делая фон меню таким каким он нарисован в ФШ, как и всё остальное в блоке.

    — в селекторе #thisDiaryOwner.menuSection ul li:last-child всего один атрибут, который задаёт позицию для последнего элемента списка относительно нижней границы блока списка как для основного меню "Записи", так и для последнего в блоке "Темы записей".

    — селектор #TagsList :
    - в атрибутах height и width задаётся высота и ширина блока "Темы записей" с учётом отступов для фоновой картинки в следующем атрибуте, и в котором в дальнейшем будет располагаться список тем.
    - в background - прописывается фоновая картинка. И вот тут ВНИМАНИЕ!: в свойствах самой картинки задаём позиции фона относительно границ блока. У меня прописаны значения с учётом смещения по диагонали: вправо 20px и немного вниз 5px.

    — селектор #TagsList ul :
    - в атрибуте background: rgba(0, 0, 0, 0); - прописывается прозрачный фон. Иначе дочерний элемент подхватит фон из #thisDiaryOwner ul. А это нам не нужно. Потому что именно из-за него не получится потом вписать список в красивый фончик.
    - в width задаётся ширина блока под список с учётом возникающего позже скролла, то есть немножко больше на ширину полосы прокрутки.
    - в margin подбираются отступы, с учётом высоты верхней виньетки, до первой темы в списке. И отступ всех элементов списка от левой границы блока.
    - в overflow-y: scroll; прописываем вертикальный скролл - полосу прокрутки для списка внутри блока.
    - в text-align: left; - выравнивание текста.

    — селектор #TagsList ul li :
    - в атрибуте width подбираем значение ширины списка - немножечко меньше, то есть меньше на ширину полосы прокрутки.
    - в margin задаются отступы между строками с элементами списка, чтобы немножко сжать сам список.
    - в white-space: normal !important; - задаётся команда переноса ДЛИННЫХ тем записей на другую строку. Иначе загадочно-пространные темы записей вылезут за фон и вся красота на том будет порушена. С чем, собственно я долго не могла справится, почти разуверившись в успехе и своих способностях.

    — селектор #TagsList ul li:first-child, в котором один единственный атрибут призван преодолеть удваивающийся из-за наследования свойств отступ от верхней границы блока списка. Да, есть такое неудобство "тяни-толкай".

    outline: 1px solid #00ff00; вам в помощь )

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

    С вопросами обращайтесь в комменты.

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


    @настроение: Оставить что-то, надеюсь, полезное.

    @темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

    URL
    21:17

    Градиентная заливка блоков средствами CSS

    То есть не картинками, а именно CSS-атрибутами. Не ново, конечно. Попросили расписать.
    Например, градиентная заливка блоков параграфа, даты поста и т.д. и т.п. В виду особенностей этого атрибута, о которых пойдёт речь ниже, скрины с примерами сделала для одного единственного поста. Кстати, так можно выделять какой-то отдельный пост в своём дневнике, если вы хотите подчеркнуть его содержание.

    ЛИНЕЙНЫЙ градиент до и после наведения мышки

    Скрины:


    Реализуется этот эффект атрибутом linear-gradient. Ссылка на htmlbook с подробным описанием и визуализацией некоторых особенностей - linear-gradient.
    Код для примера в скринах:



    Пояснения по коду аха, код становится такииим "пушистым" ):

    В селекторе #post186927558.singlePost прописываются свойства элемента ДО наведения мышки:
    — Синтаксис атрибута "линейный градиент":
    background: linear-gradient(top, rgba(117, 83, 83, 0.5) 0%, rgba(117, 83, 83, 0.2) 30%, rgba(117, 83, 83, 0.2) 71%, rgba(117, 83, 83, 0.5) 100%) !important;
    1) !important - в конце НЕ обязателен, просто в данном примере свойства прописывались для отдельного поста.
    2) Для браузеров старых версий в свойства селектора прописываются дополнительно к background: linear-gradient(___) ещё такие с теми же значениями:
    - Firefox: background: -moz-linear-gradient(___),
    - Chrome: background: -webkit-linear-gradient(___),
    - Opera: background: -o-linear-gradient(___).
    3) top - направление градиентной заливки. Другие примеры смотрите по ссылке вверху на htmlbook.
    4) Как видно, в синтаксисе прописаны 4-е цвета с их относительными позициями в %. НО, можно оставить 2 или 3, можно и 5. Позиции можно прописать в пикселях. Тут решаете вы сами.
    5) Формат заданного цвета можно брать как стандартный #______, так и rgba(___, ___, __, ___), который мне больше нравится, хотя и длиннее, т.к. в последнем параметре позволяет задавать прозрачность для цвета.
    — В остальных атрибутах прописаны свойства:
    1) margin: - отступы от предка (родителя) - отступы от родительских элементов в ленте. Это можно понять по тени, которая прописана в ту область отступов.
    2) padding: - отступы до потомка (дочернего элемента), по сути - отступы до содержимого внутри блока. Ну, чтобы было красиво.
    3) box-shadow: - тень для блока, которая потом поменяется после наведения мышки.
    4) transition: - динамика и временные параметры изменений тени после наведения мышки.


    В селекторе #post186927558.singlePost:hover - свойства элемента ПОСЛЕ наведения мышки:
    — только одно свойство - box-shadow: - новый формат тени.


    РАДИАЛЬНЫЙ градиент до и после наведения мышки

    Скрины:


    Ещё один, на мой взгляд, более интересный способ градиентной заливки с описанием по ссылке radial-gradient.
    Код для примера в скринах:



    Этот атрибут детально расписывать не стану. По ссылке выше есть вся необходимая информация. А будут вопросы, обращайтесь сюда в комменты )

    ОСОБЕННОСТИ

    Кроется в этих атрибутах небольшой подвох: если для какого-либо блока нужно прописать фоновую картинку, рисованную рамку, например, или вензель в конце или в начале поста, то этот атрибут не будет работать. Т.е. атрибут _background: url('');_ не совместим с со свойствами атрибута градиентной заливки.

    @настроение: Оставить что-то, надеюсь, полезное.

    @темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

    URL
    21:17

    Скрыть страницу своего дневника ...

    ... от любопытствующих глаз, не давая им пищу для пересудов.

    Сама идея такого эффекта предложена сударем  Ловчий->.
    Поскольку в моём дневнике, как на рождественской ёлке, уж-через-чур много всего навешано, дальше будут примеры либо без ссылок и со скринами, либо даже без скринов. Придётся примерять на себя.
    Теперь расскажу как сделать так, чтобы, убрав мышку со страниц своего дневника, подошедшие глазки смотрели только на вас, а не на экран вашего монитора. Эффект работает, если мышка выведена за область просмотрового окна браузера, т.е. она либо где-то на полосе прокрутки окна, либо на панели закладок, либо на виндоусовской панели задач. А код такой:



    То есть, идея реализуется псевдоселектором :hover. Разбираем код:

    — .block_design - все необходимые настройки для основного контейнера + атрибут background: url('_адрес из БИ_') , в котором прописывается NB! :
    картинка того, что будут видеть те самые глазки,
    когда мышка выведена за пределы окна

    Например, как предположил всё тот же инициатор  Ловчий->, скрин какой-нибудь газеты от себя добавлю - "The Times", например, в оригинале ) ну, или что душе будет угодно.
    — .block_design:hover - код для обычного нормального отображения дизайна. В атрибуте background: url('_адрес из БИ_') прописываем картинку. Затем во всех оставшихся атрибутах NB! смотрите внимательно в код обязательно прописываем !important, иначе ни эффекта ни любимой фоновой картинки в вашем дневнике не будет.

    Думаю, для тега body то же будет работать.

    @настроение: Оставить что-то, надеюсь, полезное.

    @темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

    URL
    21:16

    Листинг страниц

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

    Пример - в моём дневнике. Не думаю, что где-то на дневниках такое есть.
    Скрины - первая страница избранного, где-то в середине ленты и вторая страница: первых две - на мониторе 20", вторые две - что-то около 15":



    Код:



    Правда, этот код со всеми настройками оформления (шрифты, цвета фонов и текста, отступы и прочее), прописанных для нынешнего дизайна моего дневника. И, по-традиции, с вопросами по деталям кодировки обращайтесь в комменты.
    Разбираем код:
    — #pageBar - ширина блока с нумерацией страниц.
    — #pageBar a - оформление ссылок в этом блоке до наведения мышки.
    — #pageBar a:hover - оформление ссылок в нумерации страниц после наведения мышки.
    — .pages_str - ТЕ САМЫЕ кнопки листинга страниц, тут - фиксирование блока и его позиционирование.
    — .pages_str td - ширина и высота табличного элемента, в который вписаны ссылки на сами кнопки. Особенность в атрибуте width: 100% !important; , который задаёт ширину этого элемента на всё окно браузера, чтобы кнопки "примостились" у боковых границ окна с небольшим отступом, который прописан в предыдущем селекторе. Тут можно "играться" этим параметром сколько душе угодно.
    — .pages_str a - оформление ссылок этих кнопок до наведения мышки.
    — .pages_str a:hover - оформление ссылок этих кнопок после наведения мышки.
    — .pageBar td a - оформление блоков (табличных ячеек), в которые вписаны все ссылки
    (нумерация, кнопки листинга) блока листинга страниц до наведения мушки.
    — .pageBar td a:hover, #favGroups a:hover - то же что и предыдущее, тольк после наведения мышки.
    — .pageBar td strong - оформление активной ссылки на номер активной страницы.

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

    А вот так звучит моё настроение. В нём крик чаек где-то вдалеке, плеск океанских волн и захватывающее дух усыпанное звёздами ночное небо.


    Это не оригинальный трек, а:

    Armin van Buuren - John O Callaghan ft Lo-Fi Sugar -
    «Never Fade Away»
    - Andy Duguid Mix - On The Beach Intro Edit

    Да, я слушаю и транс. Красивый, на мой взгляд, транс. И мне ооочень нравится. Наверное, просто хочу на море. А лучше - к океану.

    • Вспыхнула очередная сверхновая идея! Просто грандиозная! Сама обалдела от размаха. Пока никому ничего не скажу. Предпочитаю не говорить о том, что существует в сфере незримого. Как только удастся реализовать хотя бы наброски, покажу. Это будет что-то радикально новенькое. Когда всё это воплощать? Итак две уже подвисли в воздухе.


    @настроение: Оставить что-то, надеюсь, полезное.

    @темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

    URL
    21:16

    Фон на разных страницах дневника

    Ааа, вспомнила. Есть у меня ещё одна наработка - на разных страницах одного и того же дневника в код можно прописать разные фоновые картинки. Например, 2 разные фоновые картинки на страницах избранного (JournalFavorite) и комментариев (JournalComments). Сделать можно так:



    Можно для всех страниц дневника прописать разные фоны.
    Страницы:
    — основная + введения новой записи + страница с темами записей + блокнот - #Journal,
    — избранное - #JournalFavorite,
    — комментарии - #JournalComments,
    — черновики - #JournalDraft,
    — календарь - #JournalCalendar,
    — цитатник - #JournalQuote.

    Примеры, помимо основной страницы моего дневника:
    — Страница моего - Избранного - - фон пока на переделке.
    — Любая страница - Комментариев -
    — Страница моего - Цитатника -

    Важное замечание о коде. Код, что выше в тексте примера, представлени для дневников, в которых враппер позиционируется во по центру верхней границы окошка браузера. Если же враппер в дизайне вашего дневничка позиционируется по левому или правому краю окошка браузера, то в селекторе кода вместо top следует записывать left или right соответственно.

    @настроение: Оставить что-то, надеюсь, полезное.

    @темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

    URL
    21:15

    Меню вверху, появляющееся при наведении мышки

    Всё в том же дневнике  |Иероним| у верхней границы встроено меню, появляющееся при наведении мышки, причём с любой точки фленты. В моём дневнике меню всегда в поле зрения.
    Раньше довести идею до представляемой в воображении не удалось, т.к. не сообразила, что могу подключить к ноуту монитор 20" и отрабатывать нюансы при разных разрешениях и соотношениях сторон экрана, чтобы ничего нигде не смещалось и всегда оставалось на своём месте. Теперь же идея воплощена в том виде, в каком мне хотелось. И работает этот эффект так, как будет показано на скринах ниже.
    В неактивном состоянии:


    После наведения мышки к верхней границе окна из любой позиции на ленте:


    Особенность реализации состоит в том, что в меню отключено название дневника. Но, его можно подключить. Если возникнет необходимость, отдельным постом потом расскажу как это сделать без потерь в эффектах.
    Ну что, код:



    Теперь по коду основное:

    — 1 — в селекторе #side .bordered в атрибуте «position:fixed;» прописано фиксированное положение всего блока меню.
    - В «z-index: 1000;» - блок должен быть всегда выше всех остальных элементов на странице, т.е. при прокрутке ленты ничто не должно на него наезжать и закрывать.
    - В группе свойств «margin: 0 auto !important; width: 1100px; height: 130px; top:0px;» - позиционирование блока по центру окна браузера.
    - В «background: url('/userdir/1/8/0/9/1809297/78053862.png') no-repeat; background-position: top center;» - фоновая картинка всего блока, вместо сплошной заливки цветом.
    - В группе «-webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s;» - время, через которое после наведения мыши должно плавно возникнуть меню со всеми подпунктами.
    - В группе «-moz-opacity:0; opacity:0; -webkit-opacity:0; opacity:0; filter:alpha(opacity=0);» - меню не видно, пока не будет наведена мышка. А дальше, после наведения мыши, работает следующий селектор.

    — 2 — #side .bordered:hover, в котором в свойствах «-moz-opacity:1; opacity:1 !important; filter:alpha(opacity=100);» меню проявляется.

    — 3 — строкой #side h1 {display: none; } - отключено отображение названия дневника. Фишка такая )

    — 4 — Дальше в блоках кода, в селекторах: #authorName (имя автора дневника, совсем не обязательно, чтобы точно по нику), #thisDiaryOwner (пункт меню "Записи"), #myDiaryLinks (пункт меню "Мой дневник"), #globalLinks (пункт меню "Главное меню") - прописаны фоновые картинки под ссылки на сами заголовки меню, фоны (картинка - флаг) в этих меню, эффекты при наведении мыши, позиционирование.
    - Также в свойствах к этим селекторам прописаны высоты строк элементов списка меню, отступы между ними, чтобы они вписались в высоту фона меню.
    - Тут стоит отметить, что многие ссылки из блока меню просто отключены за практической ненадобностью, поскольку, как показывает мой личный опыт, ими со страницы своего дневника редко пользуется. Остальное можно сделать и через профиль пользователя. В общем, так страница дневника автора не перегружена лишними элементами.

    — 5 — В .menuSection - прописано отображение ссылок во всех пунктах меню и эффекты к ним при наведении мышки.

    — 6 — В селекторе #iAmQuit b a прописан код для кнопки "Выход".

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

    @настроение: Оставить что-то, надеюсь, полезное.

    @темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

    URL
    21:15

    Меняющаяся картинка в экстратопе/экстработтоме

    В дневнике  |Иероним| в экстратопе реализован эффект смены картинки при наведении мыши. Выглядит это так:

    В обычном состоянии:

    После наведения мыши:

    Но, есть несколько "НО"!
    - 1 - в Firefox эффект атрибута «transition» работает чётко и безотказно: медленное затухание верхней картинки и постепенное проявление нижней. Т.е. так, как предполагается свойствами самого атрибута.
    - 2 - в Chrome по не понятным причинам эффект атрибута «transition» работает иначе: верхняя картинка летает и разворачивается. И это тоже интересно. Вообще Chrome с CSS, как отмечают знатоки, не очень дружит. И разработчикам этого браузера не плохо было бы уделить этому вопросу немного больше внимания, имхо.

    Есть 2 варианта решения:
    1. Простой - без «transition», т.е. без плавной смены картинки, по сути - резкая, как бы скачкообразная смена. Так было в коде дневника  |Иероним| до вчерашнего вечера. Но, мы ведьмы эстеты! И простые воплощения не в нашем стиле.
    2. Чуть более сложный с маленькими хитростями и своей загвоздкой, о которой тоже поведаю ниже.

    Итак:
    1 вариант:

    Работает так, как поначалу у  |Иероним| в дневнике. Т.е. картинка сменяется на "ховерную" скачкообразно. Код выглядит так:



    Где основное:
    — в селекторе #extratop: «background-position: top center;» - позиционирует картинку в экстратопе по верхней границе (top), и по ширине - по центру,
    — в селекторе #extratop:hover: прописывается другая картинка, для которой дополнительно указан атрибут «top: 0px;» , по-правде говоря, я его так на всякий случай вписала.
    — высоты картинок должны быть одинаковыми, и в «height:» нужно прописывать их точное значение, иначе картинка будет "плясать".


    2 вариант:


    Сходите в дневник  |Иероним| и вам не придётся мысленно предствалять плавную динамику в смене картинок, или странный баг в Crome, на который тоже стоит посмотреть, поверьте, чтобы оценить разницу в работе одного и того же атрибута в разных браузерах.
    А теперь упомянутая выше загвоздка, которая в глаза сразу не бросится, и на которую можно забить. Так вот, при сворачивании окна браузера в окно на средней кнопке вверху, нижняя картинка немного сместиться относительно верхней и станет видна какая-то её часть из-под верхней. Внизу экстратопа справа, как это видно на пикче:


    После наведения мыши нижняя картинка смещается, т.к. для неё в коде прописано позиционирование по центру, а вот враппер так не может:


    Может с враппером и можно разобраться, но, мне пока недосуг. Да и вам будет задачка. Не забудьте потом поделиться решением )
    Если на секундочку или дольше предположить, что большинство пользователей сидят в развёрнутых во весь экран браузерах, то этот бок не вылезет и никто ничего не заметит. А если и заметит, то не придаст особого значения и не побежит злорадствовать и тыкать в якобы недоработку. А ведь он просто несведущ в том, что конфликт атрибутов в разных селекторах не позволяет устранить этот недостаток _нуникак_! Ну, мы улыбнёмся и простим его )
    Это тот вариант, над которым пришлось поработать, т.к. до "лбом об стену" хотелось вписать в код атрибут «transition», чтобы смена картинки происходила без "скачка" и позиции всех блоков чётко совпадали. Короче, код:



    Где:
    — в #add_block1: прописывается картинка, которая будет под экстратопом, и будет проявляться после наведения мыши. «position: absolute» - обязателен, чтобы выровнять картинку относительно верхней границы браузера. В атрибуте «background-position» обязателен !important, иначе не заработает позиционирование. Высоты картинок во всех селекторах должны быть одинаковые. Ну а «content:" ";» - обязателен по синтаксису.
    — в #extratop: добавлен «z-index: 90;» (чем больше, тем надёжнее), чтобы он накрывал add_block1, у которого по умолчанию z-index будет получаться больше, т.к. это добавочные 10 элементов в конце CSS-кода дайри-страниц. Дальше «min-width:1100px; width:1100px;» - ширина самой картинки. Она у меня равна ширине самого враппера. В атрибуте «opacity: 1;» прописано, что картинка должна быть видна. А вот в ...
    — ... в #extratop:hover: прописано, что она должна исчезнуть, раствориться в атрибуте «opacity: 0;» и открыть пикчу в add_block1.

    В следующем посте будет самый большой пример.

    @настроение: Оставить что-то, надеюсь, полезное.

    @темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

    URL
    21:14

    "Темы записей" в меню

    В моём дневнике фон в меню - картинка фиксированных размеров по высоте. Если в вашем дневнике овер21тем записей, то, понятно, что все они в такой фон не влезут при всём вашем желании. Проблему можно решить, оставив ссылку только на последний пункт списка, прописанного на дневниках - "Все темы (счётчик)". Этот пункт автоматически формируется 21-м, потому тем должно быть больше 21-ой. Переход по такой ссылке будет отправлять читателя на страницу со всеми темами, где читатель отыщет ссылки на искомые темы записей. Пример реализации можно видеть в дневнике  |Иероним|.


    Решается задача следующим образом. В код прописываем строку:



    Эта строка отключит отображение всех элементов списка «ul li» выше пункта списка "Все темы (счётчик)". И безобразие с невидимыми остальными темами в "Темах записей" из-за ограниченных размеров блока «ul» во всех блоках меню будет устранено.
    Дополнительно в селекторах «#TagsList ul» и «#TagsList li» можно прописать позиционирование этой ссылки в блоке. Детальнее решение вопроса позиционирования в коде можно посмотреть в "исходном коде страницы" дневника  |Иероним|.

    @настроение: Оставить что-то, надеюсь, полезное.

    @темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

    URL
    21:14

    Настраиваемые кнопки - остальное

    Существенное дополнение к P.S. and UPD!

    Ситуация аналогична прописыванию буквицы в предыдущем посте. Код для нижеследующего будет работать только в вашем дневнике.
    Чтобы не происходило замены картинок для P.S. and UPD на значки маркированного списка, через теги которого реализована предлагаемая ниже фишка, код для этих картинок прописывается добавлением блочного CSS-элемента непосредственно в пост:

    -- Дальше --


    Продолжение предыдущего поста: PS, UPD, (с), ударение, "сдвинутый" текст.

    -- ДЕТАЛЬНЕЕ --


    @настроение: Оставить что-то, надеюсь, полезное.

    @темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

    URL