• Страница 1 из 1
  • 1
Модератор форума: k©קaso√®  
Форум - gamer-mods » Раздел для локализаторов модов » Руководства и туториалы для локализации модов » Спойлеры в массы HTML и CSS (Если каждый будет использовать это - мир станет лучше.)
Спойлеры в массы HTML и CSS
07.10.2021 в 09:47:03, сообщение 1
Offline
Модмейкеры
Ученик
26 постов
Crazis пишет туториалы

И так, до меня ąnizórđą пыталась внести (с разбега) html в массы,
теперь я слегка
 дополню ее тему. Сегодня вы научитесь как делать,
простой, красивый, а главное удобный
 спойлер.

Можете просто копировать код прямо с моими
комментариями и вставлять себе на страницу.

Он сказал "Поехали!"

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

не забывайте закрывать теги (выделены тем же цветом).

Вы можете удалить не нужные для вас параметры или добавить свои.


<style>
details summary
{
width: -webkit-fit-content;  /* ставим ограничения рамки спойлера */
width: -moz-fit-content;
width: fit-content;
  /* раскрываем при щелчке по спойлеру, а не по всей строке
(на некоторых браузерах может вызывать отключение рамки) */
outline-style: none;  /* убираем рамку спойлера */
user-select: none;  /* убираем выделение названия спойлера */
border-bottom: 1px dotted; /* подчеркиваем спойлер пунктиром */
transition: color .3s;  /* плавная смена цвета (3s - это время, скорость) */
cursor: pointer;  /* изменяем курсор при наведении (как для кнопки - пионер) */
}
details summary:hover, /* условие, если курсор лежит на спойлере */
details [open]summary  /* условие, если спойлер открыт */
{
color: FireBrick; /* ставим цвет спойлера при его условиях (FireBrick - это название цвета) */
/* закрываем все это дело */
</style>


HTML код:
Далее делаем все то, что в туторе от  ąnizórđą


<details>
<summary>Название спойлера</summary>
Содержимое спойлера (все, что угодно).
</details>

Пример  использования  можно посмотреть на этой странице.
07.10.2021 в 10:19:05, сообщение 2
Offline
Модмейкеры
Ученик
26 постов
Я очень надеюсь, что вы будете
использовать этот спойлер в оформлениях
своих страницах.

Примичание:
Весь код нужно вставлять на панели HTML

Надеюсь вы будете вспоминать меня добрым словом. Удачи.  
07.10.2021 в 12:57:24, сообщение 3
Offline
Модмейкеры
Ученик
26 постов
У языков нет четкого оформления, код можно записать просто компактной строкой.
<style>details summary {width: -webkit-fit-content;  width: -moz-fit-content; width: fit-content; user-select: none; transition: color .3s; cursor: pointer;details summary:hover, details [open]summary  {color: FireBrick; }</style>


Форум - gamer-mods » Раздел для локализаторов модов » Руководства и туториалы для локализации модов » Спойлеры в массы HTML и CSS (Если каждый будет использовать это - мир станет лучше.)
  • Страница 1 из 1
  • 1
Поиск:
Gamer-mods.ru © 2012 - 2022. Все права защищены. Копирование материалов без указанной активной ссылки на данный сайт запрещено.