Custom CSS Tutorial Part 3 | Gradients Backgrounds and Custom Shadows

Introduction to Gradients

I’m going to show you other things you may not be able to get from the regular theme editor! First, let’s talk about Gradients. In case if you don’t know what a gradient is. This is a gradient:

To describe it, the top color is blue and the bottom color is green, so it makes a smooth background out of it! I’m going to show you how to make this your background of your edublog.


Gradient CSS Code

To create a gradient you need to type the following. You can use any colors you want but this should give a nice subtle lightblue gradient!

body {

    background: lightblue;

    background: linear-gradient(#F2FFFF, #B5F2F2);

}

The reason why we first type in a regular background first is that in case if a browser does not support the gradient (Which is a CSS3 only element) then it will use the regular color instead. The gradient should show up in the browsers: Google Chrome (Version 26.0 or higher), Internet Explorer, and Microsoft Edge. But we want our gradient to show up on all of the major browsers so type the following (Note, I includes notes which each one supports, if your version is higher than the one specified, it will use the standard):

body {

    background: lightblue/* For browsers that do not support gradients */

    background: -webkit-linear-gradient(#F2FFFF, #B5F2F2)/* For Safari 5.1 to 6.0 */

    background: -moz-linear-gradient(#F2FFFF, #B5F2F2)/* For Firefox 3.6 to 15 */

    background: -o-linear-gradient(#F2FFFF, #B5F2F2)/* For Opera 11.1 to 12.0 */

    background: linear-gradient(#F2FFFF, #B5F2F2); /* Standard syntax */

}

Now the gradient should now show up in browsers that use Webkit (Which includes Safari, IOS Browsers, and many other smaller ones), Firefox, and Opera!

If you want to have a horizontal gradient, replace linear with radical!

You can also add more than 2 colors just by adding another comma and another color


Introduction to Custom Shadows

Shadows are cool! They are pretty simple and easy to customize! First, Text Shadows! We have already seen these so let’s expand on it!

First, text-shadow takes 2 arguments, the first one is the horizontal position of the shadow relative to the text and the second is the vertical position! But what’s cool is that we can add a third argument, which is how blurry the text is

By doing this you can create a glow effect under the text. The last argument we can add is the color!

Let’s create a cool text glow that will only affect the blog title:

h1.site-title {

    text-shadow0 0 5px #1ac6ff;

}

Now let’s talk about Box Shadows. Like Text Shadows, they are pretty self explanatory: they create a shadow for the box properties. Depending on your theme, you can make shadows for stuff like your posts, widgets and comments. To create a simple box shadow:

article {
    box-shadow: 5px 5px;
}

This will add a shadow to your article boxes! Once again, we can use the next 2 arguments to determine the blurriness and color of the shadow:

article {
    box-shadow: 5px 5px 4px #999;
}

This will create a nice looking shadow to give the article more depth to give it a 3D look!

Thank for reading this tutorial. I might make more but unfortunately, edublogs limits a lot of what CSS can really do.

Leave a Reply

Your email address will not be published. Required fields are marked *