Skip to main content
CSS is fun and cool and I like it.

The Trick to Animating the Dot on the Letter “i”

Here’s the trick: by combining the Turkish letter "ı" and the period "." we can create something that looks like the letter "i," but is made from two separate elements. This opens us up to some fun options to style or animate the dot of the letter independently from the stalk. Worried about accessibility? Don’t worry, we’ll cover that the best way we know how.

Let’s look at how to create and style these separate "letters," and find out when … Read article


CSS Triangles, Multiple Ways



Special Characters
" " " quotation mark u+0022 ISOnum p:before { content:"\0022"; } alert("\42")
& & & ampersand u+0026 ISOnum p:before { content:"\0026"; } alert("\46")
&lt; &#60; < less-than sign u+003C ISOnum p:before { content:"\003c"; } alert("\74");
&gt; &#62; > greater-than sign u+003E ISOnum p:before { content:"\003e"; } alert("\76");
Latin-1 entity set for HTML
&nbsp;   &#160; no-break space %A0 p:before { content:"\00a0"; } alert("\240");
&iexcl; ¡ &#161; inverted exclamation mark %A1 p:before { content:"\00a1"; } alert("\241");
&cent; ¢ &#162;
Read article