4 CSS Tips and Tricks for the Do-It-Yourself Web Designer

In Entrepreneur Advice, Web Design by Abel Nunez0 Comments

It’s no secret that software like WordPress, Concrete5 and online based programs like WIX and 1&1 have made it possible for entrepreneurs and small business owners from different industries to build their own websites. Whatever your reason may be for going the do-it-yourself route in place of hiring a professional I applaud you for venturing out of your comfort zone. While I’m aware that there are a ton of WYSIWYG (What You See Is What You Get) and drag-and-drop web builders on the market, the software alone doesn’t guarantee an aesthetically pleasing outcome. In other words, not everyone has the creativity or the know-how to make a website look as professional or as eye catching as someone with years of UI (user interface) and graphic design experience. But no worries, I’m about to drop some knowledge to help you bring your web design skills up a notch.

If you’re using a program that provides you with the ability to add some custom code, or if you’re brave enough to code out your site using HTML and CSS, then you have an advantage over those that don’t have these capabilities. If you have the ability to tweak the code on your site it’ll more than likely be through one of two ways- an option in your user dashboard or through the use of FTP or SFTP upload using a program like FileZilla.  Sidenote: If you have the ability to load files through an FTP site and are looking for a good text editor I recommend Sublime.  For those of you unfamiliar with CSS it stands for Cascading Style Sheets and just like the name implies, they are sheets, or files, within your website where the instructions for the styling (look and feel) of your site can be found. By linking CSS and HTML files together you can change everything from background colors to font sizes across your entire website by making changes within your CSS files.

Working with Color Opacity using RGBA

You can control the opacity of an element (navigation bar, footer, text, images, etc.) through the use of RGBA in your CSS. RGBA stands for Red Green Blue Alpha and by changing these values you can control the color and/or level of transparency for the elements you are working with. RGBA is one of multiple ways to declare color in CSS and it is my go-to method anytime I plan on using opacity in my designs.

Let’s jump into the syntax for RGBA, when assigning color and opacity to a property your code will be setup as follows:

Property: rgba(<r color value>, <g color value>, <b color value>, <alpha, or opacity, value>);

Color values are between 0-255 and the opacity, or alpha, values are between 0.0-1.0 with 0.0 being fully transparent and 1.0 being fully opaque. The key thing to remember is that all modern browsers support RGBA, including Internet Explorer 9. Older versions of Internet Explorer (IE) don’t support RGBA when trying to use the background-color property (it simply won’t show the color). A workaround is to either use the shorthand property background or use a hexadecimal color instead of RGBA to set a fallback color. While this workaround will ensure the background color is set, this doesn’t fix the level of transparency in older versions of IE. In order to set the opacity level in older IE versions you have to use a gradient-filter but due to the decline in use of older IE’s we won’t go into details.

The image above: RGBA property with an Alpha, or opacity, value of 1.0

Confused yet? Don’t worry, here are some examples starting with the shorthand backhand property:

#sidebar{
background: rgb(255, 0, 0); /* fallback color in RGB*/
background-color: rgba (255, 0, 0, 0.5);
}

If you just want to use the background-color property then it would look like this:

#sidebar{
background-color: #ff0000; /*fallback color in hexadecimal*/
background-color: rgba (255, 0, 0, 0.5);
}

Image Above: RGBA property with Alpha, or opacity value of 0.5

Color Codes, Property and Notes Explanation

We used three different methods to declare a specific color for our #sidebar property in the examples above: RGB, RGBA and Hexadecimal codes. There are sites like Paletton.com that you can use to find the values for any color you’d like to use.

For example, if you wanted to use the color white the values are as follows:

Hexadecimal: #FFFFFF
RGB: (255, 255, 255)
RGBA: (255, 255, 255, 1.0)

Also, in the examples above we were declaring the backgroundcolor for a div property called #sidebar, but you can apply it to any div or class.

We also added notes within our CSS using a pair of forward slashes and asterisks; this is specific to CSS and is ignored by the browser.

For example:

/* You can use this anywhere in your CSS to leave yourself
notes and to help label certain properties for your own 
sanity or to simply help you stay organized. The key thing 
to remember is that once you start writing a note after the
first forward slash and asterisk you have to close your
note with an asterisk and forward slash or else you’ll
break your CSS sheet */

Making Rounded Corners with Border-radius

This is a pretty simple concept, you have a box and you want to round off the corners. Simple right?

Sort of.

The setup is pretty straightforward using the border-radius shorthand, you can apply the same value to all corners like this:

border-radius: <value>;

or you can give each corner a separate value like this:

border-radius: <top left value>, <top right value>, <bottom right value>, <bottom left value>;

However, to ensure cross-browser compatibility for modern browsers we have to invoke the –webkit and –moz syntaxes and each come with their own naming conventions.

Whoa! What the heck did I just say?

Let’s break this up by starting with the same value for all corners and let’s apply this to an element with a class of round-corners and we’ll declare the border values as well:

.round-corners {
border: 5px solid #FFFFFF;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20x;
}

Image Above: border-radius setting of 20px for rounded corner effect

Next we’ll use a different value for each corner, this is where it gets a little more complex:

.round-corners{
border: 5px solid #FFFFFF;
-moz-border-radius: 10px 9px 8px 7px;
-webkit-border-top-left-radius 10px;
-webkit-border-top-right-radius 9px;
-webkit-border-bottom-right-radius 8px;
-webkit-border-bottom-left-radius 7px;
border-radius: 10px 9px 8px 7px;
}

Now, chances are you won’t be using a completely different value for each corner, but in case you want to do something weirdly creative, the example above shows you exactly how to do that.

What about our beloved older versions of Internet Explorer? They simply don’t support the border-radius property, you’ll have to settle for sharp corners or, if you absolutely have to have rounded corners in older IE versions then you’ll have to incorporate an image-based solution using transparent background PNG files. But again, due to a decline in the use of older versions of IE we won’t go into details.

Shadow Boxing

We used to create drop shadows on elements using image swaps and slicing among other crazy fixes but now you can easily add a drop shadow using the box-shadow feature.

The syntax is as follows:

box-shadow: <position><x-offset>, <y-offset>, <blur radius>;

Let’s break down the values:

Position: by default this value is set to outset and doesn’t need to be stated. You can also choose to use the inset value but you need to declare it.

X-offset (horizontal): this controls the horizontal position of the shadow. A positive value moves it to the right; a negative value moves it to the left.

Y-offset (vertical): this controls the vertical position of the shadow. A positive value moves the shadow below the box; a negative value moves it above. If you don’t declare this value then the blur will automatically be set to 0.

Blur Radius: 0 is the sharpest, and essentially no blur, as you increase this value so will the softness of the shadow’s blur.

The box-shadow property is supported by all modern browsers and even though we have to use the –moz and –webkit prefixes the syntax remains the same. For support in older versions of Internet Explorer I recommend using the shadow filter.

 Let’s use this property on an element with a class of shadow-boxing:

.shadow-boxing{
-moz-box-shadow: 3px 3px 10px #000000;
-webkit-box-shadow: 3px 3px 10px #000000;
box-shadow: 3px 3px 10px #000000;
/* For IE 8 */
-ms-filter: “progid:DXImageTransform.
Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000’)”;
/* For IE 5.5 – 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,
Direction=135, Color=’#000000’);
}

Image Above: box-shadow property example

I didn’t have to declare this an outset shadow because it’s outset by default so in the example above I left out the position value and started with the x-offset value of 3px, followed by the y-offset value of 3px and then the blur radius of 10px. But what about the hexadecimal value of #000000? That’s the shadow’s color value. Yes, you can control the color as well, in this case I made it black but you can choose any color you like.

Shadow Texting

Just like the box-shadow  the text-shadow property adds a shadow to text providing you with cool effects like outer glow, embossed and letterpress.

The syntax for text-shadow is almost identical as that for box-shadow with only one exception: the inset value doesn’t apply.

This property is supported by all modern browsers and just like the box-shadow property you can use the shadow filter for Internet Explorer for better support in older versions.

Let’s use the text-shadow property on a div called shadow-texting:

#shadow-texting{
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=2,
Direction=135, Color=’#000000’)”;
/* For IE 5.5 – 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2,
Direction=135, Color=’#000000’);
}

Image Above: text-shadow property example

I know this might be a bit overwhelming, especially if you have never really worked with CSS but I hope you can implement some of these tips to help spice up a current website or at least get you excited about learning more about CSS to help take some of your do-it-yourself designs to another level.

Leave a Comment