CSS Tips: How To Create Buttons Using CSS

cssbuttonsA long time back buttons were all the rage because it took some pretty nifty javascript knowledge to make them work. But that’s changed thanks to the power of CSS.

Buttons can be highly effective ways of highlighting links on your website, or displaying a “call to action”. In my experience people are often drawn to buttons more than standard links.

There are a few different ways you can use CSS to create buttons. The method that I tend to use most (and one of the simplest) is by using CSS to created class on an A tag.

The CSS Code:

a.button {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #CCC;
padding: 2px;
text-decoration:none;
text-align:center;
}

a.button:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

The HTML Code:

<a class=”button” href=”#”>Button</a>

Explanation:

First of all you will notice that there are 2 elements to the CSS.

The first is the actual styling for the A tag. This is the core design of the button, including the width, colors, shading etc. You will notice that I have given my elements a class called “button” by adding .button after the a in the CSS. This enables you to create multiple buttons of different styles using different class names (button1, button2, orangebutton, bigbutton, etc). In the code I have used i’ve set the background to light grey with a solid background that will be 8am wide. Virtually all this CSS is fully customizable. In fact, the only thing that you should keep intact is the “display:block” section.

The second section of the CSS refers to the hover effect of the button. What this does is tells the browser what to change after the mouse “hovers” over the element. Again, you will see i have connected it to the same class as the first section by giving it the .button class. The top / left elements will move the button slightly on hover and the border will change accordingly to give a hovered 3D effect. Hover over the demo button above to see how this works.

When you add the HTML code to your page, simply give it the relevant class (see code above) to match it all up and create CSS magic!

Want to fancy it up? Try adding rounded corners to the a.button section (ie. border:radius:4px;) to give a web2.0 type look and feel.

Helpful Links:

Webcredible (page includes CSS buttons)
Speckyboy CSS Styled Buttons

Share This:

CSS Tips: Hack To Fix The IE Padding / Border Width Issue

If you’ve used CSS a bit you’ll recognise the problem where Internet Explorer includes the padding and border into the width of the element.  One of the most popular methods to get around this is to use the Box Model hack method.

ieThe problem is that when IE renders the page it often Includes the width of the padding into the element instead of adding it on as many other browsers.  This over the years has caused much frustration.  It would be easier of course if IE just used the same rendering methods as the others, but Microsoft will do what Microsoft does, right?

So, here is another method that I find quite handy from time to time, which i originally found from the great people at Webcredible.  This method uses a second width command in the CSS that is only viewable by IE, allowing you to essentially create an “If Then Else” type method within your CSS (ie. IF you use IE use this code, ELSE use this code).

The CSS (example):

padding: 2em;
border: 1em solid black;
width: 30em;
width/**/:/**/ 26em;

As with most types of code the second command will overright the first command, so as the browsers read through the CSS and read the padding, border etc they will come to a point with 2 width variables.  So how does this work without a) breaking the page or b) causing duplicate CSS styles?

Webcredible sum it up best:

“By placing empty comment tags (/**/) before the colons, IE5.0 will ignore the command. Likewise, by placing these empty comment tags after the colon, IE5.5 will ignore the command. By using these two rules in conjunction with each other, we can hide the command from all of IE5.x.”

Essentially what we are doing is telling 2 different rendering systems to display the content the correct way.  For IE, we’re saying, “hey, display the element 30em wide with an internal padding of 2em on all sides, to display a total width of 30em.”.  Likewhys, for non IE browsers such as firefox, Chrome etc we’re saying “make the element 26em wide and then add another 2em padding onto each side, giving a total width of 30em”. 

The method varies but the outcome is the same.

Share This:

CSS Tips: Box Shadows, Insets and Single Sided

Have you ever wanted to create a framed section of your website with a highlighted shadow style border, but didn’t know how? Well, using one of CSS 3’s great features called “box shadow” you can!

Example:

Example

.boxshadow {
box-shadow: 6px 6px 5px 5px #cccccc;
-moz-box-shadow: 6px 6px 5px 5px #cccccc;
-webkit-box-shadow:6px 6px 5px 5px #cccccc;
}

Browser Compatibility:

You will notice that I include 3 different forms of box-shadow code in my CSS. This is to ensure full browser compatibility among the Firefox, Opera, Safari and Chrome browsers. Internet Explorer requires extra code, which I will mention a little further down.

Explaining The CSS:

There are 5 parts to the Box Shadow code:

  1. Horizontal Offset (ie. 2px). This is the number that will tell the browser where to display the horizontal shadow. A positive number will move the shadow to the right and a negative will move the shadow to the left.
  2. Vertical Offset (ie. 2px). Similar to the horizontal offset, this moves the shadow up or down. A positive figure will move the shadow below the box and a negative number moves the shadow above the box.
  3. Blur Radius (ie. 5px). This allows you to “blue” the shadow to give it more or less detail. Note: this is optional.
  4. Spread Radius / Size (ie. 5px). This displays how large your box shadow is displayed. 0 is used by default. Note: this is optional.
  5. Color. Using different color codes you can specify how your shadow looks.

Insets and Single Sides:

In addition to regular shadow effects, you can use the “inset” feature to add the shadow inside the box instead of outside. The remaining properties remain the same (ie. horizontal, vertical, blur etc).

Inset

.insetboxshadow {
box-shadow: inset 0 0 8px #000000;
-moz-box-shadow: inset 0 0 8px #000000;
-webkit-box-shadow: inset 0 0 8px #000000;
}

From time to time you may also wish to only display a shadow on 1 side of a box. This is done by giving the spread/size a negative number (ie. negative spread radius) which will result in your shadow only being displayed on a single side of the box. Play around with this to see how it looks.

1 Sided

.1sideboxshadow {
box-shadow: 0px 8px 8px -8px #000000;
-moz-box-shadow: 0px 8px 8px -8px #000000;
-webkit-box-shadow: 0px 8px 8px -8px #000000;
}

Internet Explorer Additional CSS:

As with most things IE, they don’t recogise standard HTML out of the box, so you need to add a little extra code to make the magic happen. In this case we need to include a second CSS Div Class. A big thanks to css-tricks.com for helping me with this particular bit of code.

.ieshadow {
margin: 40px;
background-color: rgb(255,255,255); /* Required by IE. RGB 255 = White */
box-shadow: 2px 2px 5px 5px rgba(255,255,255,0.6);
-moz-box-shadow: 2px 2px 5px 5px rgba(255,255,255,0.6);
-webkit-box-shadow: 2px 2px 5px 5px rgba(255,255,255,0.6);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,
ShadowOpacity=0.30);
-ms-filter: “progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,
MakeShadow=true,ShadowOpacity=0.30)”;
zoom: 1;
}

.ieshadow .iecontent {
position: relative; /* This ensures the inner section is not blurred */
padding: 100px;
background-color: #ffffff;
}

Blue Shadow

The HTML code would therefore look like:

<div class=”ieshadow”>
<div class=”iecontent”>
Content
</div>
</div>

As with most things, trial and error will often get you the best results. If at first you’re not happy with the shadow of your divs, edit the css and try new settings.

Helpful Resources:

Css-tricks.com – Box Shadows
CSS Secrets Squidoo Lens

Share This:

CSS Tips: Font Styling Shortcut Rule

html-5-css-style-sheetHave you ever coded CSS and wished you could merge multiple lines into just one?  You can, at least with regards to your font styling by merging your styles into a single line. There are a few rules you must follow in order to use this (details after the code details) but in general it’s a quick and easy way to code your CSS.

Instead of using code such as:

{
font-family: arial;
font-size:1em;
font-style: italic;
font-weight:bold;
font-variant: small-caps;
}

You can include all these into a single line such as:

{
font: italic bold small-caps 1em arial
}

The Rules:

1) You MUST specify BOTH the font-family and font-size properties in order for this to work.

2) The font-family property MUST be the very last item within the CSS.

3) The font-size property MUST be directly before the font-family property.

4) Not specifying the font-weight, font-style properties etc will result in the browser using the default options.  If in doubt, specify the full-styling.

Helpful References:

w3.org font-sizes: http://www.w3.org/QA/Tips/font-size
Webcredible CSS Tips: http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml
Blog Herald: CSS Tips: http://www.blogherald.com/2006/09/08/css-tips-and-tricks/

Share This:

5 Essentials To Building A Successful Online Identity

Whether you’re a business owner looking for new customers or someone simply looking for your own small place online, getting, and having an identity is much easier than you may think.

Here are 5 essentials that you will need if you wish to develop or enhance your identity.

1. A Domain Name That Represents You

If you are serious about getting our own piece of the web, your first stop should always be to secure a domain name.

These days you can get domains incrediby cheap, although I would suggest being picky who you get one from. All of my domains are purchased through the same company I host with, Allynne. There prices are incredibly competitive and less than $10 a year will secure you your own website name. IGS also offer domains for a good price. More on them below.

As for what to get, there really aren’t any hard and fast rules about domain names anymore. I would suggest a .com domain though, and choose words that are directly relevant to your website. For example if you wanted a website about coffee, using words like coffee, brewing, grinding, etc in the domain can always help. See point 4 below for more information.

Feel free to contact me if you require help selecting a quality domain name.

2. Hosting For Your Domain

Allynne Hosting and DomainsOnce you have a domain name you need to host it. Hosting refers to the actual storage location for the files you would use for your website. Hosting can be found very cheap these days, however I would strongly warn against seemingly great bargains as they often end up being terrible quality. As mentioned above, i host all my websites with Allynne, and have never had an issue in my 6+ years with them. Hosting will cost less than $10 a month for unlimited space, bandwidth, databases etc, and it does come with great support if you ever need assistance. As with domains, IGS are also an option.

3. A Way To Deliver Content

So you have a domain name and you’ve got hosting. How you need a way to get information from your mind to your potential readers. While static websites are still used, a much better quality way to deliver content is by using content deliver scripts. There are countless options in this area depending on what you need.

joomlawordpress

WordPress offeres the worlds #1 blogging script and is incredibly easy to use for regular journal / blog type updates. For a more complex system that can be used as both blog or full featured site, I recommend Joomla, the worlds #1 Content Management System (CMS). I use Joomla for this website and WordPress for my hockey website, LizardInsider.

igsIf you wanted a membership type site for business reasons there are many options also, however I would strongly recommend taking a look at the Instant Guru Script (IGS). This is a full featured membership website system that is still in development, but only weeks away. IGS promises to the #1 membership / affiliate website script on the market. I work closely with the developer and have seen this script i action, and to put it bluntly, it’s damn incredible!

Purple Paw Web Design can help with any design and build needs if you’re not comfortable with building your own website.

4. Branding Who and What You Are

Branding yourself the the quintissential, #1, best way to ensure you build an successful identity. Branding is often seen as something that only multi-national corporations can do, but this is not true. Sure, Nike has “just do it”, and McDonalds has “I’m loving it”, but there is nothing stopping YOU from branding yourself.

What are you involved in? What is your website about? Branding doesn’t have to be about slogans, it can be your name, a symbol, or anything you wish. The key to branding however is to choose your keywords carefully and make sure you use them strategically in your content. Over the past year I have been branding my site with the phrases “PPM Guides” and “Powerplay Manager Articles”, and have found an increasing number of hits coming from search engines from those particular search phrases.

If you have a brand in mind, try and incorporate that into your domain name. Be wary of course of things like copyright etc when doing this.

5. Enhance Your Brand Via Social Media

social-mediaThe last step is an ongoing process that involves taking your branded website and populating it across the social media universe. You should have Facebook, Twitter, DIGG, etc accounts and you should make a point to publish your content on those websites. If you are building a business brand, be sure to create new accounts specifically for your business, including a Facebook Page.

Social Media drives the world right now and you want to ensure you are tapping into that very successful market.

These 5 steps are of course just a start, and there are so many more things you can do to help build or enhance your identity online. If you’re not yet in control of your own piece of the web, get involved today!

Share This:

Potential JoomlaStats Component Exploit Could Drain Server Resources

An urgent update to anybody who is using the Joomla component called “JoomlaStats”.

My server host and I have discovered a potential exploit in the JoomlaStats component that could heavily drain your servers resources and possibly leave your site at risk.

The issue was discovered earlier today when my hosts data center suspended my account due to excessive resource usage. This should never have happened of course, as there had been no new updates to any of my websites in recent days. Upon review of the Joomla Stats component, we found the following data, which as you can see, is completely out of the ordinary for my website.

JoomlaStats Exploit 1

On the 5th and 6th of July the number of visitors / hits to the site jumped by OVER 1000%!

Looking deeper, we found that the majority of the hits came in blocks of IP’s, such as the one below.

JoomlaStats 2

This is not necessarily a sign of hacker, script or bot, but for my site, this type of traffic is heavily out of the ordinary. Also, as you can see, the hits all came from the same host in this example, but different IP addresses and are all just seconds apart. What this image doesn’t display is that they were also from a range of differnt operating systems and browsers.

joomlastats03The graph on the right shows the sites total server usage for the month of July so far. The first few days of the month are as expected, but as you can see, the jump is quite drastic on the 5th and 6th.

To further add to the confusion, Google Analytics are not displaying a huge increase in visitors to the site. Why, we are not yet sure, but are looking into whether the JoomlaStats numbers are accurate, or if they are caused by this apparent exploit.

The Server Load

At the point the server suspended my account, the server load was almost 4 times what it should have been. Since disabling and removing the JoomlaStats component that has dropped back to what it should be.

My suggestion, if you use JoomlaStats, is to keep a close eye on your data and if possible, server load. The exploit may simply be a one-off thing, but it is always best to be safe when it comes to things like this.

Share This: