Click image to return to Mythodreas

Coding 101

HTML Guide
CSS Guide
More Effects

Fancy Text | Fancy Image

Additional Effects




So you're somewhat knowledgeable in HTML and CSS now, right? Okay, let's get into some nice effects to add a little bit of pizzaz to your profile or homepage!
In this tutorial we will learn more about text graphics, picture graphics/edits, cursor graphics, videos, and music.


Text First, let's start off with text. Let's recap. To have fancy text we can start off a font tag before the text... <font color = "RED" size = "3">TEXT</font>
Now let's add some fanciness!
<font face="verdana" color="green">This is some text!</font> This is some text!
<style> p { font-variant: small-caps; color:powderblue; font-style:oblique; text-shadow: 1px 1px MAROON; }</style> <p>This is some text</p>

This is some text


Font-variant does not have many choices. The important properties to know are normal and small-caps.
Color of a font can be the word or a hexidecimal.
Font-style refers to italics, bold, underlined, etc.
Text-shadow can have 1 or 2 measures and these measures can be equal or different. The color is the text's shadow and can be a word or a hexidecimal.


Now how about a fancy image or two?
<img src=/images/characters/shopkeepers/Eir_Apotokeri.png height=100 width=100 style=border-radius:150px;> vs <img src=/images/characters/shopkeepers/Eir_Apotokeri.png height=100 width=100> vs
<style>div.polaroid { width: 50%; background-color: transparent; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-bottom: 25px; }</style><div class=polaroid><img src=/images/characters/minions/Vaatee.png height=100 width=100></div> vs <img src=/images/characters/minions/Vaatee.png height=100 width=100>
vs
<style> div.test { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ }</style><div class=test><img src=/images/characters/minions/Zugaikotsu.png height=100 width=100></div> vs <img src=/images/characters/minions/Zugaikotsu.png width=100 height=100>
vs
.blur {-webkit-filter: blur(4px);filter: blur(4px);} .brightness {-webkit-filter: brightness(250%);filter: brightness(250%);} .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);} .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);} .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);} .invert {-webkit-filter: invert(100%);filter: invert(100%);} .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);} .saturate {-webkit-filter: saturate(7); filter: saturate(7);} .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);} .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);} <img class="invert" src="/images/characters/minions/Vaatee.png" width="100" height="100"> You can also apply filters. Let's use the invert filter.

To learn more about image effects and properties, check out W3Schools CSS Images!