Осваиваем ярмарку

[Котики Инсайда]

Тред для обмена опытом и идеями (а также кодами) верстальщиков на АО3

1. туториал по всплывашкам и сноскам, на АОЗ (англ)
2. Как добавить ссылку, используя разметку HTML? (англ)
3. Как сделать море (рус)
4. Варианты стандартной верстки подложка/тени/рамки (англ)
5. Макет визитки анона с котиками
6. Пример всплывашки на css (рус)
7. Моря с ограничением (рус)
8. Рабочий пример с левым и правым углами (рус)
9. Теги, разрешенные на АОЗ (англ)
10. css свойства, разрешенные на АОЗ (англ)
11. Минигайд анона с котиками
12. сайты, с которых АОЗ поддерживает вставку медиа
13. Как сделать изображения подходящими для мобильных браузеров (англ)

запись создана: 03.03.2020 в 22:04

@темы: Верстка, АО3, Все хорошо

Comments

[Гость]

Пиздец, надо будет завести черный список свистопердельщиков.

два чая тебе

думаю, к концу Фб надо будет провести опрос на инсайде. Мне интересно сколько читателей охуеют скажут, что принудительно выключали оформление команд, и сколько отключили бы, если бы знали как

[Гость]

Анон(ы), тут же от команды зависит. Кто-то аккуратен в этом кто-то нет, чего вы тут разорались

[Гость]

Да это аотрипперным сектантам прищемило, что на поверку их аоз, рекламой которого они засрали все треды, оказался хуетой

[Гость]

Читаю я это все и понимаю, что первым делом буду жать на кнопку нах чужой стиль. Спасибо господи, что на ао3 есть такая фича.

Мимокрок

+1 мимокрок.

[Гость]

Слабаки! Дайте шанс людям прежде чем засирать

[Гость]

Дайте шанс людям

Бог подаст (с)

[Гость]

А что вообще любители приосаниться в плане верстки забыли в треде про финтифлюшки 🤔 это буквально тема не для вас. Это как прийти в художественный магазин и орать на каждого: НАХУЯ ТЫ РИСУЕШЬ??? КРАСКАМИ, ТЫ ЧО ДЕБИЛ? КАКОЕ МАСЛО, ТЫ СЕБЯ ВИДЕЛ? КАК ХОРОШО ЧТО МОЖНО НЕ ХОДИТЬ НА ВЫСТАВКИ! Успокойтесь и не мешайте людям творить, если ори хотят, господи...

[Гость]

*ори = они

[Гость]

Такое впечатление, что анон с триппером жрёт говно кастрюлями, а потом демонстративно блюёт в каждом треде.

[Гость]

Он больной просто. Это диагноз.

[Гость]

А что вообще любители приосаниться в плане верстки забыли в треде про финтифлюшки

я в этом треде за элементарной версткой для удобства: резинка для картинок, каты, якори/всплывашки для примечаний, на новой площадке даже это нужно заново учить
мне уже можно дальше приосаниваться или надо уходить из треда?

[Гость]

Не довелось увидеть поломанную выкладку на дайри. Но верю на слово.

[Гость]

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

[Гость]

опять мирный тред превратили в хзч.

зато весело стало

[Гость]

мне уже можно дальше приосаниваться или надо уходить из треда?
Других не затыкаешь если, то сиди. Если собираешься приосаниваться и плясать вокруг как выше - не пугай творцов и иди с миром))
Резинка стандартная, каты прешь из дайри или через даундроп, якоря на 1 странице, всплывашки берёшь из дайри. Всё, ты знаешь всё, что хотел :'DD

[Гость]

Такое впечатление, что анон с триппером жрёт говно кастрюлями, а потом демонстративно блюёт в каждом треде.

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

[Гость]

каты прешь из дайри или через даундроп

но даундроп это скорее всплывашки, не?
(и выглядят просто охуительно, если все правда работает, то это безумно круто, я убежал экспериментировать)

[Гость]

Ну вот, народ распробовал
Зачем ты ешь говно, дуро?

[Гость]

Давайте разрешим анону с копролалией не ходить на АО3.

[Гость]

Зачем ты ешь говно, дуро?

Так вы ж его конфеткой рекламировали, да как настойчиво! Спасения от вас не было. Кто ж знал что оно говно пока не попробовал.
Теперь-то понятно, почему вы орать о невъебезности аоза орали, а примеров не показывали

[Гость]

Давайте разрешим анону с копролалией не ходить на АО3

+1
Персонально анон с аотриппером, который не способен писать сообщения, ничего не коверкая и не выплясывая цыганочку, можно на ФБ не ходить. На самом деле, без такой ебанины на ФБ станет куда лучше дышаться.
И я даже не люблю ао3. И не уверен еще, что хочу куда-то идти.
Но этот, с аотриппером, заебал даже меня.

[Гость]

Аноны, вряд ли это конечно будет кому-то полезно, но вдруг. Я за все время так и не увидела какой-то, относительно целый, макет визитки, поэтому попыталась его сделать сама.Там все самое простое (но это пока все что я смогла сообразить за пару дней почитав про css)... ну и мои скетчи, для имитации какого-то оформления и взаимодействия текста с картинками. Некоторые проблемы у меня так и не вышло решить (например как нормально подогнать картинки под телефон, а то они ужс как уменьшились) поэтому кидаю это сюда, на случай если кто еще захочет подсказать) Ну а вообще всем добра и не ругайтесь, прорвемся!

archiveofourown.org/works/22999477

[Гость]

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

[Гость]

Вставляет ДВА ебучих лишних пустых абзаца!

используйте псевдокласс :empty, чтобы скрыть пустые p, например:

p:empty {
  display: none;
}

[Гость]

Пример всплывашки на css:

код

html

<div class="tooltip">
  <p>Всплывашка с текстом</p>
  <div class="tooltip__body">
    <p class="tooltip__title">Заголовок</p>
    <p class="tooltip__content">Текст всплывашки</p>
  </div>
</div>

css

p:empty {
  display: none; // скрываем пустые абзацы
}

.userstuff {
  min-height: 500px; // необязательный пункт: если контента мало, то всплывашка обрезается, так как у текстовой области overflow-y: hidden;
}

.tooltip {
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.tooltip__title {
  margin: 0 0 1.286em;
}

.tooltip__body {
  border: 1px solid #ccc;
  cursor: default;
  display: none;
  left: 0;
  margin-top: -1.286em;
  padding: 1rem;
  position: absolute;
  top: 100%;
  width: 200px;
  z-index: 1;
}

.tooltip:hover .tooltip__body {
  display: block;
}

.tooltip__body p:last-child{
  margin-bottom: 0;
}

[Гость]

Некоторые проблемы у меня так и не вышло решить (например как нормально подогнать картинки под телефон, а то они ужс как уменьшились)

Да (
Очень узко, в два раза уже и без того узкого экрана тапка

[Гость]

див
ссылка href="#море" читать дальше /ссылка

див id="море"
текст, который нужно развернуть

/див
/див

цсс:
#море {display: none}
#море:target {display: block}

так не получится, потому что ao3 обрезает id у div.

Мне стало интересно, можно ли как-то это обойти. В общем, наваял некое подобие морей с ограничением: может быть открыто только одно. В приниципе, я думаю можно сделать аналог «открыть все моря». Наверное, я только прикинул, не пробовал.

Сделал через разрешенные на ao3 якоря. Вместо id используется name, которое преобразуется в id (попробовал с div — не проканало, попробовал брать в a блок целиком — не проканало). Использовал список описаний, потому что в этом случае санитайзер не вставляет p вокруг a.

код

html

<dl class="more"><dt><a href="#more1">Lorem Ipsum</a></dt><dd><a class="more__target" name="more1"></a><div class="more__inner"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></dd>
<dt><a href="#more2">1914 translation by H. Rackham.</a></dt><dd><a class="more__target" name="more2"></a><div class="more__inner"><p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p><p>Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?.</p></div></dd></dl>

css

.more__inner {
  display: none;
}

.more__target:target + .more__inner {
  display: block;
}

Я не знаю, зачем вам моря на ao3, я чисто ради интереса попробовал.

[Гость]

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

но даундроп это скорее всплывашки, не?

Ну вот механизм даундропа скорее моря (открывается по клику, не пропадает при разном наведении), но может быть открыт только один. Опять же, можно похимичить, может он можно чтоб и не один был

[Гость]

03:16, если отключить авторский стиль, то пидарасит шапку.

[Гость]

Ну вот механизм даундропа скорее моря (открывается по клику, не пропадает при разном наведении), но может быть открыт только один. Опять же, можно похимичить, может он можно чтоб и не один был

«Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера». Идентификатор должен быть один на всю страницу. В лучше случае браузер будет использовать только первый, в худшем полностью проигнорирует.