#css shapes

[divinector]

CSS Morphing Shape Animation

[borealing]

"learn to code" as advice is such bullshit. i have learned and used four and a half different coding languages through my career (html/css, java, python+sql, c++) and when i say used i mean I've built things in every one but the things that i actually used these languages for??? these earn zero money (with the caveat of until you have seniority in, e.g. front end web dev) what people really mean when they say learn coding is "learn to code. go into investment banking or finance startups." coding does not inherently have money in it. my absolute favourite part of coding? my peak enjoyment? was when i was developing for a visual coding language (you put it together like a flowchart, so say youre using a temperature sensor and you want it to log the temperature once every four hours, you can put the blocks together to make it do that. i was writing the code behind the blocks for new sensors) and i was earning £24k a year and that wasn't even part of my main role. it was an extra voluntary thing i was doing (i was working as a research assistant in biosensors - sort of - at a university, and was developing the visual code for students who didnt want to learn c++) like. i want people to learn to code, i want people to know how their electrical equipment works and how coding works, but dont believe the myth that there is inherently money in coding. the valuable things, the things people are passionate about are still vulnerable to the passion tax (if you want to do it you dont have to be paid for it). skills arent where the money is, money is where the money is.

[cluepoke-archive]

Raise your hand is you love CSS

css haters dni

[autosarcophagy-avaritia]

my roommate hasa to get a phone today because of storage. i cant wait to see how much i want to kill myself by the end of this!

[gagande]

PureCode company | The basic and advanced techniques of using CSS

Having covered the basic and advanced techniques of using CSS shape generators, it’s time to apply these learnings. In this section, we will guide you step-by-step on how to use these tools, from creating a basic shape to customizing and exporting the generated CSS code.

[nyctoheart]

finished version 💕🩷💖

made with html/css (besides the characters). soooo happy to finally create something 😭

[pinkbat5]

Greetings, greetings. I've been reading through corru.observer and I really love it! Got inspirired to draw my own little obesk guy. Which, As I went, got me curious about your art process for some of these visuals. What resolution are the sprites? And, what kind of dithering are you using to get such striking visuals? I'm quite curious

Hi!! I'm glad you like it!!!!

The signatures are around 1840-2300ish pixels tall at their full resolution! Though that doesn't decide how tall they are in the game, that's determined by the size of their css container. To keep heights consistent, whenever I make a new signature, I just paste in one of the signatures I already made for reference, then resize the sketch accordingly. like this

So for making your own, I recommend ripping the sprites from the game and doing the same.

After resizing the sketch I draw the shapes with a hard, aliased brush, then I paint on top of them with simple round brushes. Then sometimes I add textures on top of that on an overlay or multiply blending mode.

As for dithering, I cover that here, but to summarize I (and all of corru observer, save for... one exception) use floyd steinberg dithering! There are a bunch of different types but that's the kind I use.

To make sure everything looks GOOD once dithered, I will dither the drawing, look at the result, and then adjust the original image until it produces a dithered version that I like. Lots of trial and error. Usually that means increasing the contrast so that there are clean zones of pure black, instead of everything having a faint dithered texture on it.

Does that answer your question?? I could talk about this for hours.

[ltwilliammowett]

USS Monitor

Today marks the 51st anniversary of the discovery of the USS Monitor, a Civil War wreck that lies 16 miles off the coast of Cape Hatteras, North Carolina.

The USS Monitor was an iron-plated warship launched in January 1862. It was built for the Union Navy in an effort to match the Confederacy’s own armored vessel, the CSS Virginia.

While the battle between the Virginia and the Monitor ended with a mutual retreat and no clear victor, news of the battle changed the course of naval history. Many European nations halted the construction of wooden ships, shifting focus to armored designs. Iron and steel would become the new standard for warships around the world.

The low-lying design of the Monitor was well suited for river combat, but fared poorly in the open ocean, particularly rough seas. This would turn out to be the vessel's undoing, and the ship would fall not to the forces of war, but to the forces of nature. It was caught in a storm while being towed on New Year's Eve, 1862, and sank in 230 feet of water.

On August 27th, 1973, 111 years after its sinking, the wreck of the USS Monitor was detected in 230 feet of water using a towed sonar system aboard the Duke University Research Vessel (RV) Eastward. Sonar images did not match the expected shape of the Monitor: this was because it was sitting on the seafloor upside down.

Source

[thecozycat]

🧡 Tuesday Tips #3 🧡

Your website is more than just a collection of pages—it’s your digital home. It should reflect you, your interests, and your personality. But with so many sites out there, how do you make yours stand out?

Here are 25 ways to make your website feel more personal, unique, and personalized to you!

........................................................................................................

🎨 Design & Aesthetics

1. Custom Color Palette – Pick colors that resonate with your personality and aesthetic.

2. Unique Typography Choices – Use a mix of fonts that match your vibe.

3. Handwritten or Doodle Elements – Add personal sketches or notes.

4. Custom Cursor – Let visitors use a fun, themed cursor on your site.

5. Personalized Favicon – A tiny but powerful detail that makes your site feel complete.

6. Themed Layouts for Different Pages – Make each page visually distinct but cohesive.

7. Custom Backgrounds – Textures, gradients, or even a personal photograph.

8. Retro or Experimental CSS Styles – Go wild with unique styles that make your site stand out.

9. Create a Custom Hand-Drawn Logo – Instead of a standard logo, try sketching one yourself for a unique touch.

10. Add Subtle Animations – Small hover effects, background animations, or cursor trails can bring your site to life.

11. Play With Layering Elements – Overlap images, text, and shapes for a more dynamic look.

12. Design a Personalized Loading Screen – A custom loading animation or message adds a fun detail visitors will remember.

13. Add Your Own Handwriting as a Font – Convert your handwriting into a web font for a truly personal touch.

14. Design a Seasonal Theme Switcher – Let visitors toggle between different seasonal or mood-based color palettes.

........................................................................................................

📜 Content & Personality

15. Create a Behind-the-Scenes Page – Show how your website was built, share your thought process, or include fun bloopers.

16. Add a "The Making Of" Section – Share drafts, sketches, or early concepts behind your creative works.

17. Include a Personal Dictionary of Words You Love – A list of favorite words, phrases, or slang you frequently use.

18. Design a "Things That Make Me Happy" Page – A simple, uplifting page filled with personal joys.

19. Show Your Progress on a Learning Goal – Track and share your journey in learning a new skill, language, or hobby.

........................................................................................................

💾 Interactivity & Engagement

20. Add a Clickable Mood Indicator – Let visitors see your current mood with an emoji or phrase that changes over time.

21. Create a Dynamic Banner That Updates Automatically – Display different messages depending on the time of day or special occasions.

22. Add a "What I'm Listening To" Widget – A live-updating display of your current favorite song or playlist.

23. Embed a Poll or Voting Feature – Let visitors vote on fun topics or help you make creative decisions.

24. Introduce a Mini Personality Quiz – Something quirky like “Which of my favorite books/movies are you?”

25. Make an "Ask Me Anything" Page – An interactive page where visitors can submit questions for you to answer.

Closing: Make It Yours!

Your website should be you in digital form—fun, unique, and engaging. Whether you add just one or all 25 ideas, the most important thing is to have fun and make it your own.

If you try any of these ideas, let me know—I’d love to see what you create!

-----------------------------------------------------------------

Want to help the Small Web movement grow?

Join us on other platforms. ♥

FB Page & Group:

facebook.com/thesmallweb

facebook.com/groups/thesmallweb

Twitter/X:

x.com/smallweblove

Tumblr Community:

tumblr.com/communities/thesmallweb

Mastodon:

indieweb.social/@thesmallweb

[aesopcodes]

Resource: Responsive Web Design

Starter kit basically.. for those working on jcink skins. Viewport plus using media queries, css variables, grid, and flex will ease the process of making responsive skins but I advise keeping them in mind early on.

[bloodsadx]

sorry if you’ve answered something similar before but how do you format things for your website? in the collections you have for poems

i love how it looks. the book kind of format it has

and i want to do similar/the same formatting for my own works but im really struggling…

i've been asked stuff like this a lot and i don't mind explaining it often because i want people to make websites more. i made a tutorial video at some point but it's kind of hard to make a curriculum or tutorial or whatever around this kind of thing because it's really just a self expression thing. i'll try to break down as much of my thought process as makes sense.

i design my pages in photoshop with either double/single page display in mind and then i use html to set them next to each other. most of the choice here comes down to how overwhelming i want my designs to feel. in the case of the lonely leaver page, the entire book was designed to be something that could be a physical book, and so from the getgo i made the pages in that kind of format. i previewed things in acrobat which has a booklet view mode (which singles out the front and back cover around the contents of the file) & allows you to process double page view as well. as for the actual process in photoshop before that point, i typically will open a canvas that is the size of the full 2 page spread (i.e. 8 inches wide for 2 pages which are both 4 inches wide) and i set grid lines for bleed margins and to mark the center of the page so that i can make the composition something that im comfortable with having a gap in the middle from the book folding. with lonely leaver i had to reformat about half the book at some point because i wanted to make it a larger resolution which was annoying but i just keep my guidelines for a print size in mind while im working. often if im a certain amount of time into a project that i feel like i will be spending a lot more time with i'll create a dummy psd file at this point which is devoid of content but which has all of the margins/resolution stuff set up already so i can just open that up and save a different version of it when i'm done.

my actual writing process and my design process is generally extremely intertwined, that's why things tend to be varying degrees stream of conscious in my work i think. i'll for instance, have a thought im stuck on for several days, and then open photoshop without having a poem or comic in mind, but i'll fill the canvas with some kind of color like red or yellow or a photo or whatever, and then open a text box or start drawing. telling a story through composition (i.e. page layout itself) is generally my favorite aspect of art and design because i enjoy how violent and dramatic framing angles can make the content of a piece feel so i'll try to move stuff around as much as possible in order to get my desired effect, often times using place holder shapes in lieu of finished design elements in order to get a rough blocking. as i do this i tend to react to what i'm writing/making as i'm doing it, and i do a lot of selective self editing during this part. for instance, i'll start manipulating rasterized text or cutting around images or whatever. i'll reread and look at whatever im doing for a couple of hours and then when i'm done with a spread or whatever i will save the document as a psd with a combined full spread and then each page separately as pngs or whatever (split at the middle grid line, back to the example, i'll save 2 different 4 inch wide images by changing the canvas size).

when it's time for me to put stuff on my website i then batch convert whatever pngs i exported into webp's because they load faster and take up less space on the server/my computer. you can look at my direct html/css files in your internet browser's explorer mode to see exactly what i do but essentially i just have either 1 or 2 images in a block and then a series of repeating vertical blocks containing images. i don't have an extremely efficient way of uploading pages and i'll typically just copy the same

"<p><img src="01.png"> <p><img src="02.png">"

like, 30 or 40 times or whatever into a html document. i use visual studio code for this stuff because it lets me do a bunch of stuff like having several files open at once & the navigation pane is nice & there's a live server extension that automatically refereshes the html file in my web browser on file save which is really awesome. i have a css page that i made like, 5 years ago, and i usually just link new projects to that because it has a bunch of different settings in it which i'll toggle on or off depending on the needs of whatever page or i'll add new div id's to it. it's kind of messy at this point, but it gets the job done. i use filezilla and something like bluehost or something for webhosting/file management.

i arrange and organize all of my art extremely methodically so usually in my like "<root catch all poetry folder>" inside of my "<root catch all art folder>" there will be a "<name of specific poem book>" folder which just contains the poems named by their actual name e.g. "dedication to saint eulalia 4.png" and then another folder inside of that is called "paginated" where i, using the acrobat document i arrange stuff in as reference, rename copies of my pages which i have placed in that folder to be named things like "01.png" so that i can then manually flip through it sequentially in the windows photo viewer and also just so that i don't have to go through the arduous process of renaming and tracking stuff inside of the root folder i'm containing that project's files in.

i'm 26 now and i made my first website when i was like 18, and my first zine project and i'm tired of feeling feeling around that same time, so i've got like, coming up on a decade of trial and error behind this and this is generally what has worked for me. my website isn't super complicated and mostly just gets the job done but because i try to think about style and presentation up front with whatever projects i'm doing i tend to just make plans based around that as early as it makes sense. to me having a website for art presentation has always been the Primary Method and intended landing zone for my art so it's genuinely always been a consideration in my process to try to plan around how i will put it on my website. i do this because i believe having my own curated space for containing my art allows it to exist in a context which best heightens whatever message i'm trying to convey. if there's an issues with my website right now they are that i'm very bad at mobile browser formatting & i havent updated the main look of the website in something like 4 years barely at all.

anyway, at the end of the day i think really as long as you can identify whatever your intentions are and do some planning/problem solving around that you should probably be able to find your own method which works for you better than mine might but if you do just want to copy my website the tools to do so are within your brain and internet searches and i believe in you. i think the biggest strength of my website is that it shows how easy it is to just put art big as fuck on a webpage and how effective that kind of minimalism can be. i just want my website to be like a museum's walls. and it's not super complicated to get to that level of html knowledge.

[artheresy]

Dan Heng, Dan Feng, and Unreliable Narrators

WARNING: Some Leaks Discussion, don’t read if you don’t want to know any leaks

A bit of a rant regarding Dan Feng and Dan Heng and where I think their story might go if Hoyoverse doesn’t contradict in their lore hopefully ?

No because let me tell you how this recent animation is all setting up to an eventual reveal of how Dan Heng is an immensely unreliable narrator and the story then at that point will want the players (at least those who havent yet read every little bit of lore) to come to question the Vidyadhara Preceptors and the Ten Lords Commission because THINK, THINK WITH ME GUYS

First off, the whole image we see of Dan Feng is absolutely not the real Dan Feng, but people who aren’t looking into lore leaks and story leaks and looking in every single crevice won’t have that point clear to them. Think of the description of the literal animation:

“Never a person with love, hatred, sorrow, or joy like everyone else in this world.”

The view Dan Heng has of Dan Feng has only ever been shaped by the consequences of the sin he committed that condemned Dan Heng as well despite being a different incarnation of him. That sin was the reason for his imprisonment for much of his childhood until he was eventually banished once again due to that sin. Even once he had left the Luofu, the reason behind being pursued and hunted down by Blade IS their shared sin. All that he knows of Dan Feng is a curated by the Higher Powers of the Xianzhou Luofu, he does not truly understand the man who came before him. (Something he has admitted to by the way, but let’s also look beyond just his own admittance.)

Fundamentally, the biggest evidence of such comes from how Dan Feng appears in his mind in the Animated Short that was just released. In it, Dan Feng haunts him, and specifically when he speaks, he talks of the High Elder succession. He speaks of it as something that cannot be broken, something that he cannot run from. That death is the only redemption for those who defy it.

But the thing is, this doesn’t sound like Dan Feng AT ALL. (Specific warning for Jingliu voiceline and character story leaks)

If you have kept up with leaks, you’ll see that Dan Feng would never EVER say such things as he did in the animated short to his next incarnation. And why you may ask? Because it is evident from the VLs and CSs that… Dan Feng himself seems to have longed to escape his role as High Elder. There is not any firm confirmation of either what the sin he and Yingxing committed nor what his motivations exactly were. However, there is a strong case to be made that the sin committed could be related his attempt to create a new high elder with the possible motive of wishing to escape his role of High Elder and the loss of identity he had to experience due to that role.

But of course… Dan Heng doesn’t know this, he is unaware of whatever gripe or distain Dan Feng may have had for the role he carried out, the one he couldn’t escape. He only knows the words of the Preceptors and anyone else he was allowed to have contact with while imprisoned after his rebirth. And y’know… when you listen to what Dan Feng says in the animated short, it sounds more like something the Preceptors would say instead. Those words read more as Dan Heng’s projection of them instead placed upon Dan Feng who he has always been taught to view as a traitor, a sinner, rather than a person.

And hmm, who could stand to benefit the most from Dan Heng viewing Dan Feng as a villain…

HMM I DUNNO, PERHAPS THE PEOPLE WHO LIED TO DAN FENG AND PURPOSEFULLY SET HIM UP!!! The same people that Dan Heng has confirmed were his primary source of information regarding who Dan Feng was just as I said before.

Additionally, I’m tryin to find screenshots of it, but there are memories that come from certain Vidyadhara eggs when you interact with them that further suggest that the Preceptors sabotaged Dan Feng likely for the goal of wishing to maintain control over him/fear of the fact that he was becoming to powerful, that he was wavering from his role. So of course again, who else could benefit quite as much as them from Dan Heng hating Dan Feng? It is a way they still exercise control over his next incarnation. They control the narrative of his past self, they control what he knows about him to paint a specific picture that they want him to see. And once he is old enough, they further take care of him and exorcise a last bit of control by banishing him from ever returning. Sending him out into the universe having shaped his views and behaviors and of course what not to be like through their propaganda.

I just want to emphasize here how deeply important Dan Heng’s view of Dan Feng is for shaping his character as well as through the insight into him from that angle, we gain information on the Judges and the Preceptors.

With all of this known, I want to talk about where I think their story could be heading! Of course, please note this is strongly speculation and I don’t think my interpretation and prediction of what could happen is the objective truth or only way to view things. I could be very wrong honestly, I wouldn’t be surprised lol! But I think, at some point, we will in fact get an event where Dan Heng will realize the truth of who Dan Feng was. What he wanted, what he truly did, and why he did it. With the continued emphasis on what he was taught and how his perception is based upon what he learned in his imprisonment, I think it would simply make sense to have a turning point where he learns the truth.

A turning point that shines suspicion upon the Preceptors and Ten Lords Commission. However, I don’t think such a thing will happen for a LONG while given a few different reasons that I will outline here! So I don’t think this realization will be anytime soon due to the following:

1) We like literally just helped the Luofu. Its the beginning of the Xianzhou story as a whole given us being in the beginning of HSR, there are other ships to look into as well. Highly doubt they would cast suspicion upon the higher powers of the Luofu through Dan Heng’s lens so soon. It wouldn’t make much sense when there’s a lot left to work with

2) We know for Kafka that we will definitely come back or be back in contact with the Xianzhou Luofu given the whole reason she had us come to the ship in the first place being that she needs them in debt to the Astral Express for a future plan. Of course, they might not coincide, but in the cast that they do, I think it gives more justification to push back such an occurrence since the order would likely be Kafka’s thing first and then the realization? Of course again, I could be wildly wrong, time will tell in the end

3) and lastly, I think that Dan Heng having a realization of the truth of Dan Feng, his motivation and most of all his sin, especially if that would include finally having a true reveal and confirmation of what his sin exactly was, could very well relate to the relic lore line, “Pairs of objects are destined for an eventual reunion. The long years of grudges and hatred between them should be savored, like ice-cold aged liquor, one slow sip after another until the bottle of resentment is finally empty.” involving Blade. I mean think about it, Dan Heng finally having the full picture could very well lean into the event that the line is foreshadowing. And paired with the finality of that line, plus Dan Heng and Blade’s importance each individually as a Nameless and Stellaron Hunter respectively… yeah no way in hell would they get a conclusion so soon.

So yeah, I’m convinced Hoyoverse will absolutely stretch out and drag out the story, keep up waiting keep us on the edge of our seats, but I think eventually Dan Heng will be given the chance to realize the truth and not only will his view of Dan Feng change, but the view of those who had taught him and punished him as well. Or at least, I severely hope he will get the chance. To end his character so soon would be a true shame.

And for anyone struggling to understand my rant because I tend to go on tangents and become incoherent (I get it and I’m sorry!), here’s a tl:dr! From officially posted sources as well as some leaks, it can already be seen that Dan Heng is a unreliable narrator regarding Dan Feng. His perception of him in the animation directly contradicts the desire Dan Feng is shown to have to escape his role. I think at some point in the story, he will be given the chance to find out the truth given the continued emphasis of his lack of understanding regarding who Dan Feng truly is as well as the fact that he learned who Dan Feng was from the very people that punished him. Given the fact that different sources directly hint to the fact that Dan Feng was set up by the Preceptors to fail for the sake of maintaining control, Dan Heng’s realization about Dan Feng would likely be utilized to cast suspicion upon the Ten Lords Commission and the Preceptors.

Even that was still long but, I tried to condense as much as I could. Please forgive me if I make any spelling mistakes in this post or if the whole post itself seems completely weird or smth. Im writing this at 3 am after hours of brainrot. I am unwell to be true, anyways! Night night!

[gagande]

PureCode AI review | To further understand advanced CSS properties

To further understand advanced CSS properties for shape design, we will explore the clip-path property, CSS transform for shape distortion, and the role of aspect ratio in responsive shapes.

[mahrico]

I made a thing!

Alright folks — after spamming wallpost-codes, I figured it was time to post something more like a bulletin board layout or whatever. I’ve got two versions here, using the exact same code. Both color themes are included in the :root area — all you have to do is comment out the one you don’t want using /* */, and you’re good. Seriously though, I love working with variables. If you're not using them yet: start. now. It makes trying out color themes a million times easier.

I also wanted to mess around with geometric shapes for once — lol. The code is fully responsive and looks clean on mobile. I hate when people build WoX bulletin layouts that break on phones. Hello?? We’re literally online on the go. Make your stuff mobile-friendly.

You can insert as much text as you like. If you only need one container, I’ve added a little <!-- comment --> to mark the section you could delete if needed.

As always, I avoided inline CSS wherever possible — because honestly, I can’t stand it. It’s messy. It’s ugly. It ruins readability. No thanks.

If you need help, want a commission, or just wanna vibe — hit me up on Discord! I go by @mahrico there too ;)

Code 1 – Lightgreen: 🔗 https://codepen.io/mahricodes/pen/gbpvGKg

Code 2 – Lightred: 🔗 https://codepen.io/mahricodes/pen/zxGWvRG?editors=1000