[Tutorial] CSS3 compilation

[Borealis]

Short & easy set of tutorials that might help you to get most of CSS3.

---

---

TRANSPARENCY

#1 Here .6 represents 60% opacity (40% transparent)

Code:

.example { opacity: .6; }

#2 Here rgba stands for Red-Green-Blue-Alpha, and the last option is what we need

Code:

.example { background-color: rgba(255, 96, 0, 0.6); }

#3 We can use hsla as well (Hue-Saturation-Lightness-Alpha)

Code:

.example { background-color: hsla(23, 100%, 50%, 0.6); }

---

ROUNDING CORNERS

Code:

.example { border-radius: Xpx; }

Where X is your number of pixels

---

SHADOWS
#1 Drop shadow on text (h3 will be used as example). #999 is colour code (light grey currently). Next two pixel values are horizontal and vertical offsets and last one is blur.

Code:

h3 { text-shadow: #999 2px 2px 4px; }

#2 Drop shadow on content (box). Everything is the same as in text shadow, but the last value is added, which is spread distance.

Code:

.example { box-shadow: #999 2px 2px 20px 5px; }

---

SOME SIMPLE TEXT EFFECTS
#1 3D TEXT

Code:

h3 { color: #ff80000; text-shadow: #ff5500 1px -1px 0, #ff5500 2px -2px 0, #ff5500 3px -3px 0, #ff5500 4px -4px 0, #ff5500 5px -5px 0, #ff5500 6px -6px 0, #ff5500 7px -7px 0, #ff5500 8px -8px 0, #ff5500 9px -9px 0, #ff5500 10px -10px 0; }

#2 ANAGLYPHIC TEXT (You may have to adjust some settings yourself, it is not the same for all text). All should be changed to your value. The code is very adjustable, you can edit it up to your taste easily. However, these settings work best for me

Code:

h3 { position: relative; font-size: px; font-family: sans-serif; letter-spacing: -5px; color: rgba(0, 0, 255, 0.5) } h3:after { content: "Your Text"; position: absolute; left: px; top: px; color: rgba(255, 0, 0, 0.5); }

---

GRADIENTS
Simple nice-looking gradient. For better ones you can use http://colorzilla.com/gradient-editor/

#1 Linear gradient. Top is origin, color at origin, percentage of page, color at end, percentage.

Code:

html { background-image: linear-gradient(top, #000000 20%, #ffffff 80%); }

#2 Radial gradient.

Code:

html { background-image: radial-gradient(center center, circle contain, #ffffff 0%, #000000 100%); }

#3 You can have small problem - the gradient added that way may be not covering whole page, but around 80% and another 20% will be same gradient but repeated again, which does not look nice. To prevent this happening simply add

Code:

html {min-height: 100%}