Another experiment I delved into was creating a drop cap- you know, the fancy big letter before a paragraph starts. Messing with the text spacing was definitely the most annoying part, but like with the text shadow animations I had fun making something I thought looked pretty.
Here’s two examples of the same drop cap I created, with some filler text about a series I like and describing some of what I did to create it!
A Magical Series
Witch Hat Atelier is a fantasy manga series by Kamome Shirahama starring a young girl named Coco, who is abruptly thrust into the world of witches after a tragic encounter with magic. Qifrey, her mentor, breaks the rules of secrecy to bring her into the fold as one of his apprentices instead of erasing her mind of all memory of the magic she accidentally performed, and as she trains to one day reverse the spell she cast on her mother, she meets and befriends his other apprentices: Tetia, Richeh, and Agott.
Thoughts
So this has shown me multiple key skills: firstly, how to make a drop cap using ::first letter; second, how to use ::first-line to affect the first line of text in addition to the fancy first letter; third, how to give a short piece of text- in this case a letter- a gradient effect by clipping a background-image gradient to the text; and finally, how to give that gradient text an offset shadow using filter: drop-shadow() instead of text-shadow!