html

Подписчиков: 4     Сообщений: 82     Рейтинг постов: 787.9

dev реактор html 

Фитчи для ДжойРеактора разной степени реализованности


-=(1)=-
Центрирование Элементов

Когда-то давно...
мне хватало возможности
размещать элементы по центру и я

  Нашел кажется не задокументированную функцию(здесь),в общем можно устанавливать с какого края будут находится элементы
такие как: текст , картинки и даже встраиваемые элементы как Ютуб и наверное Коуб

  Как сделать уже сейчас html коды:

текст с слева

<p align=center>текст по центру</p>

<p align=right>текст с права</p>


  Для Картинок и текста:
<div align="center">
картинка из https://m.joyreactor.cc/post/5715080 но в цвете,
dev,реактор,html

по центру, а для правого края замените "center" на "right"
</div>

  Известные проблемы:если скрестить центрирование и спойлер то спойлер может сломается...
  Кому то захочется написать несколько элементов слева и справа в одной строке что сейчас возможно если и получится то наверное только с таблицей но я не проверял так как таблицы у меня глючат{не очень получаются)
  P.s. Если не внедрять тег center или не добавлять специальные кнопки то было бы хорошо хотя бы не ломать эту фичу


-=(2)=-
Картинка не больше высоты экрана(окна)
  Листал давние посты... раньше картинки были меньше а посты были более лаконичными...
  А что если заделать опцию вставки картинок которые бы сжимались как сейчас но на уровне css стиля отображались бы на высоту экрана(окна) как нынешние гифки... а увеличивались так же как нынешние картинки

  Это кажется можно* сделать через добавление css правила для нужного элемента
*сейчас только через юсэр стиль можно кажется примерно так:
/* css для картинки но без юсэр стиль обвёртки*/
max-height: 90vh;
height: auto !important;
max-width: 100%;
width: auto !important;

  ^но что если добавить на реактор отдельную опцию для подобной вставки в виде кнопки в редакторе или хотя бы специального html параметра

  ...Мне кажется картинки было бы удобней смотреть/воспринимать когда их можно увидеть полностью не прокручивая...
  А ещё эта опция наверное была бы совместима с олд реактором так как если браузер не поддерживает этот css то движок реактора просто отобразит всё как раньше (или нет =_=? )

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

  P.s1) сделать ещё и для пол экрана(окна), и выбор высоты всяких плееров
  P.s2) вопрос уже поднимался в комментариях кто то не помню где спрашивали что бы картинка была не выше 500 пикселей , в общем спасибо всем участвующим за идею и ну типа это кому то надо...


-=(3)=-
Специальные экспериментальные элементы
  А что если? сделать специальные элементы для тестирования фитч
  К примеру:
* строчный спойлер в котором текст имел лбы цвет фона такой же как и цвет текста до того как по нему кликнут
* картинки на высоту не более экрана(окна)
* какой нибудь коллаж картинок который бы был как существующие таблицы но с ограниченным функционалом и возможно дополненным стилем
* всплывающий текст чтоб когда наводишь курсор на текст а там светился текст как в описании медальки
* чёнить...

  Сделать это в меню редакторов в отдельный раздел с предупреждением "Экспериментальное/временное", ну или хотя бы в виде html кода (в)который можно добавить при постинге вручную, что понравится из ново введений оставить, единственное что для таких экспериментов стоит учитывать чтобы они везде работали и не ломались...


-=(4)=-
Кнопка развернуть только если разворот больше одной строки...
  Ну в посте снизу кнопка развернуть а там при нажатии всего одна строка или маленький кусочек картинки
  Может добавить опцию сравнения высоты поста с высотой до разворота если там меньше 255 разница пикселей к примеру, то кнопку убираем и разворачиваем сразу...

  Примечания:
* можно сделать через js сравнивая высоту элементов
* кто то возможно "мелкий разворот" использует как фитчу, поэтому возможно сделать такио(такие) нововведения отключаемым на уровне редактора поста...
* ну и чтоб с обратной совместимостью


-=(5)=-
Пользовательское "О себе" и статус
  В поле "О себе" в профиле пользователя добавить включаемую опцию/возможность писать несколько текстов разделённых спец символом* которые отображались бы рандомно(случайно) или по каким то датам если таковые указаны
^*" разделённых спец символом" : ну как сейчас теги через запятую пишут

  Ну и возможно добавить пользовательский статус как в виде текста ну или целую шапку как в оформлении фандомов и тегов...

***


~_^ Удачи!
Развернуть

it-юмор geek лестница css html 

Просто об устройстве фронтенда

it-юмор,geek,Прикольные гаджеты. Научный, инженерный и айтишный юмор,лестница,css,html
Развернуть

javascript языки программирования Легенды Джоя радуга песочница html css console сплит цветные 

Что это?:странный пост с js кодом чтобы писать в консоль браузера радугой.

Вчора написав Сплиту
"
>Привет Сплит!

>Я загуглил как стилизировать текст в консоле браузера "style console.log"=>:
https://stackoverflow.com/questions/7505623/colors-in-javascript-console
И попробовал написать текст радугой, сначала собирался сделать пост ≈"Как написать генератор такого текста" но пока передумал...
Так как я не знаю когда это опубликую или использую,
вот тебе функция для вывода в консоли браузера "Привет Сплит!" радугой
*функция а не команда штоб без глобальных переменых.

(function(R){R="font-size:16px;font-weight:bold;color:";console.log("%cП"+"%cр"+"%cи"+"%cв"+"%cе"+"%cт"+"%c "+"%cС"+"%cп"+"%cл"+"%cи"+"%cт"+"%c!",R+"hsl(0,100%,50%)",R+"hsl(30,100%,50%)",R+"hsl(60,100%,50%)",R+"hsl(90,100%,50%)",R+"hsl(120,100%,50%)",R+"hsl(150,100%,50%)",R+"hsl(180,100%,50%)",R+"hsl(210,100%,50%)",R+"hsl(240,100%,50%)",R+"hsl(270,100%,50%)",R+"hsl(300,100%,50%)",R+"hsl(330,100%,50%)",R+"hsl(360,100%,50%)")})()
"
И сразу подумал чё не мог генератор сразу скинуть? мелочность какаято, попробовал написать
вчера но чёт не получилось; ну а сегодня получилось!, в общем вот пост скопировав функцию из которого...
ВЫ!!! СМОЖЕТЕ!!!писать радугой!!! в консоль браузера!!!
^или нет =_=?  o_=  .-.

Код:
А нет сначала Лицензия :
не использовать назло или для зла,
код придумал и написал IONE ,
код принимается "как есть" автор не несёт ответственности,
если всё да пользуйтесь этим кодом.
<script>
(function(text,BGColor,textArray,f,css1){
css1='font-size:16px;font-weight:900;background-color:'+BGColor+';padding:2px 0.5px;text-shadow:0 0 3px #777;color:';
textArray=[''];
for(f=0;f<text.length;f++)
textArray[0]+='%c'+text[f];
for(f=0;f<text.length;f++)
textArray[f+1]=css1+'hsl('+
Math.round(360/(text.length-1)*f)+
',100%,50%)';
console.log();
console.log.apply('',textArray);
console.log();
})("Сплите Привете!")//"text","background color"
</script>

Сп' е ривете!,javascript,языки программирования,Легенды Джоя,радуга,песочница,html,css,console,сплит,цветные

Инструкция: можете сохранить(с расширением .htm или .html) и запустить как html файл через через веб браузер (ответ в консоле)
также можете запустить через:

*сохранив через old.reactor.cc/post/4757014 (new word.htm)
*или запустив через: https://jsfiddle.net/

Или скопировав саму функцию, опционально добавив ей имя и изменив выводимый текст...


Вторая серия...
А потом вместо приготовления еды подумал чё так сложно? просто фон градиентом нельзя было поставить...
Ответ: это работает не везде и у меня пока тоже не работает.
^Но из этого получилась html/css версия которою вы можете запускать как описано выше; Но без "new word.htm" так как он принимает пока только латиницу...

HTML/CSS версия
<center contenteditable><span style="font-size:32px;
background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f);
background-clip: text;
-webkit-text-fill-color:transparent;
filter:drop-shadow(0px 0px 3px #777);
font-weight:bold"
>"Замени этот текст на свой"<span></center>


"За о :т на свой",javascript,языки программирования,Легенды Джоя,радуга,песочница,html,css,console,сплит,цветные


Титры HTML/CSS версии
|||
text background gradient css
https://www.google.com/search?q=text+background+gradient+css
https://cssgradient.io/blog/css-gradient-text/
and
https://css-tricks.com/snippets/css/gradient-text/#comment-1600038
|||
text background gradient css shadow
https://www.google.com/search?q=text+background+gradient+css+shadow
https://stackoverflow.com/a/49706568
|||
И Я! ^-^


А то меня постоянно спрашивают: чево только в dev пишешь..


~_^
Развернуть

PervisTime Комиксы перевел сам html браузер 

РИДбО
• •
/
сто? РБС1-
МГН0Р6НН0
С ГОРЯЧИМИ МАМОЧКАМИ
1 ЖМИ СЮДА 1
I
\
преступление против
5041 КОММЕНТАРИЙ	'
оречестрд
МИ/1Ь1И КОТИК МУР/1Ь1ЧИТ
189 КОММЕНТАРИЕВ
КАК ПРИГОТОВИТЬ ЯЙЦА
1015 КОММЕНТАРИЕВ
ридео
преступление протир челоречестрд
5041 КОММЕНТАРИЙ
милый КОТИК МУРЛЫЧИТ

Развернуть

Отличный комментарий!

Google называет это "Layout Shift" и ругается, когда сдвиг элементов при загрузке превышает 10% экрана.
И правильно ругается, заебали размеры элементов не указывать.
ValD ValD 11.04.202213:59 ссылка
+36.4

без перевода html geek американцы 

, in 8 Americans have worked at McDonald’s.
l in 10 Americans think HTML is a sexually transmitted disease.,без перевода,html,geek,Прикольные гаджеты. Научный, инженерный и  айтишный юмор,американцы,html,geek
Развернуть

it-юмор geek html 

it-юмор,geek,Прикольные гаджеты. Научный, инженерный и  айтишный юмор,html
Развернуть

картинка с текстом программирование geek html коронавирус 

90% RISK
OF TRANSMISSION
30% RISK
OF TRANSMISSION
5% RISK
OF TRANSMISSION
1
%
1.5% RISK
OF TRANSMISSION
"I program in HTML"
0% RISK
OF TRANSMISSION,картинка с текстом,программирование,geek,Прикольные гаджеты. Научный, инженерный и  айтишный юмор,html,коронавирус
Развернуть

it-юмор geek html песочница социальная дистанция 

СОЦИАЛЬНОЕ
ДИСТАНЦИРОВАНИЕ
COVIO-1B
1,5 м
Люди, думающие что HTML язык программирования
м,it-юмор,geek,Прикольные гаджеты. Научный, инженерный и  айтишный юмор,html,песочница,социальная дистанция
Развернуть

Комиксы Beckscomics html собеседование без перевода 

I noticed your Resume says
MASTERY OF HTML." TELL ME MORE.
1« YEARS A&o...
4	 NEOPETS	Xr
Phy	ЕШЯ
	ч АРРИ III M?l4 •V HPPL4
	
	POLL
	0 0
	STATS
WELCOME TO my ЕЛЖ.0!
TJ
(ivs PERFECT///)
'— 1 / -	— У
0 BECKSCOMICS,Смешные комиксы,веб-комиксы с юмором и их


Развернуть

Отличный комментарий!

Для того времени - отличный сайт.
rok32 rok32 08.12.201910:56 ссылка
+47.4

html теги текст story форматирование текста гайд песочница шрифт шрифты 

Форматирование текста на реакторе

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


Начнём с того, что все, кто читали "О проекте" знают как делать свой текст курсивным, жирным, зачёркнутым, подчёркнутым или влепить на него ссылку.
Для тех, кто не читали - выкладываю сюда тоже:


жирный текст = <b>жирный текст</b>
курсив = <i>курсив</i>
подчёркнутый текст = <u>подчёркнутый текст</u>
зачёркнутый текст = <strike>зачёркнутый текст</strike>
сайт хорошего настроения = <a href="http://joyreactor.cc">сайт хорошего настроения</a>


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


Как изменять шрифт текста:

Несомненно, шрифт для своего сообщения надо выбирать с умом. Главное тут -  не переусердствовать.

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


Чтобы поменять какому-либо отрезку текста шрифт, надо написать перед ним <font face=", после кавычек написать название шрифта, а затем открыть тег этими символами: ">

Должно получится что-то вроде <font face="Arial">. После этого можно писать любой текст и он будет принимать вид того шрифта, который вы указали. После написания нужного вам текста, необходимо закрыть тег такой штучкой: </font>


В итоге у вас должно получится что-то вроде этого: <font face="Comic Sans MS">Ты пидор!</font>


Нагляднее: 

нет комментариев
Написать комментарий
<foot faœ-'Comic Sans М5'>Ты пидор! </font>
НАПИСАТЬ
Картинка: из файла из URL,html,теги,текст,Истории,форматирование текста,гайд,песочница,шрифт,шрифты


Когда вы отправите сообщение, текст примет написанный вами облик и будет выглядеть так: Ты пидор!

Поздравляю, вы придали своему тексту чуточку уникальности и ваше сообщение выделяется из сотен других :)



Как изменять размер текста:

Тут всё довольно легко. Максимальный размер - 7. Чтобы прибавить веса вашему и так уникальному тексту, вам надо к <font face="Comic Sans MS" добавить size="размер от 1 до 7"

Получается что-то вроде <font face="Comic Sans MS" size="5">Ты пидор!</font>

А выглядеть это будет вот так: Ты пидор!
Подставив максимальный, седьмой размер, вы можете усилить эмоциональный эффект от данного словосочетания в разы.
И, поздравляю вас, вы добавили ещё пару крупиц уникальности к вашему и без того прекрасному тексту :)

Как изменять цвет текста:

Самый эффективный способ сделать так, чтоб ваш текст выделялся на фоне других. Поэтому я поставил этот заголовок в конец.
Для начала, вам надо задать себе вопрос "Не много ли я выделяю текста?", когда делаете его цветным. Если ваша цель - просто выделить мысль, то знайте меру и не выделяйте слишком много слов в тексте. Если ваша цель - знатно протроллить всех читающих ваше сообщение, то можете открывать тег перед началом написания сообщения, а закрывать его только когда будете отправлять его собеседнику.
Перейдём к делу. Чтобы добавить цвет к почти готовому коду выше, вам нужны эти волшебные буковки: color="hex код цвета".
HEX код можно взять с этого сайта. Тыкаете на чёрненький квадратик сверху и из таблички цветов выбираете тот, который вам больше приглянулся, копируете его номер (например, #ff0000 - красный цвет) и подставляете в кавычки. Необязательно писать цвет с # в коде, поэтому color="#ff0000" и color="ff0000" будут работать одинаково. Также, писать буквы в HEX-коде цвета капсом или нет - не важно. "FF0000" будет работать также как и примеры выше.
Допустим, вы выбрали красный (ff0000). Тогда вы делаете так: color="ff0000", а потом вот так: <font face="Comic Sans MS" size="5" color="ff0000">Ты пидор!</font>
Итоговый вариант всех наших манипуляций будет таким: Ты пидор!
Поздравляю, вы прошли полный курс форматирования текста :)

Подводим итоги:

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

Отличный комментарий!

СПЛИТ ХУЕСОС
ZineEasy ZineEasy 28.04.201920:34 ссылка
+77.8
В этом разделе мы собираем самые смешные приколы (комиксы и картинки) по теме html (+82 картинки, рейтинг 787.9 - html)