css

Подписчиков:
6
Постов:
89

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

,it-юмор,geek,Прикольные гаджеты. Научный, инженерный и  айтишный юмор,лестница,css,html
World's Best
■ : is»«
ä#i,it-юмор,geek,Прикольные гаджеты. Научный, инженерный и  айтишный юмор,css,кубок

Иногда и в Valve не справляются с CSS

Что это?:странный пост с 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 пишешь..


~_^

Когда не разобрался с CSS

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

align-items: center;

APTAIN NOW,it юмор,css,без перевода

Странности эффекта BLUR в браузерах

Захотелось мне сделать а всплывающего лайтбокса эффект матового стекла.
Первым делом гугл выдал мне ссылку на сайт: https://developer.mozilla.org
ну захожу беру код оттуда. Все просто : строка CSS {backdrop-filter: blur(8px);} и всё :)
но листаю ниже и :
как так?
ведь код с мозиллы :
0 А https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter,firefox,браузеры,chrome,программирование,geek,Прикольные гаджеты. Научный, инженерный и  айтишный юмор,приколы для программистов,css,html
возможно у меня FireFox старый? :
О Мо/Ла Ричг1ох
Р1гей>х Browser
'У Уст^ювп^в последняя версия НеАох
88.0.1 (6+€ит***) Что нового
Саааадйу&а
^тср^т ОСТАВАЛСЯ ОТКРЫТЬ*. публична и доступ*»* для осе» И КАЖДОГО.
Хотите попу+>? Слегайте по*ертвос<з*«е или присоединяйтесь»
ПРДМ	ПМЫИ«!ОТ1
ПИКНМЯММТЯИДМ
* тпгяш Р*ч*о* ■•.-я^тс*
да нет, тут все норм
Firefox Browser
-У Установлена последняя версия Firefox 88.0.1 (64-6итный) Что нового,firefox,браузеры,chrome,программирование,geek,Прикольные гаджеты. Научный, инженерный и  айтишный юмор,приколы для программистов,css,html
ЧТО НЕ ТАК ТО??

Lords of the Streets продолжение

Обещанный пост с гифками того, как на деле выглядит проект с переведенными в интерактивный формат промтами Инктобера. У меня спрашивали недавно, как сделано - ребят, честно я не сильно секу в коде (совсем не), тех-часть делал мой бойфренд в CSS. Что сделала я (может из этого вам станет понятно, как всё устроено): я "резала" свои арты на слои в ProCreate, параллельно дорисовывая необходимые части (к примеру, у меня есть только кусок бедра кххм в разрезе, и этот "разрез" надо заполнить правдоподобным фоном), и потом бойфренд собирал этого Франкенштейна в подобие pop-up открытки, добавляя все эти фишки с реагированием на тачпад и характером движения.
Кто не видел предыдущий пост и интересуется - тут можно посмотреть все остальные промты:
Еще раз скажу, что мы делали это просто по приколу, без какого-то конкретного коммерческого интереса, и даже без понимания для чего бы это еще можно использовать (но кстати подумали потом, что таки можно, к примеру на сайтах вместо обычных картинок или галерей рядом с каким-нибудь разделом). Результатом довольны, и будем рады фидбэку)))
Скрыто постов: 2
Здесь мы собираем самые интересные картинки, арты, комиксы, мемасики по теме css (+89 постов - css)