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

CSS Code

.example {
   opacity: .6;
}

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

CSS Code

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

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

CSS Code

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

---

ROUNDING CORNERS

CSS 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.

CSS 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.

CSS Code

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

---

SOME SIMPLE TEXT EFFECTS
#1 3D TEXT

CSS 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

CSS 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.

CSS Code

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

#2 Radial gradient.

CSS 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

CSS Code

html {min-height: 100%}