#html css text animation

[divinector]

Glowing Text Animation

[codingflicks]

CSS Animated Text Overlay

[codenewbies]

Text Typing Effect

[freefrontend-blog]

💥 100+ CSS Text Animations 💻✨

Looking to make your web content more dynamic and engaging? Our September 2024 update features 22 new CSS text animation examples!

Ready to add some flair to your site? 🔥 Check it out!

→ https://freefrontend.com/css-text-animations/

[pueriled]

Useful websites / links for rentry , bundlrs , gfx & etc for you!

symbol sanatorium - Links to a google document with a ton of symbols , kaomojis & text layouts. I use it for pretty much all of my recent rentrys.

sozaino.site - Website that's been making its rounds on rentry as of late, useful for graphic making. Has dividers, pngs, frames ~ etc if you have the creative touch.

sozai-good - site I found recently that has a lot of pngs you can download, also has frames and borders. In japanese but isn't hard to translate. Everything is also sorted into sections.

lottie lab - Website useful for animating, can be used to move around PNGs for rentry and the like. I don't use it much myself atm, but it's pretty easy to get the hang of.

scripted.neocities - Neocities full of code you can use for bundlrs or carrd. Also useful for stuff like spacehey and other sites that use CSS / HTML

blinkies.cafe - Easily make or find blinkies here! Great for beginners who want to make some simple things.

emojicombos - Search practically anything and you'll find an emoji combo for it. Useful for finding symbol / text combos and kaomojis.

unicode character table - Has pretty much every single symbol you've seen or needed. You can find what you want pretty easily due to its sectioning. Has stuff like arrows , dingbats , brackets , etc etc..

yaytext - Make your text 𝙼𝚘𝚗𝚘𝚜𝚙𝚊𝚌𝚎! or U͟n͟d͟e͟r͟l͟i͟n͟e͟d͟!͟ easily with this website! May possibly break screenreaders in the process though so be warned.

lorem ipsum generator - Too lazy to generate a block of text to make a page look filled out, well look no longer! This site can quickly generate of block of pure gibberish to make it seem like there's actually text there! Good for newspaper / magazine gfx ~

And that's all ( for now )! I use most of all these sites and find them very useful! Hopefully one of them will prove useful to you too dear friend (❁´◡`❁)

[stranger-avenue]

misc sites for building/decorating sites!

basically part 2 of this [some of these are now down/defunct unfortunately but we always have more!!] semi organized..

website building intro to html in depth explanation on making a website tiled bg css gradient generator layout generator hugeeee resource list another resource site css animation library shiny button generator tiled bg minifier retro website templates decor userbar generator [flashing] buttons assorted links to graphics collections kewl text [flashing on hover] blinkies, stamps, and userboxes stickers [flashing] more 88x31 buttons [flashing] another graphics collection xbox 360 gamerpics 80x15 button generator wmp archive cursors geocities blinkies search [flashing] pixels and 88x31 buttons search internet bumper stickers userbox generator

sites like glitter graphics zwani jelly muffin zingerbug

fun! status cursor effects motherfucking website better motherfucking website best motherfucking website poll maker mood counter tamanotchi webgarden web ring list gify pet

[masksonmasks]

Sorry, Erik, I'm shutting this disaster down. Just call me dev-roga. Hands at the level of your HTML elements, fellow phans, we're going to dismantle this torture chamber of a website one CSS rule at a time. Video above, text instructions under the break.

Go to https://masqueradenyc.com/instructions/

Right click anywhere in the page.

In the resulting menu, click "Inspect"

Welcome to the browser dev tools! On the top half of the screen, find the HTML tag that says "<canvas>" and click that.

On the bottom half of the screen, uncheck the box next to the "visibility" CSS rule.

Goodbye, wavy animation. Now, let's get rid of the red death screen that's ruining the general mood of the site. Very meta, Immersive Phantom design team, good job.

On the top half of the dev tools screen, click the "<body>" tag (it's slightly above the "<canvas>" tag).

On the bottom half of the screen, uncheck all of the "background" CSS rules you can find. (FYI: There are 3.)

Maybe turn down the brightness on your screen, especially if you're used to dark mode. However, the garish light of day is still preferable to red death.

[izzycodes]

My 2023 Projects

Wednesday 3rd January 2024

I thought it would be cool to share some of the projects I made last year that I liked and enjoyed working on! Most of them were small projects, some were projects I built straight after I learnt a new concept and a few are discontinued (I won't finish them anytime soon)!

I really hope, which I know I will because it's natural for me at this point, to make lots of more cool projects! This year, I want to make more with other people! Coding alone is cool and all but with other people I get more inspired!

Lastly = always remember to build projects that you're interested in. Projects you will have fun working on for a while. Every single one of these projects I've made, I was interested in somehow. And I had fun!!

Anyhoo, check out the projects below~! 🙋🏾‍♀️😊🖤

TumblrTextTint

Basically a formatter for Tumblr posts by adding custom colours to your text! Even learnt how to make FireFox extensions so I could add it as an extension to my browser - link 1, link 2

Web Odyssey

I looked at old Windows GUI on Pinterest one day and decided to recreate the GUI with HTML, CSS and JavaScript! - link 1, link 2

Cat Fact Generator

For one of the projects I did for the #3Days1Project challenge, I created a cute cat generator. Learnt how to work with APIs and a CSS library (Pattern.css) - link 1, link 2

Studyblr Valentines Gift 2023

It was valentine season in the Studyblr community and I participated! I made a poem webpage for a studyblr who was learning Russian! (I don't know anything in Russian but for a couple of weeks I learnt some of the poems!) - link 1, link 2

Saint Jerome Tribute Page

I made a page for my favourite patron saint, Saint Jerome, for his feast day (Sept 30)! I haven't had time to complete it fully and there's no live page for it but I did make posts about it! - link 1

Trigun Quote Generator

Just finished the Trigun anime series at the time so I decided to make a project for it for the #3Days1Project challenge! The anime is so good, it is my 2nd favourite (JOJO comes 1st place) - link 1, link 2

Froggie To-Do

Just came from learning the absolute BASICS of React.js, so I wanted to test my skills so far so I made this project! Shared it on my blog and some people started using it for studying (which made me so happy!) and it became a mini open-source project because random people started adding mini features to the app! Very special project for me! - link 1, link 2, link 3

[codingquill]

Day 1 - 100 Days CSS Challenge

Welcome to day 1 of the 100 Days CSS Challenge! In this challenge, we'll bring a design to life using only CSS. Our goal is to recreate the image we're provided with on the challenge page using HTML and CSS.

On the challenge page, we see:

A small preview of the design we need to replicate.

A starter HTML template.

A submission form to showcase our work alongside others who have taken on the same challenge.

Let's dive into the process step by step.

Step 1: Screenshot the Image

The first thing I always do is take a screenshot of the target design. Even if the design includes animation, having a static reference helps me focus on the basic structure and colors. Here’s the screenshot of the design we’re aiming for:

Step 2: Extract the Color Palette

Next, I identify the color palette that we'll need. This helps ensure that we maintain consistency with the original design. Here’s the color palette I’ve created:

Step 3: Identify and Create the Image Elements in HTML

Now that we know the colors, I break down the elements in the image:

Background: This is a linear gradient.

The 100 number: This is the main challenge, and it will require some work.

Text: “days css challenge,” which we’ll place to the left of the number.

Here’s the HTML structure for these elements:

<div class="frame"> <div class="center"> <div class="number"> <div class="one-one"></div> <div class="one-two"></div> <div class="zero-one"></div> <div class="zero-two"></div> </div> <p class="sentence1">days</p> <p class="sentence2">css challenge</p> </div> </div>

Now that the elements are in place, CSS will bring them to life.

Step 4: Bringing the Elements to Life with CSS

Linear Gradient

To create the background, we’ll use a linear gradient. Here’s a basic syntax:

background: linear-gradient(to <direction>, <color-stop1>, <color-stop2>, ...);

Parameter 1: Direction/Angle

This defines the starting point of the gradient. You can either specify a direction (e.g., to top, to bottom) or an angle (e.g., 90deg, 180deg).

Direction options:

to top

to bottom

to left

to right

If you want more precision, you can specify angles:

0deg: Gradient starts from the top.

90deg: From the right.

180deg: From the bottom.

270deg: From the left.

You can also combine two directions, specifying both horizontal and vertical movements, like to left top or to right bottom. This means:

The first keyword (left or right) controls the horizontal movement.

The second keyword (top or bottom) controls the vertical movement.

For example:

background: linear-gradient(to left top, red, blue);

This gradient starts at the bottom-right corner and transitions toward the top-left.

Parameter 2: Color Stops

Color stops define how the gradient transitions between colors. Each color stop specifies a point where a color starts or ends. Here's an example:

background: linear-gradient(to right, red 10%, blue 90%);

This means:

The element starts at 0% fully red.

By 10%, the transition from red begins.

Between 10% and 90%, there is a smooth blend from red to blue.

At 90%, the transition to blue is complete, and the remaining part is fully blue.

Once we understand the concept, we can apply the background we need. In our case, the gradient flows from the bottom left to the top right, so the code will look like this:

background: linear-gradient(to right top, #443DA1, #4EC3C9);

Bonus: Stacking Multiple Linear Gradients

You can also apply multiple gradients on top of each other:

background: linear-gradient(180deg, #f00, #0f0), linear-gradient(90deg, #ff0, #f0f);

Step 5: Making the "100" Number

Creating the Zeros

We start with the zeros. These are simply circles created using CSS. To make a full circle, we use border-radius set to 50%.

The white border gives it the appearance of the number zero.

.zero-one, .zero-two { position: absolute; height: 100px; width: 100px; border-radius: 50%; border: 24px solid #fff; box-shadow: 0 0 13px 0 rgba(0,0,0,0.2); }

This gives us a nice circular zero. We adjust their positions using properties like left and top, and manage the z-index to make sure the zeros stack correctly.

.zero-one { z-index: 8; left: 17px; } .zero-two { z-index: 6; left: 100px; }

Now both zeros are positioned, and they overlap in the way we want.

Creating the "1" Number

The number "1" is made of two div elements:

One-One: This part represents the slanted part of the "1".

One-Two: This is the straight vertical part of the "1".

What make the one-one element slightly slanted is

transform: rotate(50deg);)

the one-two is created simply with a little height and width nothing too particular then it is placed directly on top of the slanted part, giving us the full "1". Its z-index tho has to have a higher value than the slanted part of our 1 to ensure it stays above the slanted one.

Step 6: Adding the Text

For the two sentences “days” and “css challenge,” the styling is basic CSS. You can achieve the look with just a few font changes, some padding, and adjustments to font size. It’s as simple as:

.sentence1,.sentence2{ text-transform: uppercase; margin:0; padding:0; } .sentence1{ font-size:82px; font-weight:700; } .sentence2{ font-size:25px; font-weight:700; margin-top:-20px; }

And just like that, we’ve completed day 1 of the 100 Days CSS Challenge! Each part of the design is carefully crafted using CSS, giving us the final result.

Happy coding, and see you tomorrow for Day 2!

[ivyshaperr]

12 Crazy ChatGPT Tricks That Blew My Mind

I asked ChatGPT to build me a personal portfolio website. Not only did it give me the HTML and CSS, but it also included animations, responsive design tips, Read more...

[divinector]

CSS Rainbow Text Animation

[codingflicks]

Animated Typewriter Text

[codenewbies]

CSS Hover Animation

[hua-fei-hua]

we really could've had it all once industry started to officially license and release anime and manga in the west. we could've made the sequel to .ass files, or made professional standard quality software to improve the editing experience for their frankly janky-ass markup and formatting. we could've had tools to make burning styled subs to videos easier, or better yet we could've made rendering and styling subtitles more of a thing in html/css/js for browsers to maintain the flexibility of softsubbing.

but mostly, i'm thinking abt how cool it would've been for the norm in overseas anime releases to have the licensing company commission graphic designers to make custom fonts to match the subtitle styles to the texts and vibes in the anime itself.

[shivanijoya]

Importance of Learning Web Development

"I Never Thought I’d Learn Web Development... But It Kinda Changed Everything."

Hey. So this post isn’t some techy rant or a “how-to-code-in-30-days” kind of thing. It’s just me, talking about something I started learning with zero expectations — and ended up kinda falling in love with: web development.

🧠 At First, I Was Like: “This Is Not For Me.”

I wanted to build my own website — nothing fancy. Just a space that looked and felt like me. So I googled "how to make a simple website". Then… things kind of spiraled (in the best way possible).

🌱 What I Learned (And Why It’s More Than Just Code)

HTML & CSS weren’t as terrifying as I thought. It’s literally like telling the browser: “Hey, make this text bold,” or “Can you move this to the center, please?”

JavaScript is where the magic happens. It makes your site do cool things like sliders, animations, and “click here to reveal more” vibes.

And there’s something weirdly satisfying about fixing a bug that was driving you insane for hours and finally seeing everything work.

But most of all? It gave me control.

I stopped feeling like the internet was this big scary machine I couldn’t touch. Suddenly I was building things, fixing things, customizing things.

✨ Why I Think Everyone Should Try It

Want to start a blog? Make your own portfolio? Build a cute little fandom site? You can.

Want to freelance or earn on the side? People need websites, and most are willing to pay for one that doesn't suck.

Want to feel like an actual wizard who can shape the internet? That’s legit what it feels like sometimes.

Even if you don’t wanna be a full-time developer — the confidence and creative freedom you get from learning web dev? 100% worth it.

💻 You Don’t Have To Be “Techy” To Start

I still mess up code. I still Google things like “why is my div floating into space.” But guess what? That’s part of the process.

You don’t need to be a genius. You just need to be curious. And okay with making ugly things before they become beautiful.

🎨 Especially If You’re a Tumblr Person…

If you’ve ever spent 3 hours customizing a Tumblr theme… you’re halfway there already. You get aesthetics. You get layouts. Web development just helps you bring those ideas to life, exactly how you want.

TL;DR:

I thought web dev was scary. I was wrong. Now I kinda love it. You might too.

If anyone’s curious where to start or needs simple beginner-friendly resources (that don’t suck), I’m more than happy to share what helped me. Or if you just wanna talk about making your own site or blog layout — hit me up 💬💗

Let’s make the internet more us, yeah?

[fishing-ball-z]

also are these from a mugen character set? (i do not go here but i am interested)

Um i actually don't know anything about mugen or fighting games so i'm not sure how to answer this so i may as well take advantage of this to just describe everything i'm doing.

Everything has been from HyperDBZ Indigo (although there's more excellent dbz mugen in the mugenarchive i'm sure). you can actually find the game on archive.org and dig through the files there if you don't want to install it (free!!!!) from their site or something. here's what the actual ingame character select looks like

and this is what the chars directory looks like under the main HyperDBZIndigo directory. they're all playable characters that i can pull sprites/animations from..!

for pretty much every character theres

/files/, which contains a bunch of meaningless binary/text files only used with the mugen engine itself or a mugen editor like Fighter Factory. in here is the sprite and animation files that is used during actual gameplay. plus like, audio

/!HyperDBZ\ Movelist\ [character name]/, which contains the html/css for the game's manual. can find some pngs of cute sprites here but i think they're redundant if i have the actual gameplay sprites

/Palettes/, which contains more readable-by-mugen-only files for recoloring sprites. sometimes these folders have normal pngs you can look through. the devs probably used regular pngs to like, brainstorm or showcase or something

and /states/ which is game config stuff. contains a bunch of random shit ! and quotes ! here's quotes for 18