ungual boosted

a.internal{
color: green;
}
a.external{
color: blue;
}

ngl best web design i did in 10 years probably

.thought::after{ border-radius: 50%; background-color: blue; float: left; content: "?"; padding: 4em; } am i right

Show thread

if you squint hard enough, CSS is a descriptions based generative text-to-graphic system

here is something: mind is grey with blue dots, no need for acidity anymore, can you imagine, the light warmth

Show thread

here is something: eyes just a bit tired, cold just a bit cold, day just a bit a tuesday, september. can you imagine, the light cold

Show thread

here is something: a tuesday, september, microwaving a tupperware alone at the studio can you imagine, the light cold

Show thread

soo excited to eat dishes in a cold city again, food tastes so special when it's a bit cold. like spaghetti and coffee idk can imagine, the light cold

its still heavily in the crafting, but here are two examples:
the blue one uses the em unit in border-radius (hence producing only circular radii),
the brown one uses % unit (hence producing elliptical radii that adapt to their boxes)

Show thread

trying to figure out a system that can use both em and % units in the css border-radius property to draw multiple shapes that are coherent together can become incredibly complex it's like it wasn't made at all to do that wait

Show thread

the little pencil with its little title is just so cute i cant

Show thread

thats it that s my favorite div of the internet the famous <table class="infobox biota"> a webdesign jewell

about the name pseudo-force, the same words are used in physics to qualify a force that is not there on its own but that we do experiment
en.wikipedia.org/wiki/Fictitio
similarly pseudo-force is not a font, you can't copy-paste the letters, but you sure can read them

Show thread

the shapes are entierly drawed with using CSS borders (border-width and border-radius), plus of course CSS relative positionning and spacing methods

Show thread

every single letters are made of 1 empty div (with a data-attribute indicating its unicode value). it heavily uses the ::after and ::before pseudo-elements, hence its name: pseudo-force

Show thread

remember that browsers do not only render HTML, they can also open single media files, like images, and it comes with standard functionnalities like zooming, saving as, etc! you don't have to build your own system for that inside of every website

Show thread

the good part about unecessary complex and generic website builder is when they're not used has planned

the corrupted clicking on <img> open a fancy lightbox to see it in bigger inside the webpage vs the elegant <img> are nested in anchor tag that just open the media url in a new tab

ive been working on a CSS-based lettering system :) i just love the idea to draw letters and words with language (by writing declarative sentences made of CSS). i feel ive been looping on the same ideas for years now in a very positive way, like as a way to tame/befriend them. im so impatient to show you how it works.

Show older
post.lurk.org

A fediverse community for discussions around cultural freedom, experimental, new media art, net and computational culture, and things like that.

<svg xmlns="http://www.w3.org/2000/svg" id="hometownlogo" x="0px" y="0px" viewBox="25 40 50 20" width="100%" height="100%"><g><path d="M55.9,53.9H35.3c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3h20.6c0.7,0,1.3-0.6,1.3-1.3S56.6,53.9,55.9,53.9z"/><path d="M55.9,58.2H35.3c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3h20.6c0.7,0,1.3-0.6,1.3-1.3S56.6,58.2,55.9,58.2z"/><path d="M55.9,62.6H35.3c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3h20.6c0.7,0,1.3-0.6,1.3-1.3S56.6,62.6,55.9,62.6z"/><path d="M64.8,53.9c-0.7,0-1.3,0.6-1.3,1.3v8.8c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3v-8.8C66,54.4,65.4,53.9,64.8,53.9z"/><path d="M60.4,53.9c-0.7,0-1.3,0.6-1.3,1.3v8.8c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3v-8.8C61.6,54.4,61.1,53.9,60.4,53.9z"/><path d="M63.7,48.3c1.3-0.7,2-2.5,2-5.6c0-3.6-0.9-7.8-3.3-7.8s-3.3,4.2-3.3,7.8c0,3.1,0.7,4.9,2,5.6v2.4c0,0.7,0.6,1.3,1.3,1.3 s1.3-0.6,1.3-1.3V48.3z M62.4,37.8c0.4,0.8,0.8,2.5,0.8,4.9c0,2.5-0.5,3.4-0.8,3.4s-0.8-0.9-0.8-3.4C61.7,40.3,62.1,38.6,62.4,37.8 z"/><path d="M57,42.7c0-0.1-0.1-0.1-0.1-0.2l-3.2-4.1c-0.2-0.3-0.6-0.5-1-0.5h-1.6v-1.9c0-0.7-0.6-1.3-1.3-1.3s-1.3,0.6-1.3,1.3V38 h-3.9h-1.1h-5.2c-0.4,0-0.7,0.2-1,0.5l-3.2,4.1c0,0.1-0.1,0.1-0.1,0.2c0,0-0.1,0.1-0.1,0.1C34,43,34,43.2,34,43.3v7.4 c0,0.7,0.6,1.3,1.3,1.3h5.2h7.4h8c0.7,0,1.3-0.6,1.3-1.3v-7.4c0-0.2,0-0.3-0.1-0.4C57,42.8,57,42.8,57,42.7z M41.7,49.5h-5.2v-4.9 h10.2v4.9H41.7z M48.5,42.1l-1.2-1.6h4.8l1.2,1.6H48.5z M44.1,40.5l1.2,1.6h-7.5l1.2-1.6H44.1z M49.2,44.6h5.5v4.9h-5.5V44.6z"/></g></svg>