finish : step 2 OKLCH power !!! https://codepen.io/editor/mous_tik/pen/019d3af7-abd0-7800-86d2-06fcc579a766

#OKLCH #webDev #frontend #theme #graphicdesign #css

My biggest #Mastodon pet peeve so far is the fact that in the "Advanced Web Interface" a good 30-40% of my screen is simply left unused and the fix would be one line of #CSS: Putting `flex-grow: 1` on the `column` class.

And yet despite numerous issues raised about this since like 2018 (see https://github.com/mastodon/mastodon/issues/8632 for the list) it was only ever met with silence or the issue being closed with an irrelevant PR being linked.

I know how to use Tampermonkey or inject CSS. It shouldn't be necessary.

#Firefox #CSS

When unhiding the vertical tab bar, it expands to show titles; I don't want that. So…

#sidebar-main { max-width: 50px !important }

#tabbrowser-tabs[orient="vertical"]
{

.tab-text.tab-label { display: none !important }

#tabs-newtab-button { max-width: 0px !important; position:absolute; right:4px }

.tabbrowser-tab {.tab-close-button { position: absolute; left: -4px; top: -4px } }

}

April 5 comiCSS game: HTML Mini-Crossword
https://comicss.art/games/19/

Today's game is an HTML-themed HTML-shaped crossword. And it's easy(-ish). Can you guess all 15 words?

#html #css #webdev #game #crossword

【プログラミング初心者】Javasrcitptのオブジェクトを勉強する！！ ＃89（Day158）

https://www.emilyselect.com/%e3%80%90%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e5%88%9d%e5%bf%83%e8%80%85%e3%80%91javasrcitpt%e3%81%ae%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%82%92%e5%8b%89/?feed_id=5317&_unique_id=69d2499c35956&Mastodon

#visualstudiocode #26卒 #CSS #cssセレクタ #freeCodeCamp #HTML #IT #JavaScript #js #Obsidian #pc #VScode #アプリ開発 #エンジニア #エンジニア就活 #エンジニア就職 #エンジニア転職 #ノートアプリ #パソコン #プログラミング #初心者エ...

🐫 Thomas Gazagnaire :: A CSS Engine in OCaml https://gazagnaire.org/blog/2026-04-02-cascade.html

#ocaml #css

Оживляем UI на мобилках с Sensor API

Речь пойдёт о реализации реакции веб-интерфейса на наклон устройства, смещение бликов, теней, для придания ему таким образом интерактивности и объёма. Device Orientation API существует уже давно . Мобильные устройства с гироскопом стали пожалуй основным окном для приложений и сайтов. Всевозможные эффекты "блеска" / градиентов в дизайне встречаются регулярно, тренд на эмоциональный дизайн и кажется пора это всё объединить! И ведь Apple выкатили эту фишку в liquid glass ! Но... лично по моему мнению, как-то не "дожали" или она померкла на фоне других нововведений... а жаль, я считаю реакцию ui на положение устройства гораздо более перспективной темой чем новая прозрачность с крутой физикой преломлений которую тут же все побежали повторять . В отличии от преломления фона, адекватная реакция на наклон устройства это не графон ради графона, а микро‑взаимодействие дающее ощущение контроля, отзывчивости, даже "живости" интерфейса. Ведь даже если пользователь не тапает по экрану - он очень даже взаимодействует с интерфейсом(смотрит/читает) и слегка "покачивает" телефон в руке, и UI на эти микродвижения уже чуть-чуть отвечает, маленькая физика (свет/тень/глубина), как будто элементы не нарисованы, а существуют как объекты... Ну это моё субъективное восприятие... тут есть похожие мысли про роль микровзаимодействий и баланс эмоций. Знаю что некоторых людей "лишние" анимации наоборот нервируют, или даже "укачивают", чтож... прекрасно что для них есть опция reduce-motion, для меня такой замечательной обратной опции "сделать красиво" нет ))) Если всё ещё не понятно о чём я, можете глянуть это видео : Блеск!

https://habr.com/ru/articles/1010328/

#sensors #ui #js #css #twa #tma #telegram #gyroscope #accelerometer

April 4 comiCSS game: Branches
https://comicss.art/games/18/

Today's topic is about CSS, and the title is "Location, location, location."

#css #game #webdev