🎨 Thinking Deeply About Theming and Color Naming

Thinking Deeply About Theming and Color Naming | CSS-Tricks

CSS Text Mask Effect

i am trying to learn html and css

it is hard but so help me i will learn it

WHAT THE FUCK ARE YOU DOING HERE. YOURE LITERALLY NOT IN THE CODE. WHY ARE YOU SHOWING UP.

Ive been a busy bee ive been learning css, html and python. Started a youtube channel. Made a website and spending mothers day teaching myself how to edit videos.

Here is my youtube:

LoreByChris

Here is my website

COW_Gaming

Animated Service Box

having a LOT of fun decorating my artfight page with newly acquired CSS perms ♫♫ i still need to fix my badges & probably spiff up the links/followers boxes a bit more. maybe the card headers too, just to something i like a lil more. maybe a patterned somethin or other

bonus my tooltip currently vvvv still a little in wips but its supersuper cute

i know just enough CSS to be dangerous. i know there has to be a way to do this - layer one graphic on top of another and have both scale properly when the screen is resized, maintaining their relative position to each other while ALSO taking up 100% of the available vertical height that is underneath a header that does not move.

I have currently hacked this into mostly working by making the images into backgrounds, setting their containers to 100vh and slapping on some judicious :cover tags but ‘mostly’ is not 'completely’ - it still messes up at some scales (bottom pic fills full height but top pic doesn’t, leaving a gap showing).

I am working on this on the boss’ dime because I might as well get paid to consider which rule of CSS i am inadvertently fucking over with my hack job.

neocities how-to~

click here for a tutorial on how to link a button to a new page of your neocities site!!

neocities how-to~

click here for a tutorial on how to add custom cursors to your website!!

I couldn’t find any myanimelist widgets, so I made one. The second two are probably a bit impractical but they were so much fun to make.

When I had built v1 I was trying to use Jikan API, but they almost never update the recent updates section of user profiles, so I ended up making my own cloudflare worker backend, definitely less fun than making the widgets but very satisfying when it finally worked.

Having my own backend let me purge the cache for testing and get new updates every hour otherwise. I was also able to link CF to Trello and receive status reports directly to my board which was also very satisfying. I attached a couple images from the process, first was the original mockup I referenced, then the ‘first version’ of the widget.

—

You can view live previews of the widgets here:

MAL-Widget-Regular

MAL-Widget-Ranma

MAL-Widget-System

Check out Socializer.CSS. A #CSS #library to create #social network icons easily.

https://www.aakashweb.com/css-libraries/socializer-css/

Toggle Day/Night Effect

i be making very normal things in html😁

Animated Text Effect

I was watching a video about Pokémon type colors, and they said this about Stellar’s colors not being possible in HTML [CSS]…

“[Bulbapedia can’t do the correct colors for the Stellar type] … since HTML wasn’t prepared for circular multicolor”

(Pokémon’s stellar type icon vs Bulbapedia’s stellar type icon)

Actually, it’s entirely possible!

(I already left a comment but I’m passionate about weird CSS gradients, so I want to tell everyone.)

Here’s an example of a DIV colored entirely with HTML/CSS, absolutely no images:

You can use it just as any other div.

Here’s the code:

<div style=“width: 200px; height: 100px; background-image: conic-gradient(#F8D937 0%, #F8D937 6.25%, #FFB934 6.251%, #FFB934 12.5%, #FD763A 12.51%, #FD763A 18.75%, #D387C9 18.751%, #D387C9 25%, #A166D6 25.001%, #A166D6 31.25%, #885CA4 31.251%, #885CA4 37.5%, #566083 37.501%, #566083 43.75%, #738CAE 43.751%, #738CAE 50%, #4DA3E7 50.001%, #4DA3E7 50%, #26B7EF 50.001%, #26B7EF 56.25%, #39B7F1 56.251%, #39B7F1 62.5%, #43A3EA 62.501%, #43A3EA 68.75%, #40C6E0 68.751%, #40C6E0 75%, #3ED95C 75.001%, #3ED95C 81.25%, #BCD34B 81.251%, #BCD34B 87.5%, #DADC96 87.501%, #DADC96 93.75%, #E2BC60 93.751%, #E2BC60 100%);”></div>

It’s easier to make the colors blended, but it’s possible to make the color changes abrupt by doing it the way I did it above.

Feel free to copy my code :)