Original Designs бесплатники, CSS и уроки по созданию оформлений.

23:34 

Изумрудный Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Эпиграф очень своеобразная часть дизайна, живущая своей жизнью, поэтому в его оформлении есть свои нюансы.
Допустим все картинки уменьшены под ширину ленты. Картинка использованная в эпиграфе подчинится общему правилу. А если она допустим должна быть больше и в ней присутствуют ссылки то все поедет.
Чтобы этого не случилось ширину картинкам эпиграфа лучше прописывать отдельно, соответственно под размер конкретной картинки.
#epigraph .paragraph img {max-width: 750px;max-height: auto;}
На эпиграф также распространяются правила обводки, полу прозрачности, тени и прочих изысков из общей ленты. Убираются они отдельной строкой.
#epigraph .paragraph img { border: none!important; opacity : 1.0 !important; box-shadow:none!important;}
Кстати подобные манипуляции лучше проводить и со смайликами. (Здесь прозрачность уменьшена)
#shsmile, #atTagBox, .smile { border: none!important; opacity : 0.4 !important; box-shadow:none!important;}
Может показаться что с эпиграфом одни проблемы, но это не так. Первая закрепленная запись дает уникальную возможность прописывать ссылки, которые в структуре дайров не предусмотрены, визуализировать их картинками и закреплять в любом месте. Единственный минус в том, что все это отображается только на главной странице дневника (как и сам эпиграф). Однако это благодатная почва для смелых экспериментов.
Реализуется при помощи двух несложных строчек кода, одна из которых прописывается в настройках, там где "Эпиграф, фото, список ПЧ", а вторая добавляется в CSS код оформления.
Допустим вам хочется растащить по углам оформления кнопки соцсетей. Если использовать для этих целей картинку с полупрозрачной подложкой и прописывать ссылки координатами она перекроет меню и ленту записей, к тому же не подстроится под экран. Как быть?
1. Вставляем в эпиграф новый id

Присмотритесь к подчеркнутому

2. Теперь новому id прописываем свойства так, как если бы он был стандартным пунктом дайровского меню:

Например:
Эпиграф, фото, список ПЧ:

Настройки CSS:

В результате получаем:

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


Симпатично, но хочется эффектный бэкграунд. И тут встает вопрос как его прописывать? Если через дополнительные блоки картинка останется висеть на всех остальных страницах, что не есть хорошо. И выйти из положения мне как раз помогли дополнительный id и манипуляции с эпиграфом:
Эпиграф, фото, список ПЧ:

Настройки CSS:

Результат:

Картинка исчезает вместе с постом твиттера со всех страниц кроме главной.
Помимо всего прочего все эти манипуляции с дополнительными ссылками никак не влияют на текстовое содержимое эпиграфа, то есть он у вас останется где ему и положено, в начале ленты записей.
запись создана: 04.11.2016 в 21:19

Вопрос: Полезно?
1. Да. 
45  (100%)
2. Нет. 
0  (0%)
Всего: 45

@темы: как это сделано, урок, возможности CSS, Кареглазый Демон, CSS

Комментарии
2016-11-04 в 21:54 

Энтони Крафт
Шикарно получилось :red:

2016-11-04 в 22:49 

Изумрудный Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Энтони Крафт, благодарю) Лишь бы на пользу пошло)

2018-01-30 в 03:58 

Нэко
🌠я не скульптура, застывшая и неизменная, я — живая и несовершенная🌠
Слушайте, это вот совсем великолепно))) Пост по заявке! изображение изображение изображение
Спасибо вам большущее, пока что для меня этот урок слишком сложный (не поняла почти ничего из объяснений про новый id), но я УВЕРЕНА, что разберусь рано или позно и ещё краше сделаю свой дайрик *__* лайк

Кстати, как-нибудь, если хотите, зайдите на досуге взглянуть, ВО ЧТО я сейчас превратила свой дизайн с помощью Ваших уроков!!! Просто я очень довольна тем, как мой дневник выглядит, и радуюсь при мысли, что это сделала сама)) С помощью массы советов и инструкций чртг

2018-01-30 в 09:36 

Изумрудный Демон
Ко мне на "ВЫ", шепотом и с придыханием...
А этот пост как оказалось уже был. Я перебрал те что были по теме "как это сделано" и везде где было по смыслу добавил "возможности CSS". Так что пройдитесь по этому тегу, возможно найдете еще полезного.
Посмотрел) Очень симпатично. Продолжайте в том же духе)

2018-04-10 в 23:07 

emercy
Владелец дневника видит IP-адреса пользователей, оставивших комментарии!

2018-04-10 в 23:18 

emercy
Простите, сенсорный экран слишком сенсорный. Пост интересный, даже хочется попытаться повторить это у себя. Я что хочу узнать:
1. Если опустить последний пункт, оно на каждой странице будет работать?
2. Вообще говоря, такими постами можно "обвешать" всю страничку дневника, набив в них любимую музыку (например, у меня в дневнике в "оторванном", правда, эпиграфе висят internet-радиостанции), важные ссылки, какие-нибудь картинки-гиффки, фото любимой собаки-кошки-хомячка или человека, - всё на что вашей фантазии хватит.
А как будет выглядеть код для интернет-радиостанции или плеера?

2018-04-10 в 23:23 

emercy
3. Можно ли таким способом вставить в это окошко виджет, например, отсюда?

2018-04-11 в 10:18 

Изумрудный Демон
Ко мне на "ВЫ", шепотом и с придыханием...
emercy, я поясню. Те коды что я даю для эпиграфа двигают и позиционируют элементы внутри эпиграфа на той странице где висит эпиграф. Соответственно твиттер прописывается через код поста и висит на той странице где располагается сам пост. Поэтому если пост уползет, а подложка прописана через эпиграф она останется, а сам пост с записями будет на второй странице.
1. Нет. Только на первой.
2. А как будет выглядеть код для интернет-радиостанции или плеера? дело в том что это цитата из оригинальной записи. У автора эти виджеты были установлены до смены дизайна. У меня этих кодов нет. Но таким образом можно закрепить что угодно, если это читается и воспринимается дайрами.
3. emercy, можно.

2018-04-11 в 10:34 

emercy
Кареглазый Демон, поняла, спасибо))

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?
главная