Creating these using CSS is a pretty simple proposition. All you need is the icons that would represent each type of box: warning, info, success and error (or, whatever type of ox you wish like ‘download’, etc).

The CSS

Here’s the CSS which is pretty straightforward by creating a class for each type.

.infoBox, .successBox, .warningBox, .errorBox {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}

.infoBox {
 color: #00529B;
background-color: #BDE5F8;
background-image: url('images/info.png');
}

.successBox {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('images/success.png');
}

.warningBox {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('images/warning.png');
}

.errorBox {
color: #D8000C;
background-color: #FFBABA;
background-image: url('images/error.png');
}

The HTML

This part is simple. All you do is create a div using the class name of the type of box you wish to display then add your content.

Content here

That would look like this:

The Images

Below are the images I’ve used in my examples for you to download if you wish

Share on Facebook

Basically the concept is to summon the email address using an Ajax function so that it displays in the specified location on your web page. The email address itself is kept in a separate file. Therefore it’s not part of the source code that the spambots cruise through to snag email addresses. Here’s how it works:

First Step: The External File

This step is simple. Create an HTML page with only one item in the body section… the email address! That’s going to look like this:

mailto:email@mydomain.com

Step Two: The JQuery Code

This is also simple since it’s one function. Here’s the JQuery code:

Let’s explain a little on how this is going to work within your page. The element we’re looking for in your target web page is the item with the .email class name. Once JQuery locates that it’s going to load the content in the parentheses which in this case is our external file that we named email_address.htm (code posted above). Essentially JQuery, as soon as the document is ready, finds the .email class item and loads that content into it. The location where this will be inserted can be located anywhere on your page. Here’s the HTML tag you will need for that to happen:

Step Three: The Target HTML

This is very simple. Place this tag where you want the email address to display:

JQuery will insert the email file between those two span tags and keep it out of the hands of those nasty spammers

Share on Facebook

For the purposes of this tutorial we’re using some very basic methods of table creation, CSS and very simple JQuery methods to accomplish our goals. What we will be doing is adding a stripe to every other row and then adding a hover effect to the others. This tutorial is only designed to show you how these actions can be implemented. You can redo the CSS and table layout any way you wish.

The HTML

Let’s start with a basic table. But, for our purposes, we are using all the necessary table tags like tbody, tfoot and theadso we can further isolate exactly what rows we want to have striped. This makes it easier for JQuery to differentiate between those rows in the area that you may wish to be excluded.

Example Title
Example Title
Example Title




Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


 
Zebra Stripe Demo

Notice that I gave the table an ID of ‘zebra’. This is so you can specify this particular table in the event you have others on your page or even on other pages since JQuery will apply its magic to any table unless specified.

The CSS

This is pretty simple and the body styling is just for the demo purposes and not necessary for the JQuery to do its thing.

body { 	font-family: Arial; font-size: 10pt; }

.zebra { 	background-color: #9CF; 	color: #fff; }

caption { 	font-weight: bold; color: #ff0000; font-size: 14pt; }

#zebra td { padding: 5px; }

.grey { background-color: #ddd; }

The JQuery Code

And, finally, the JQuery code that identifies the table ID, sorts through the elements to identify just those that we wish to apply the changes to, and works its magic. I’ll explain below.

JQuery works off the ID and class names of your elements and CSS. So let’s walk through it. First, we’ve asked it to identify the even table rows bu only inside the tabled with the ID of zebra and only the ones within the tbody tag. This excludes the thead area in case you wish to format that differently than the rest. What we want to do is add a CSS ‘class’ to those even rows. Using JQuery’s addClass function alllows us to do just that. The result is the even rows ONLY within the

tag have the blue background applied. The odd rows remain untouched.

Now we thought it would be fun to add a hover effect to the other rows. For this we add a function that sorts through the ODD rows and uses the mouseover JQuery function and the addClass function to accomplish. Now, keeping in mind that this works on the mouseover, we need to add a mouseout function to return it to normal. Otherwise the mouseover effect will be permanent, the background will remain grey. A true hover effect would change the color then return it to normal after the mouse leaves. So what we’ve done is simply apply the removeClass on mouseover function. Mouse on… mouse off!

Demo

Share on Facebook

This awesome set of highly usable icon styled buttons is powered by JQuery and free! I came across this great article showing how to create the rollover effects and the proper way to implement these into your design.

Mega Web Buttons Pack #1.

Share on Facebook

How it Works

First we start with our CSS needed to create the shadow effect. There’s two parts to this, one for the shadow effect and the other for the container:

 
#shadow {
	padding: 20px;
	border: 1px solid #f0f0f0;
	border-bottom: 2px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.box {
width: 500px;
margin: 50px auto;
padding: 20px;
}

The HTML

Now we put some HTML together in your page where you wish for the element to display:

Light Shadow

Os epulae, abico commoveo neo valetudo, camur luctus ut autem validus camur luctus. 

Minim reprobo, eu, enim, abbas cui duis premo incassum te obruo abluo nostrud. Hendrerit, dolore laoreet, imputo autem elit esse. Ventosus veniam uxor tum nostrud duis eu cogo ad, tamen hendrerit vel quis. Nostrud et ad qui nostrud, reprobo sagaciter elit.

Results:

The result should provide you with this sleek styling for your output:

Variations

Experiment with the width, height, radius and thicknesses to get various effects. This styling makes great looking blockquotes and excerpts. Enjoy!

Share on Facebook

So, the three images consist of:

1. the top including the ribbon
2. the repeatable middle section
3. the bottom

These were all created in Photoshop as one image then sliced against a transparent background and saved in PNG format. Pretty simple stuff.

Then it was time to create the container and divs that would hold the info. We’ll start with just the container div:

 

.ribbonBox {

 width: 190px;

 float: left;

 margin-bottom: 15px;

 }

 

Now, you can adjust everything to your dimensions but my sidebar is a little skinny and the main container div had to allow for some margins so it didn’t hit the left and right borders. The margin-bottom is there so I can stack the boxes on top of each other and there will be some space in between them. Now we do the 3 inner divs that hold the images:

 

.ribbonTop {

 width: 190px;

 background: transparent url('../images/ribbons_top.png') no-repeat;

 height: 52px;

 }

.ribbonTop h2 {

 color: #fff;

 font-weight: normal;

 font-size: 18px;

 padding: 15px 0 0 10px;

 }

.ribbonMid {

 width: 190px;

 background: transparent url('../images/ribbons_mid.png') repeat-y;

 float: left;

 }

.ribbonMid p {

 margin: 0 10px;

 }

.ribbonBot {

 width: 190px;

 background: transparent url('../images/ribbons_bot.png') no-repeat;

 height: 14px;

 float: left;

 }

 

And, last but not least, the HTML

    


Recall News::



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan

        


	

Notice I also gave some formatting to the H2 title so it would display in the right location and look good against the color of the ribbon background.

The end result would produce a box like so:

The three pieces are as so (right click, Save As if you wish to use them:

By using repeat-y on the middle section it will automatically repeat downward as the content increases or decreases. Using this 3 image method cut out the need to have literally dozens of CSS3 statements and used about half the code to get the same effect. Going this route assured me that the look would be the same across browsers. As much as i’d like to be a ‘purist’ and try to do everything with strict code and no images, the world just isn’t quite ready for it.

Share on Facebook

More examples provided in the demo

Sometimes we’re convinced that certain special effects we see in web pages are some sort of cult voodoo and appear mysterious. The ‘slide toggle’ effect is one of those. We’re going to show you just how easy it is to use this cool feature for revealing hidden content.

We’re going to make a simple panel slider using the JQuery toggle function. Here’s how the code will look:

Code Explanation

Let’s break this down to show how simple it is using JQuery

$(document).ready(function() {

Our standard JQuery statement declaring that when the document is fully loaded we can execute the following

$(“.trigger”).click(function(){

Here we are stating that our page element with the class ‘trigger’ is going to do something when it’s clicked on

$(“.panel”).slideToggle(“slow”);

Here we see the details of our instructions for when the ‘trigger’ is clicked. Essentially telling the div with the class name ‘panel’ to ‘slide – Toggle’ open. The ‘Toggle’ part means that it will open when clicked then close when clicked again.

The HTML

The HTML is relatively simple. First, though, we need a little styling for our elements

Followed by our HTML which is entirely up to you how you want it to look. For our demo purposes we’re using just the standard Lorem Ipsum text jargon:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 1.10.32 of de Finibus Bonorum et Malorum, written by Cicero in 45 BC

The standard Lorem Ipsum passage, used since the 1500s

Live Demo

To get a live view of the sliding/toggling panel Click Here

Share on Facebook

$(document).ready(function(){
  $("#link1").click(function() {
  $('#text').load('latin.txt');
});
  $("#link2").click(function() {
  $('#text').load('latin2.txt');
});
  $("link3").click(function() {
  $('text').load('latin3.txt');
  });
});

Ok, what we’ve created here is a series of functions that specify the id’s of 3 hyperlinks (shown below) that, when clicked, will ‘load’ the external pages referenced (latin.txt, latin2.txt and latin3.txt) into the same div element with the id of ‘text’. Here’s the HTML:

This text will be replaced when you click the hyperlinks below

Link One
Link Two
Link Three

Explaining The Code

JQuery is pretty easy to learn once you get the hang of how the functions flow. Here’s some tidbits about this simple AJAX call:

$(document).ready(function(){

JQuery uses the $(document).ready(function() { to ensure that the document is fully loaded and ready to provide you with the ability to execute your code

$(“#link1″).click(function(){

We are stating here that the hyperlink with the #id of link1 should perform a function when it is clicked. So, basically, if you read it like a sentence it states “when someone clicks on the #link1 do the following”.

$(‘#text’).load(‘latin.txt’);

The function we want to perform is to insert content into a specific div element in our page. The first part, $(‘#text’) identifies the element by using it’s id tag #text, the id of our target div. The second part, .load(‘latin.txt’);, tells what content to load into that location. So, reading it like a sentence it says: “find the div with the id of ‘text’ and load this file into that location”.

I’ve repeated the process three times in order to identify the 3 different links. The hyperlinks can be placed anywhere on your page and point to your target div. The content you summon can be a wide variety of formats including txt, html, images, etc..

For our external files they reside in my public folder and contain the standard Lorem Ipsum text for this demo. Here is the ‘live’ example of how this would look when arriving at your page.

Link One | Link Two | Link Three

Clicking on the links will summon the different content without having to refresh the page. This saves on load time and at the same time allows you to designate a specific area for as much content as you’d like to cycle through instead of having a new page for each one.

Live Demo

To see this work Click Here

Share on Facebook

Methods

There’s 3 basic ways you can create a rollover effect:

Flash animation

Javascript

CSS

For our purposes we’re going to skip the first two and use strictly CSS and a tad bit of HTML to make it all work. We’re going to be using a sprite in order to accomplish this. If you don’t know what a sprite is it’s basically a single image with all of your different colored effects self contained. The fact we use a single image means that there’s no additional preloading that has to be done which, when using multiple images, can cause a flicker or pause in the initial display of the mouseover event. Here’s an example of a sprite image which consists of two identical designs but with different colored backgrounds:

The goal here is to use this image in a rollover event for a hyperlink.

CSS

Here’s the CSS Code we’ll be working with:

#imageLink
{
  display: block;
  width: 200px;
  height: 40px;
  background: url("compare-sprite.jpg") no-repeat 0 0;

}

#imageLink:hover
{
  background-position: 0 -40px;
}

#imageLink span
{
  display: none;
}

First, keep in mind that we are creating a hyperlink. Therefore we are going to utilize this code when we create our link by assigning the id to the hyperlink like you would a class. We’re going to explain the code just a bit.

• the height and width represent the single button, not the entire image. So, if the entire image is 80px tall and divided perfectly between the two versions then we set our height at 40px.
• On the :hover we want the background position to move down 40px. Therefore we set the position to -40px to make the effect. Same image, just showing a different portion of it.
• The use of the span tag is to complete our hyperlink since the background image isn’t really creating a link. Therefore, something tangible has to be there. But, the trick is, we set the display to none which makes it invisible to the viewer and all they see is the image

The HTML

Here’s the HTML:

Some text here

You can have as many rollovers on one page or throughout your site as you wish using this code. But, you have to copy the code and assign each one its own unique ID. And, of course, their own images if applicable.

Share on Facebook

/* For PDFs */
a[href $= '.pdf']{
    padding-left:20px;
    background: transparent url(pdf.gif) no-repeat scroll left top;
}

Let’s take a look at this to see how it works:

• The a[href $='.pdf'] aspect is stating that all ‘a href’ tags where the suffix is .pdf to attach the following formatting to it
• The padding-left: 20px; allows for the room needed to place the icon (you can pad left or right depending on where you want the icon displayed)
• The background: tag outlines the parameters for how and where and location of the icon using standard CSS

You’ll notice the $ before the =, this is specifying that we want what is at the end of the href.  There are more tags like this to specify different locations.

• $=   End of String
• ^=   Beginning of String
• ~=  String contains the word and is separated from other words by spaces.
• *=   String contains the word. (doesn’t have to be separated by spaces)

So, armed with this you can make one modification to your CSS file and affect many elements of your pages. Another example of this would be to add an icon to all ‘mailto’ links. Like this:

/* For Emails */
a[href ^= 'mailto']{
    padding-left:20px;
    background: transparent url(mail.gif) no-repeat scroll left top;
}

Here, the ^ symbol means to search for the ‘mailto’ at the beginning of the href string. Then, attach the icon to all the links that qualify only.

Let’s say you want to add an icon to all links that are scheduled to open in a new window:

/* For external links */
a[target = '_blank']{
    padding-left:20px;
    background: transparent url(external.gif) no-repeat scroll left top;
}

Notice that instead of ‘href’ it states ‘target’ which is the method used for determining if a hyperlink is going to open in a new window or in the same window, etc. This CSS command applies just to those hyperlinks that state target=”_blank”.

You can also specify a certain class in the event that you have different styles set up for your various hyperlinks. This method lets you do the following:

/* For popups */
a[class ~= 'popup']{
    padding-left:20px;
    background: transparent url(popup.gif) no-repeat scroll left top;
}

Even if you don’t create different classes for your hyperlinks but would like to have icons next to some of them you can simply assign the class tag to the hyperlink and it will merely add the icon without changing any of the other formatting.

For best results we recommend you use very small icons of 16 x 16 or less. Otherwise they could cause messy looking text lines if your hyperlinks are located within paragraphs.

Share on Facebook