Песочница — различия между версиями

Материал из IOC
Перейти к: навигация, поиск
(Содержимое страницы заменено на «Спойлеры https://www.mediawiki.org/wiki/Extension:JSpoiler»)
 
(не показано 19 промежуточных версий этого же участника)
Строка 1: Строка 1:
−
Спойлеры
+
 
 +
[[странная страница]]
 +
<big>'''Заливка градиентом'''</big>
 +
 
 +
<div style="{{Градиент|left|#ffdddd, #ddddff}}">Как залить абзац градиентом. копируем код (линейный градиент, цвета можно выбрать любые): <nowiki> <div style="{{Градиент|left|#ffdddd, #ddddff}}"> Ваш текст </div> </nowiki></div>
 +
<big>'''Пины'''</big>
 +
 
 +
Хотите создать красивый список? Вставить "галочки" или большие буквы и символы? Не знаете как? Вам сюда!:)
 +
 
 +
1. Разноцветные пины (цветные кнопки)
 +
<br>вставляете следующий код:
 +
 
 +
<nowiki><div style="float:left>[[Файл:Pin.png|30px]] Здесь пишите ту информацию, которую хотите структурировать</div></nowiki>
 +
 
 +
Вместо синей кнопки можно вставить любую другую из списка:
 +
<br>[[Файл:Pin red.png|30px]] - имя картинки <nowiki>Pin_red.png</nowiki>
 +
<br>[[Файл:Pin.png|30px]] - имя картинки <nowiki>Pin.png</nowiki>
 +
<br>[[Файл:Pink_pin.png|30px]] - имя картинки <nowiki>Pink_pin.png</nowiki>
 +
<br>[[Файл:Green_pin.png|30px]] - имя картинки <nowiki>Green_pin.png</nowiki>
 +
<br>[[Файл:Yellow_pin.png|30px]] - имя картинки <nowiki>Yellow_pin.png</nowiki>
 +
 
 +
 
 +
2. Красивые "галочки"
 +
<br>Механизм использования тот же, что и с пинами.
 +
<br>[[Файл:Green_mark.png|30px]] - имя картинки<nowiki>Green_mark.png</nowiki>
 +
 
 +
3. Литеры (большие буквы и знаки)
 +
 
 +
<div style="float: left; text-transform:uppercase; line-height:80%; padding:0px 8px 4px 0px; display: block; color:#800000; font-size: 70px; font-family: Georgia, Times New Roman, Trebuchet MS; "><strong>1</strong></div><br>Вставляете вот такой вот текст:<nowiki><div style="float: left; text-transform:uppercase; line-height:80%; padding:0px 8px 4px 0px; display: block; color:#800000; font-size: 70px; font-family: Georgia, Times New Roman, Trebuchet MS; "><strong>1</strong></div></nowiki>
 +
 
 +
вместо color:#800000 пишите код любого цвета который нравится (цвета можно взять [https://ru.wikipedia.org/wiki/Википедия:Таблица_цветов тут])
 +
 
 +
вместо единички "1" пишите любую букву или символ (например: !) и наслаждаетесь результатом :)
 +
----
 +
 
 +
<big>'''Спойлеры'''</big>
 +
 
 +
''1. Он открыт, но текст можно закрыть''
 +
 
 +
 
 +
<div class="mw-collapsible">
 +
 
 +
Текст, который можно скрыть.
 +
</div>
 +
 
 +
 
 +
''2. Можно увидеть что спрятано''
 +
 
 +
 
 +
<spoiler text="таинственные тайны"> а тут пусто) неожиданно) </spoiler>
 +
 
 +
 
 +
''3. Хитрая табличка''
 +
 
 +
 
 +
{| class="mw-collapsible mw-collapsed wikitable"
 +
! Заголовок || всегда будет виден
 +
|-
 +
| Содержимое || всегда
 +
|-
 +
| будет || скрыто
 +
|}
 +
 
 +
 
 +
''4. Если охота чтоб спойлер в рамочке и во всю ширину окна''
 +
 
 +
 
 +
<div class="mw-collapsible mw-collapsed"><div class="mw-collapsible-toggle toccolours" style="float:none;text-align:center">'''Показать исходный текст'''</div>
 +
<div class="mw-collapsible-content">
 +
<source lang="html4strict" enclose="div">
 +
Здесь можно писать все, что душе угодно. Правда мелким шрифтом, но я с этим борюсь.
 +
</source></div></div>
 +
 
 +
 
 +
 
 +
Чуток взято отсюда:
 
https://www.mediawiki.org/wiki/Extension:JSpoiler
 
https://www.mediawiki.org/wiki/Extension:JSpoiler
 +
----
 +
 +
<big>'''Галереи'''</big>
 +
 +
Что делать когда нужно вставить много красивых картинок с подписями?
 +
 +
Можно сделать так)
 +
 +
 +
<gallery mode="packed-hover">
 +
Image:Yum sch30 66.jpg|''Подпись картинки''
 +
Image:Yum sch30 66.jpg|''[[Подпись со ссылкой]]''
 +
Image:Yum sch30 66.jpg|''Подпись картинки''
 +
Image:Yum sch30 66.jpg|''Подпись картинки''
 +
Image:Yum sch30 67.jpg|''Подпись картинки''
 +
Image:Yum sch30 67.jpg|''Подпись картинки''
 +
Image:Yum sch30 67.jpg|''Подпись картинки''
 +
Image:Yum sch30 67.jpg|''Подпись картинки''
 +
Image:Yum sch30 67.jpg|''Подпись картинки''
 +
</gallery>

Текущая версия на 16:14, 8 марта 2019

странная страница Заливка градиентом

Как залить абзац градиентом. копируем код (линейный градиент, цвета можно выбрать любые): <div style="{{Градиент|left|#ffdddd, #ddddff}}"> Ваш текст </div>

Пины

Хотите создать красивый список? Вставить "галочки" или большие буквы и символы? Не знаете как? Вам сюда!:)

1. Разноцветные пины (цветные кнопки)
вставляете следующий код:

<div style="float:left>[[Файл:Pin.png|30px]] Здесь пишите ту информацию, которую хотите структурировать</div>

Вместо синей кнопки можно вставить любую другую из списка:
Pin red.png - имя картинки Pin_red.png
Pin.png - имя картинки Pin.png
Pink pin.png - имя картинки Pink_pin.png
Green pin.png - имя картинки Green_pin.png
Yellow pin.png - имя картинки Yellow_pin.png


2. Красивые "галочки"
Механизм использования тот же, что и с пинами.
Green mark.png - имя картинкиGreen_mark.png

3. Литеры (большие буквы и знаки)

1

Вставляете вот такой вот текст:<div style="float: left; text-transform:uppercase; line-height:80%; padding:0px 8px 4px 0px; display: block; color:#800000; font-size: 70px; font-family: Georgia, Times New Roman, Trebuchet MS; "><strong>1</strong></div>

вместо color:#800000 пишите код любого цвета который нравится (цвета можно взять тут)

вместо единички "1" пишите любую букву или символ (например: !) и наслаждаетесь результатом :)

Спойлеры

1. Он открыт, но текст можно закрыть


Текст, который можно скрыть.


2. Можно увидеть что спрятано


таинственные тайны


3. Хитрая табличка


Заголовок всегда будет виден
Содержимое всегда
будет скрыто


4. Если охота чтоб спойлер в рамочке и во всю ширину окна


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


Чуток взято отсюда: https://www.mediawiki.org/wiki/Extension:JSpoiler

Галереи

Что делать когда нужно вставить много красивых картинок с подписями?

Можно сделать так)


  • Подпись картинки

  • Подпись картинки

  • Подпись картинки

  • Подпись картинки

  • Подпись картинки

  • Подпись картинки

  • Подпись картинки

  • Подпись картинки

Источник — «http://iocryb.ru:1122/mediawiki/index.php?title=Песочница&oldid=21596»