#css text effect

[codingflicks]

Text Focus Blur Effect

[divinector]

CSS Typing Text Animation

[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/

[codenewbies]

CSS Text Animation

[fribly]

Pure CSS Text Wave

Here’s another nice text effect, a pure CSS text wave effect that you can customize and use in your next web project. Continue reading Untitled

[codingquill]

Essentials You Need to Become a Web Developer

HTML, CSS, and JavaScript Mastery

Text Editor/Integrated Development Environment (IDE): Popular choices include Visual Studio Code, Sublime Text.

Version Control/Git: Platforms like GitHub, GitLab, and Bitbucket allow you to track changes, collaborate with others, and contribute to open-source projects.

Responsive Web Design Skills: Learn CSS frameworks like Bootstrap or Flexbox and master media queries

Understanding of Web Browsers: Familiarize yourself with browser developer tools for debugging and testing your code.

Front-End Frameworks: for example : React, Angular, or Vue.js are powerful tools for building dynamic and interactive web applications.

Back-End Development Skills: Understanding server-side programming languages (e.g., Node.js, Python, Ruby , php) and databases (e.g., MySQL, MongoDB)

Web Hosting and Deployment Knowledge: Platforms like Heroku, Vercel , Netlify, or AWS can help simplify this process.

Basic DevOps and CI/CD Understanding

Soft Skills and Problem-Solving: Effective communication, teamwork, and problem-solving skills

Confidence in Yourself: Confidence is a powerful asset. Believe in your abilities, and don't be afraid to take on challenging projects. The more you trust yourself, the more you'll be able to tackle complex coding tasks and overcome obstacles with determination.

[digital-chance]

Neocities Websites for Decor (& Other Resources)

9/4 2:10pm

i've been working on my neocities website and wanted to compile a bunch of places where one can find decor. this is not an extensive list, but rather a bunch of places where you can start finding resources.

please note that various pages could strain the eyes, including flashing lights or colors. pages called 'blinkies' usually have flashing colors throughout. [* = prominent flashing lights]

all websites, resources, and thoughts are beneath the cut

decor

effects for mouse cursors, text, and sites - https://www.mf2fm.com/rv/

assorted decor, images, and more - https://shishka.neocities.org/shishka/toybox

* random gifs from the internet archive - https://gifcities.org

https://pinkukingdom.neocities.org/toybox

http://whimsical.heartette.net/material [has tos you need to follow]

https://cinni.net/?z=/toybox/ [love this website so much]

* assorted early internet graphics - https://www.glitter-graphics.com

https://graphic.neocities.org

https://strawberry-gashes.gensoukai.net/v2/

archived images - https://web.archive.org/web/20100211160439/http://neskaya.net/pixels.php

* https://kawaiiness.net/home.php [potential eye strain]

https://www.asterism-m.com/item/ [japanese site]

https://pixelsafari.neocities.org

https://foollovers.com/mat/index.html [japanese site. has tos]

* https://gothiclolita.neocities.org/materials

https://sozai.pooftie.me [pastels. very low contrast, hard to read warning]

https://scripted.neocities.org

https://arunyi.art/#goodies

https://nonkiru.art/resources

* https://animatedglittergraphics-n-more.tumblr.com / @animatedglittergraphics-n-more

https://drive.google.com/drive/folders/1eQx_UiPvEvI4ZZECoPOuRrLhIE_6XbBy [content guide here... 4k+ gifs and graphics by @topadie]

* https://cutewebgraphics.tumblr.com/directory / @cutewebgraphics

https://pngfarm.tumblr.com / @pngfarm

https://lostsozai.tumblr.com / @lostsozai

decor directories

https://directory.cinni.net/sozai/

https://pixelsafari.neocities.org/links/directory/

https://www.tumblr.com/gender444/680981849679511552/favorite-sozaiblog-materials-sites-fool-lovers

definitions

(for those who don't know and/or are just getting into website creation)

webmaster: person who coded/created the website

favicons: small icons or graphics, usually 16x16 pixels.

pixels: graphics either custom-made or found. i've seen this term used for favicons, adoptables, and other graphics.

emoticons: old term for emojis. typically custom emoji expressions

* blinkies: thin flashing or sparkling banners, usually with text, an image, and flashing lights. collectible.

toybox: collections of favicons, stamps, blinkies, buttons, and more. all up to the webmaster's discretion and preferences

* glitters: glittering or shimmering text or images

stamps: collectible rectangular images, usually 99x56px

buttons: images that are hyperlinked to other websites. often custom-made for one particular webmaster or site.

avatars: typically 100x100 pixel images

other websites

beginner's guide to html and css - https://webguide.neocities.org

dnd style character generator - https://harlekine.neocities.org

templates/themes - https://neothemes.neocities.org

photo editor - https://photomosh.com

rainbow text maker - https://www.glitter-graphics.com/generators/rainbow.php

various other resources - https://scripted.neocities.org

learn more about websites & neocities - https://sadgrl.online

assorted resources - https://www.tumblr.com/punkwasp/725206601551773696/neocitiesindie-webmastery-resources

get started with website creation - https://www.tumblr.com/oddmerit/685644129978499072/note-cause-im-getting-sick-and-tired-of-terfs

all types of resources - https://punkwasp.leprd.space/resources/

* = prominent flashing lights/colors

i suggest not linking back (aka hotlinking) to the resources on the website. instead upload it yourself onto either neocities or an image hosting site and include credit. this way, if the person hosting the image deletes their page or loses the image somehow, your website will still be fine. (i didn't do this and had to find everything all over again... )

i have found that the best websites to use as companions to neocities are w3schools, pinterest, tumblr, and any image hosting site. w3schools for coding tutorials. pinterest for inspiration or for graphics. tumblr for any type of decor and advice. to edit my code and have a live preview, i use codepen.io.

since you read through all this, maybe take a look at my neocities site and follow me! <3

[retrcmoon]

CULPA MIA - MULTIMUSE MUSE PAGE !!!

This page is completely free. Please support me and my work by liking or reblogging this post.

[ INFORMATION ]

THIS CODE IS 100% JAVASCRIPT FREE!!!

This code comes in three versions: one with rules pop up and one without. one version is with filters.

Info on the filter version: For the sake of proper styling, the filters won't work on all browsers! A pic preview can be found here. Further explanations can be found in the code! Please read carefully.

The theme will adjust to (almost) all screen sizes.

All colors and effects are easy editable. Not many colors are needed.

The code offers 2 main links (Home and Ask) but also two free individual links.

Muse boxes come in two versions (with and without text box).

Hover effect on the muse pictures that reveal individual links (the amount of links is up to you!). Links can be easily edited out to remove the hover effect.

Grayfilter & Colored overlay for Muse Pictures available! (Please read in the root section of the css code very closely. It comes with explanations)

[ GUIDELINES ]

Do not claim as your own.

Do not remove the credit!

Do not use as a base code or take parts of this code for your theme.

Feel free to edit as much as you want!

Further credits and inspiration credits can be found in the code.

Click the SOURCE LINK to be redirected to the preview and the code! 

[echo-heo]

Problem with Discord's new (and old) font(s) and its treatment of non-Latin text

Before getting into it, I'm gonna say that I'm not going to criticize its aesthetics or "readability". These feedbacks are rarely helpful from the designer's perspective especially coming from people who don't know much about what goes into designing a typeface, and because readability is really, really subjective.

I was happy to hear that discord was changing its font, especially when I found out that they are adding support for Vietnamese. Previously, discord used Whitney, a humanist sans serif font with Latin, Greek, and Cyrillic support. Unfortunately, Whitney doesn't support all Latin characters in Unicode, and crucially it doesn't support Vietnamese characters.

Text font not supporting a script is usually not a problem, the fallback font will take care of it for you. The problem occurs when there's partial support. Vietnamese uses Latin, but it also has a ton of precomposed vowels with diacritics. This is what Vietnamese looks like on my phone, where the font change hasn't taken effect yet:

here's the same text with unsupported characters highlighted in red:

It might not look that weird because the fallback font on my phone happened to be somewhat similar in style to Whitney, but depending on the device it may be completely unreadable. I submitted a feedback a while ago asking them to address this issue

This is why when I heard that discord was changing its font to add Vietnamese characters, I was excited. This is what the same text looks like in gg sans.

All characters harmonious!

However, after receiving the update I was disappointed because the new font now no longer supports Greek and Cyrillic. This alone is not really a big problem, because Greek, Cyrillic and Latin characters rarely occur in the same word. Although it is disappointing that they are no longer harmonious, it's not that big of a problem. The problem though, is that they decided to include Δ, Ω, μ, π (capital delta, capital omega, lowercase mu, and lowercase pi) into the font.

Depending on the device and rendering settings, it might look like it fits well with the fallback font, being almost unnoticeable, or so noticeable that it's hard to read. These four glyphs are often included in typefaces that only support Latin as they are often included in Latin lettersets because of their use in mathematics and science, so I thought it was simply an odd oversight.

Then I found out about this:

(As of 2022/12/3 9:22 pm UTC+9 I couldn't recreate this. It may be because of css setting or because they've already fixed it. I'm hoping it is the latter) They decided to include katakana characters to be only used in the shrug emoticon.

I was massively disappointed when I heard this news because it means they did not care at all about global accessibility when making the new font. I was under the impression that they were doing it at least partially to address this issue. I was under the impression that maybe they've heard us complain and complain about the font only having partial support for Vietnamese. Maybe they've realized the core problem. But no, it's clear that they still don't know what the problem is.

Maybe I should have realized it sooner. Did you know, Discord limits the amount of diacritics that can be attached to a single character, even though in a lot of non-Latin writing systems diacritics are crucial because they represent vowels, consonant clusters, et cetera?

Moreover, did you know that Discord has a limit on how many diacritics you can have in a single message? This means if you have a copy pasta in abugida writing systems such as Devanagari, Thai, Khmer, Lao, Bengali, Burmese, et cetera, the vowel diacritics are just going to disappear after a while, rendering the text unreadable?

Affected portion underlined in red. I assume these are done to prevent zalgo, which really shouldn't be done by Discord itself, not to mention that typical "zalgo" diacritics are usually IPA diacritics with actual use, which can often stack in a zalgo-like fashion.

Did you know that Discord enforces strict text line height, even though some writing systems need more horizontal space than latin to be legible? Anything outside of the bounds are cut off and rendered invisible.

Anyway, do you remember when I said I wasn't going to talk about aesthetics and readability? I kind of lied. I am going to talk about them.

A lot of people seem to be saying that the new font is bad and that it's significantly less readable than the previous font. I have doubts about whether this is actually because of the font itself or because they're simply not used to it yet. My guess would be the latter. However, that doesn't mean the solution is to make these people shut up and wait till they get used to it.

There is no universal solution for readability and legibility. The truth is that different people have different needs, and this is no different when it comes to typefaces. Ideally, discord should provide an option to change fonts. Many platforms do. They've been refusing to implement it because, I dunno, brand image?

There is also a bigger problem with how UI designers design in general. They only design around Latin in mind, even though different writing systems use space differently. Many Brahmic scripts use ligatures and diacritics stacking above or below the main character. If you care about non-Latin scripts not appearing illegible, make it so that UI elements can accommodate for that, or something.

I'm bad at writing conclusions, so there you have it. Me rambling about a thing that I care about that apparently everyone else should too.

[flaringk]

oh it’s the textboxes guy what

Oh wow! Lmfao didn't expect to get recognized for my mspfa, though I guess my name is literally on it.

Yes it's me! The textbox guy, I made/continue to make Flare's CSS Textboxes on MSPFA. A giant asset pack of usable textboxes, menus, text effects, custom modules and even Homestuck Gif Generators! For use in your MS Paint Fan Adventure, or whatever else you'd like, completely free!!

Check Flare's CSS Textboxes here! Check GifStuck here!

[codingflicks]

CSS text Portrait Effect

[divinector]

Gradient Text Animation

[sunseed-fandump]

Sorry to throw another ask at ya like this, but I meant to ask this in the last one.

How did you do that cool text trick in the new chapter?

It's alright! I'm actually really proud of being able to get that effect to work!

It's a little bit of CSS i managed to find! You can find a whole explanation here!

It was a bit of a pain in the ass because every time i wanted to make a new line with that effect, i needed to add a new class to the Work Skin. So the Work Skin Page wound up comically long and looking like this:

i had them labeled as hovertext1, hovertext2, hovertext3 etc.

Also it doesn't like quotation marks. Broke the whole thing because i added quotations out of habit since it was dialogue. so it would be best to format it like "<changing text here>"

But yeah if you want the full details then check out that link!!

[codenewbies]

CSS Text Animation

[hotd-bigbang]

How to Submit Your Story to the AO3 Collection

Please read this guide carefully before submitting your story - we recommend having this page open at the same time, to follow along with, if you have never submitted a story to an AO3 collection before. Ensure that your accompanying artwork is finished and ready to go before submitting, and ensure all works are added to the collection before 23.59pm September 15th.

Please do not submit your story until it is ready - ensure all changes are made in your Word or Google doc. Updates to your fic once placed in the collection result in multiple draft copies, which we have to reject, so please don't submit until you are ready to hit 'post' (please hit 'post' and do not save as a draft - hitting post will successfully submit your fic to the collection and hide it until its reveal date)

Artists, you do not need to do anything. Send your artwork directly to your writer and they will handle the upload.

Step by step instructions below the cut.

To ensure that the artwork in your fic adapts to the right shape and size, depending on whether users are reading on mobile or desktop, you will need to create a workskin - do this first.

Log into your AO3 account and go from Dashboard to Skins

Go to My Workskins and Create Workskin

Choose "Work Skin" if it's not the default

Title whatever you like; description is optional

Type in the CSS code shown below exactly the way it is here:

#workskin img { width: auto; max-width: 100%; height: auto; }

(We recommend copying and pasting, so there are no mistakes)

On the bottom right under "Actions" will be the option to Submit for you, tap/click and you're done!

Once you're done, you choose New Post in the top right of your browser. You fill out the Rating, checkmark the right Archive Warnings, choose the Fandom (i.e. House of the Dragon in this case), the Category that applies to your story, the Relationships and Characters. Last but not least, you put in the Additional Tags (i.e. more warnings, or triggers).

You get to the point where you put in the Title of your story and Co-Creators, this is where you'll list the Big Bang account, more details on this further down. Then follows the box to fill in your Summary. If you want to add a note at the beginning or end of a chapter, you checkmark the option and a box will open. Whatever you write in there, please note it will be gone if you uncheck the box.

Type in "House_of_the_Dragon_Big_Bang_2024" under Post to Collections/Challenges and select the Collection shown in the description.

Under Gift this Work to, you should add your Artist and Beta Reader. As a co-creator, please add hotdbigbang.

Select the This Work has Multiple Chapters if your story has more than one chapter.

And last but not least, you Select your Work Skin before you get to the part where you can paste in your story.

Finally, posting the art to your story within the story:

Choose Rich Text

Tap the image icon

Once you have tapped the image icon, a little box window will open in which you have to insert the Source. Writers, you get the image address to insert from your Artist.

Not all image addresses work, the most effective are from Discord or Tumblr.

Please add an Image Description of the image you are posting, it will be for those who use TTS- text to speech to have someone read the story, that includes visually impaired people, but also those who simply like it to listen to a story. It will be nice for them to hear what they would see in the image. You can be as detailed as you like.

Next is Width and Height, both get automatically generated and even if the image pops up really big when you tap Save, remember you used a Work Skin that will adjust it accordingly for your readers once posted.

Hit submit and you are done! Your fic will remain unrevealed in the collection until your reveal date. We will post the full reveal schedule closer to the deadline.

[amphibianauthor]

Ao3 Coding References

I recently made a code-heavy choose your own adventure fic, and I wanted to compile all of the really helpful resources I've found along the way. I know little to nothing about HTML but having all of these resources were amazingly helpful.

Basics:

This Ao3 Posting Doc converts Google doc into HTML, adding bold, underline, italics, strikethrough, paragraph breaks, and centered text. Major game changer for heavy HTML works

The Fic Writer's Guide to Formatting by AnisaAnisa: This is a masterpost in itself, covering links, images, boxes, borders, fonts etc. So I'm putting it here since it's amazingly helpful

HTML References by W3 schools- I've linked the HTML colors here, but this is a platform designed to help people learn/reference HTML

This got long: Text resources, fancy formatting & other website formats below the cut

Text resources:

Font's chapter: The Fic Writer's Guide to Formatting: okay I know I already linked it above, but listen it's very good so I'm linking again

Fonts colors and work skins oh my by Charles_Rockafeller takes fonts to a different level.

Multicolored text skin by ElectricAlice GRADIENT TEXT

All the Emoji by CodenameCarrot while Ao3 has signifigantly improved on hosting emojis, this code helps with using some more unconventional emojis. Amazing resource.

Upsidedown text and Zalgo text generators - these specific text generators allow for you to see their direct HTML codes

Workskin for showing and hiding spoilers by ElectricAlice makes text appear when hovered/clicked. Amazing for Trigger Warnings

Make text appear when you click [Work skin] by Khashana clickable end notes buttons for your work, similar to the spoiler button text

Desktop/mobile friendly short tooltips workskin by Simbaline

How to make Linked Footnotes on Ao3 by La_Temperanza

User-selectable Names in a Fanfic work by fiend Ever want people to select between different names in a fanfic? I could also see this used as ability to switch gender in a fanfic.

AO3 Comic Text Effects using CSS by DemigodofAgni Ever want a giant comicbook POW in your fic?

How to override the Archive's Chapter Headers by C Ryan Smith

Fancy Formatting:

Embedding youtube videos on ao3 to scale with the screen by pigalle add youtube videos mid fic

Conlangs and Accessibility by Addleton this fic instructs how to have accessible translations in fic

How to mimic letters, fliers and stationary without using images by La_Temperanza Really helped with box formatting

Decorations for Fic (HTML/CSS): Fanart, Dividers, Embedded Songs and More by Jnsn this has SO MANY cool coding features, including a chessboard that moves when you hover over it

How to make a News Website Article Skin on Ao3 by ElectricAlice

Screenplay skin by astronought

How to make custom Page Dividers by La_Temperanza

How to make Images Fit on Mobile Browsers by La_Temperanza great image adding code

How to Wrap text around images by La_Temperanza image text wrapping

How to insert Gmail emails in your fic by DemigodofAgni

How to mimic Email Windows by La_Temperanza

How to make a Choose Your Own Adventure Fic by La_Temperanza allows for clickable links and hidden text.

Personal Experiment with HTML and CSS by MohnblumenKind This has a variety of help, Chapter 6 & 7 were great for choose your own adventure, Chapter 4 talks about columns and skins, and Chapter 10 even has a newspaper made entirely from site code.

Learn to Microsoft Excel by ssc_lmth insert a spreadsheet in your fic

Ao3 Work skin: a simple scoreboard by revanchist shows how to code a scoreboard

Colossal Cave Adventure by gifbot Working Keyboard anyone?

How to make a rounded playlist by La_Temperanza Ever want to show a character's music playlist within your fic

Tabbing experiment by gifbot (clickable tabs)

Repository by gaudersan google searches, ao3 stats, instagram and text messages galore

Workskin for in Universe Investigative/Mission Report with Redaction by wafflelate case files/CSI reports

CSS in Testing/Bleed Gold by InfinitysWraith Masterclass in cool formatting, including overidding default headers, Doors opening animation, Grid interactive photos, Hovering to change a photo, Retroactive text etc.

CSS in Testing:Second in Series by InfinitysWraith: Interactive keypads, Mock news site and interactive locking mechanism.

Other Websites:

Texting

--How to make iOS Text Messages on Ao3 by CodenameCarrot, La_Temperanza

--A Quick Generator for Embeddable iOS Text Messages by 221b_ee

--imessage Skin by Adzaema

--Retro imessage by Adzaema

--Basic Text Message Work Skin by ProfessorMotz

-- Bubble platform [workskin] by Khashana

Tumblr

--Tumblr style CSS Tweaks by Aposiopesis

--Ao3 Workskin Testing and Tutorials by junietuesday25 tumblr DM

--How to make Tumblr Posts on Ao3 by phyyripo

Twitter

--Repository - Twitter by gadaursan

-- How to mimic Social Media in an Ao3 work by aerynevenstar

--Twitter Work Skin Template by etc e tal

--Twitter Workskin: Tweets and Profile by starskin

--Twitter Mock-Up by TheBrookesNook

Ao3

--How to mimic Authors notes and Kudos/Comment Buttons by La_Temperanza

--How to mimic AO3 Comments by bittermoons

--How to add mobile Ao3 in your fic by DemigodofAgni

--How to make a fanfic style header Ao3 style by ElectricAlice

Facebook/Instagram/Whatsapp

--Whatsapp Group Chat builder by FestiveFerret

--How to make Facebook Messenger Chat on Ao3 by ran_a_dom

--Whatsapp Work Skin Template Revamped by etc e tal

--Whatsapp group chat skin by ovely

--Instagram DMs for Ao3 by monarch_rhapsodies

--How to make Instagram DM mockup by xslytherclawx

Snapchat

--Snapchat skin by Azdaema

--Snapchat Template for Ao3 by starskin

Reddit/Forum

--UPDATED Reddit Skin by diamine

--2020 Reddit Work Skin by timstokerlovebot

--Reddit Work Skin CSS & HTML by knave_of_swords

--How to mimic Social Media in an Ao3 work by aerynevenstar

--template Reddit Skin by spookedcroon

--Ao3 workskin for Forum Thread by fencesit

--How to mimic 4chan posts without just taking screenshots of 4chan

Twitch/Youtube

--Mimicking Twitch Chat for fics by Ultraviollett

--Workskin testing by tohmas [Youtube comments]

Discord/Slack/Zoom

--2023 Discord Theme Workskin by TrojanTeapot

--Discord Work Skin by unpredictableArtist

--Discord (Dark Theme) Workskin by Heterochromia_Mars

--Ao3 Workskin Testing and Tutorials by junietuesday25

--Slack Workskin by Khashana

--Zoom inspired Ao3 skin by mystyrust

Video Game Dialog Mimics

--Dialog [workskin] by Clover_Zero

--Dialogue Workskin (with parallax BG effect) by mystyrust

--My S Ranks--System Windows by unpredictableArtist [computer dialog workskin]

--Tutorial: Ace Attorney Work Skin by QuailFence

--Among Us Ao3 skin by mystyrust

--How to Mimic Undertale Fonts on Ao3 by La_Temperanza

--Tutorial:Rain Code Work Skin by faish

Misc. Sites

--How to mimic Deadpool Thinking boxes by La_Temperanza

--FetLife Skin [Work Skin] by Khashana

--Replika workskin by FaeriMagic

--Disco Elysium workskin by SarunoHadaki

--StarTrek PADD workskin by duskyspirit

--Wikipedia article work skin by styletests

--Yelp Reviews by kiwiana

--Amazon Reviews by kiwiana

--MDZS-themed letters by allollipoppins

--A Newbie's Guide to Podficcing by Adzaema [skin for podfics]

Bonus: Ever wanted to see how crazy HTML can be on AO3? Try playing But can it run Doom? or Tropémon by gifbot

Happy Creating!

Last updated: Aug 19 2024