Category Archives: CSS Tips and Tricks

If you are dealing with empty tags in WordPress you have come to the right place. I have a very simple solution for you to carry out. Thanks to CSS3 we have a selector that will look for anything that is empty in your website and put a “display:none” commend to those empty tags. Dealing Read More

Do you want a KALEIDOSCOPE CSS JAVASCRIPT ANIMATION IN WORDPRESS? Check out the script below. This is a script written in JavaScript and CSS. It can tantalize the visual senses for a while. What is even more cool is that you can use your own pictures just by dragging and dropping them into your webpage. Read More

This tutorial will be on setting up a cursor pointer in CSS. There are many methods to setting up a cursor pointer in CSS. A webmaster or web developer can virtually set up unlimited amounts of pointers in CSS. Below is a list of cursor styles in CSS that you can easily implement. Hover over Read More

To Make a Smiley Face in CSS the first thing that we will do is set up the div’s. We will call our main div id smiley. We will then add div’s for the eyes and mouth. Here is the div structure. Main Div = smiley Left Eye = leye Right Eye = reye Mouth = Read More

Many times there are clients that want to know how to apply a CSS hover effect in their website. This is an easy process when done with CSS. First we will write a div tag and give it an id. We will call our example of a CSS hover effect hover. <div id=”hover”></div> Now we will Read More

The first thing that we will do is set up or div to create a facebook icon in CSS. [code]<div id="facebook"></div>[/code] Next we will style the css. [code]<style> #facebook { background: blue; text-indent: -999em; width: 100px; height: 110px; border-radius: 5px; position: relative; overflow: hidden; border: 15px solid blue; border-bottom: 0; } #facebook::before { content: "/20"; Read More

This is how you make a trapezoid in CSS. First you want to set up the div. We will give our div an id of trapezoid. [code]<div id="trapezoid"></div>[/code] Next we will style the div in our CSS. [code]<style> #trapezoid { border-bottom: 100px solid lightBlue; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: Read More

To make a diamond in CSS first set up the div. We are going to give our div an id of diamond so we can target it with our CSS style. [code]<div id="diamond"></div>[/code] Next we will apply the style in the HTML. with our style tags. [code] <style> #diamond { width: 0; height: 0; border: Read More

If you want to make a hexagon in CSS first set up your div. We are going to give our div an id of hexagon. [code]<div id="hexagon"></div>[/code] Next we will style the div with css. [code]<style> #hexagon { width: 100px; height: 55px; background: brown; position: relative; } #hexagon:before { content: ""; position: absolute; top: -25px; Read More

To make an octagon in CSS first we need to set up a div. We are going to give our div an id of octagon. [code]<div id="octagon"></div>[/code] Next we will insert the style for the octagon in our css stylesheet. [code]<style> #octagon { width: 100px; height: 100px; background: gray; position: relative; } #octagon:before { content: Read More

Make a Pentagon in CSS. Set up a div in your html page and call it pentagon. [code]<div id="pentagon"></div>[/code] Next we will style the div in our CSS to create the pentagon. [code]<style> #pentagon { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: pink transparent; } #pentagon:before { content: ""; position: absolute; Read More

Set up a div and call it oval. This will set up or CSS command to target the div. [code]<div id="oval"></div>[/code] The next thing to do is set up is the style tag for our oval. We are doing basically the same thing that we did in the circle for CSS but we are giving one Read More

To make  a circle in CSS the first thing that we do is set up the div. We will give our div and id of circle. [code]<div id="circle"></div>[/code] Next we will enter or CSS commands to make it a circle. We will color our circle yellow! :-). They key factor here is that we are using Read More

The first thing we will do is set up our div and we will call it star. [code]<div id="star"></div>[/code] Next we will add the CSS to give us a purple star. [code] <style> #star{ width: 0; height: 0; border-style: solid; border-width: 0 100px 100px 100px; border-color: transparent transparent purple transparent; } #star { margin: 50px Read More

Making a triangle is a little harder than making a square or rectangle in CSS. Here is what you do. First set up your div, we are going to give our div and id of triangle. [code]<div id="triangle"></div>[/code] Now we will add the CSS for the triangle. [code]<style> #triangle{ width: 0; height: 0; border-style: solid; Read More