Ah, ombre! I see this "dip dye" style everywhere, from cakes to dresses to hairstyles, and I think it makes a beautiful backdrop for a simple set of social media links.
In this three-part tutorial, I'll take you step-by-step through the entire process of creating an "ombre" social media menu for your blog with HTML and CSS. And I really do mean step-by-step; you don't have to know anything about HTML or CSS to use this tutorial.
If this is your first time digging into HTML & CSS, just take it slow and you'll learn a lot :) If you're comfortable with HTML and CSS already, you can jump straight to the source code on CodePen.
What You'll Make
In this tutorial series, you'll learn to make a layered "ombre" social media menu to place in your blog's sidebar or footer. You can a see demo on CodePen.
You'll choose your own colors, fonts, and social media services to make the menu your own. But, if you'd like to use the same colors and fonts as me, I don't mind sharing!
What You Need
All you need to use this tutorial is:
- A blog with the option to add sidebar or footer gadgets/widgets
- The option to add custom CSS to your blog.
Blogger, self-hosted Wordpress, and Typepad Unlimited users, you're are all set!
What You'll Learn In Part One
- How to find the RGB value of your favorite color.
What You'll Learn in Part Two
- How to select & use a free web font from Google's vast font library.
What You'll Learn in Part Three
- How to make a list of links using an HTML unordered list.
- How to position and style your social media menu with CSS.
- How to vary color opacity with CSS.
Ready to pick a color? Let's get to it!
Find Your Color Value
This ombre color effect is created by varying the opacity of a single color, starting from a low opacity and graduating up to full (or almost full) opacity. So, to get started, all you need to do is select one color.
To vary the opacity of the color, we'll need to find its RGB value. RGB is a color model designed to display colors on electronic screens — RGB stands for Red, Green, Blue.
If you have Photoshop, GIMP, or another image editing tool, you can grab the RGB value with the eyedropper tool. If you don't have image editing software, there are three ways to get the RGB value of a color online.
Pull the Color from an ImageTo get your RGB color from an image, use Adobe's Kuler. You'll need to sign up for a free Adobe account to use Kuler (if you don't have one already). Once you've signed up, you can upload an image and select up to five colors from the image.
After you've made your color selections, save the color theme (you can save it publicly or privately). Once the theme is saved, you can access it under Mykuler > Themes. Select your color theme, then click the "sliders" icon at the right to go into the theme editor.
On the next screen, copy the RGB value for the color you'd like to use on your social media menu (click to enlarge the pic).
If you use Firefox or Chrome, you can use Colorzilla to pick a color from a page on the web. Make sure to set the "Auto Copy" setting to "rgb" to pick the RGB value of your color.
If you already know the HEX number of your color, you can pop it into this online Hex-to-RGB converter.
The Next Step
Now that you know the RGB value of your favorite color, you're ready to select and install a free Google Web Font.
Readers' Buttons
I have a little gallery of readers' buttons on my Google+ page. Check them out for color & font inspiration!
