Webdevtuts » css

Create a rollover image using css image sprites

Marcell — Sun, 04 Jul 2010 18:39:50 +0000

If you’re new to web design then you might think rollover images can only be done with javascript considering you’re using a WYSIWYG editor. Well not today. In this tutorial I will teach you how you can create a css rollover image with ease. After today you’ll have this technique mastered.

Things you need

CSS Image

VIEW THE DEMO

The HTML

When creating rollover images/ css image sprites(Same things) all that is needed in the HTML are the div tags. We used the div tag to define the rollover image later in the css file. So inside of your newly open HTML document create a new div.

The CSS

The CSS is the most important part of creating rollover images because this is where we tell our HTML document to look for the styling of our images. So you’ve downloaded the example image that I’ve created for you all to use while during this tutorial. So as you can see we have an image that is 336px in height x296px in width. The width doesn’t really matter considering they’re are the same. The height is what we care about. So earlier I created two separate images in Photoshop. One of the images equal 168px and height. So I created 2 images and put them together which is how we got the height of 336px(168+168=336).

So lets style of rollover images. Copy the css code below in I will explain it.


#image-sprite {
	background:url(sprite.jpg);
	width:296px;
	height:168px;
}

So above I have called the HTML div tag using css. Then I called for the css to grab the background image. The trick to the css rollover image is when you define the height you only put the height of one image. So the height of one image was 168px and the width like I said before doesn’t really matter because they’re both the same.

The Rollover Effect

Now it’s time to create our rollover effect. Copy the code below and I will explain it.


#image-sprite:hover {
	background:url(sprite.jpg);
	width:296px;
	height:168px;
	background-position:0 -168px;
}

So I applied a hover effect to our css file which tells the HTML document that when ever someone hovers over it to change the image. Everything is the same as our first div except I used the css tag background-position: to change images. The first zero in the background-position tag tells the css to move left or right and we did not want that because are images are stacked vertical. The right numeral -168px tells the the css to move up or down. I told the css to move down -168px which created our rollover effect. Now you’re all done.

There are many ways you can create css rollover images. The technique I showed you guys today is the very simple but can be used to create very
complex rollover images. I hoped you learned something from this tutorial today.

Quick Tip: How to target IE browsers using conditional stylesheets

Marcell — Mon, 31 May 2010 14:05:03 +0000

Internet Explore (IE) can be very annoying if you’re coding a website in Firefox, Opera, Chrome, or Safari. As you may all know IE has many problems when it comes to designing and creating a website. In this quick tip article I will show you how you can target specific IE browsers using conditional stylesheets. After this all your IE bugs should be taken care of.

Note: Please place the conditional stylesheet code inside the head tags or else they will not work.

The code below Targets every version of Internet Explorer

The code below Targets Internet Explorer 7 Only

The code below Targets Internet Explorer 8 Only

If you wanted to target multiple browsers but not include one you would use the code below. The code below tells whatever browsers your using to target every Internet Explorer from IE7 and down. If you wanted to target IE8 then you would simply change the 7 to 8.

So if you every run across a bug in IE feel free to use one of the conditional stylehseet methods to target and catch those bugs. I hope this tutorial was helpful to you. Now go catch some bugs!

Create a 3 column fluid layout using HTML/CSS

Marcell — Thu, 20 May 2010 15:06:28 +0000

Hey there fellow designers and coders. Here on Webdevtuts I have been posting a lot of Photoshop tutorials and that is great for designers but what about the people who would like to learn code. Since I have not written a tutorial on code I decided to open up Notepad++ and create something useful for you all. Today I will be teaching you how to create a Fluid 3 column layout using HTML & CSS.

DEMO

The HTML

When starting website I always start with the basic HTML tags such as the Head, Title, and Body tags. Then I’ve added some divs and gave them all a custom name. I give them all a custom name so I can later define them in the stylesheet.

Masthead: – Section will contain and hold all logo, and header information.
Container – Container will contain and hold all content and columns

Copy and paste the layout below into notepad or dreamweaver(whatever program you use for coding) and save it as index.html.






Title Goes Here

More divs

For the Masthead section we will insert two divs. The first div we will enter is logo. The logo div will contain our logo. Then we will enter another div right below it and name it header. The header div will be for our header text and slogan.

Copy and paste the code below inside of the Masthead div.

Now that we have our header section taken care of we will now insert our container divs. Create 3 divs, left_col, right_col, and page_content.

left_col: – This will contain/hold all left column text and information.
right_col: – This will contain/hold all right column text and information.
page_content: – This will contain/hold all main column text and information.

Our final div will be out footer div. We do not want to place the footer inside of our container tag because we would like for it to span across out entire screen. Also I always place it outside of the container so it can stay at the bottom of the page. Create a new div and call it footer.

copy in paste code below after the end of the container div.

Before we begin styling our page we will need to add some text. Google search lorem ispum and you find loads of gibberish text that you can use for this tutorial. Here is what the html looks like with the text.






3 Column Layout | Webdevtuts







	
	Logo
	


	
	This is Your Header
	This is your header
	




	
	Left Column
	
	There are many variations of passages of Lorem Ipsum available, but the majority have
	suffered alteration in some form, by injected humour, or randomised words which don't
	look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
	need to be sure there isn't anything embarrassing hidden in the middle of text. All the
	Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,
	making this the first true generator on the Internet. It uses a dictionary of over 200
	Latin words, combined with a handful of model sentence structures, to generate Lorem
	Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
	repetition, injected humour, or non-characteristic words etc.
	
	


	
	Right Column
	
	There are many variations of passages of Lorem Ipsum available, but the majority have
	suffered alteration in some form, by injected humour, or randomised words which don't
	look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
	need to be sure there isn't anything embarrassing hidden in the middle of text. All the
	Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,
	making this the first true generator on the Internet. It uses a dictionary of over 200
	Latin words, combined with a handful of model sentence structures, to generate Lorem
	Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
	repetition, injected humour, or non-characteristic words etc.
	
	


	
	Main Column
	
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	

	
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	

	
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	
	




© 2010 to Webdevtuts. All rights reserved.

The Css

Ok now that we have the html taken care of its time to do the dirty work. It is now time to style our 3 column web layout. Before we begin styling have to go over something really fast. In a normal website layout many people use fixed layouts but for this tutorial I am using a fluid layout.

Fixed: – Layout is the same width and all browsers. Majority of websites use this method
Fluid: – Layout re-sizes to users screen. Not many people use this method because it is hard styling for it but in the long
run it’s well worth it

Copy and Paste the code below into your stylesheet. I will explain each one below.


body {
	margin: 0;
	padding: 0;
}

#masthead {
	min-width: 600px;
	background:teal;
}

#logo {
	float: left;
	width: 200px;
	background:orange;
}

#header {
	margin-left:200px;
	background:olive;
}

body – Body class define the entire page seen on a screen. It has a margin, and padding of zero so all presets and others styles can also be set at 0.
masthead – The masthead has a min-width of 600px which means it will never get smaller then 600px. Also it has no padding, borders, or margins.
logo – Logo is floated to the left side of the page and has a width of 200px
Header – Since we’re using a fluid layout we will not give the header a fixed width because we want it to re-size according to the users screen size. So we’ve added a margin to the left of 200px which gives us space from the left side of the page.

Now we will style our container and everything inside of it. Copy the css below and add it to your stylesheet.



#container {
	clear: both;
	min-width: 600px;
}

#left_col {
	float: left;
	width: 200px;
	background:grey;
}

#right_col {
	float: right;
	width: 200px;
	background:grey;
}

#page_content {
	margin-left: 200px;
	margin-right: 200px;
	background:red;
}

container – Container id defines the container which holds all the content and both sidebars. I has a min-width of 600px which means it will not get any smaller than 600px. It also clears all floats to the left and right. Does not hold footer
Left_col – The left column is floated to the left side of the page and has a width of 200px
right_col – The right column is floated to the right side of the page and has a width of 200px
page_content – Since we’re using a fluid layout we will not give the page content a fixed width because we want it to re-size according to the users screen size. So we’ve added a margin to the left and right of 200px which gives us space from the left and right side of the page.

The Footer

The footer is the last part to are 3 column layout. Copy the code below into your stylesheet and I will explain it below.


#footer {
	clear: both;
	background:teal;
}

footer – The footer is at the bottom of the page and has no width nor height applied to it because it usually is just a line of text. It has a style of clear both which mean to clear both the left and right and then pushes the footer down to the bottom of the page.

There you go. You should now have a 3 column layout that adjusts to all screen sizes. I hope this tutorial has helped you understand how to create a fluid 3 column layout. Thanks for following this tutorial.

Understanding the fundamental of typography for the web: Part 1

Marcell — Wed, 05 May 2010 00:51:14 +0000

Typography is a very hard thing to accomplish when designing or coding for the web. In this article I will hopefully give you a better understanding of how to use typography and how you can avoid clutters paragraphs and unaligned text.

Mixing Fonts

When I first begin designing and coding for the web I would always mix my typography. For example I would use a serif font(Georgia) with a sans-serif(Arial) font. If you are just starting off you might think that those fonts can be used together but they cannot. Serif fonts are different from sans-serif fonts.

What fonts can I mix?

I bet you’re wondering what fonts you can use for your next design or web project. There are 3 main types of font categories

serif
sans-serif
monospace

Serif fonts are commonly used by publishing companies or if you have ever been to a news site or magazine site you will often find that they are using one of the serif fonts.

Serif

Georgia

Palatino Linotype

Times New Roman

Book Antiqua

Sans-serif fonts are mostly used by all types of websites. I usually use San-serifs fonts for most of my projects.

sans-serif

Arial

Helvetica

Arial Black

Impact

Lucida Sans Unicode

Lucida Grande

Tahoma

Veranda

Geneva

Monospace fonts are not used as often as Serifs, and sans-serif fonts but they are used.

monospace

Courier New

Lucida Console

Monaco

Courier

Line height

Line height is very important when it comes to making your text look neat and clean. Often if you just leave a text as is then it will look cluttered, and tight. When I first began working with text I never really understood how to change the line height of a text and what it actually did. To give you a better understanding of line height I will give some examples below so you could better understand what I am talking about.

There is no line-height below just the default text. So I applied 12px line height to the paragraph below and as you can see the text looks cluttered and not very attractive.

Arial Font(line-height) BAD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

There is a line-height of 24px applied the paragraph below.

Arial Font(line-height) GOOD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

Think of the line height as the lines on a normal sheet of paper. If you were to write paragraphs but not on the lines then it wouldn’t look so good. Now let’s say you wrote on the lines(as you would usually do). If someone were to read your paper(Teacher) then they find it very easy to read.

Letter Spacing

Letter spacing is something that should not be overlooked. Many times when creating different types of paragraphs we might like to have some spacing in between words or letters.

There is no letter spacing in the paragraph below.

Arial Font(spacing) BAD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

There is a letter spacing of 1px in the paragraph below.

Arial Font(spacing) GOOD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

So as you can see typography is very important when coding for the web. I have covers just the basics in this article but will teach you more in the other series. If you have a question just leave a comment below and i will help you there.

Create a speaking block navigation menu using pure css

Marcell — Mon, 15 Mar 2010 03:58:21 +0000

Many people have been emailing me or asking me how I have created the Webdevtuts navigation menu. Well today I decided I was going to write a tutorial to show you guys how I manage to create a “speaking” block navigation menu using just css. A navigation menu’s like Webdevtuts are using done using css sprites but we’re going to accomplish this a new way today. Hopefully you can use this technique for your next project. enjoy

DEMO

Before we begin this tutorial it would be best if you create a New folder and inside of the new folder create a index.html file and a style.css file.

The Markup Lanuage/HTML

Open up your text editor

Note:Before you write HTML it is always good to have the basic HTML tags already written. Place the basic HTML tags below into your index.html file.







Webdevtuts(Speaking Navigation Menu)

Now we’re going to start writing the markup for our navigation menu. Let’s create our nav menu outline. I’ll explain each div later in this tutorial when we start writing the css. Copy the code below into your index.html file inside of the body tags.

Now were going to add our menu links. Ok you might get confuse with the markup below but do not worry I will explain it. Ok so we first had just our nav outline then we added are lists(li) which holds are navigation links. Inside of the list items are span tags which hold are so call tags for that specific link. For example Home is a list and inside of the home list we have the href tags which is use to link an item. Outside of the href tag are span tags with an assign class that we will later edit using css. Inside of the span tags are little description tags that I’ve added.
,



	
		
			HomeThe Beginning
			ArticlesTips, Tricks, Advice
			TutorialsPhotoshop Techniques
			ResourcesFonts, freebies, wallpapers
			AnythingDescription
			
AnythingDescription

The Css

Ok so now we’re going to style our navigation menu using css.

Note: Before css is inserted, insert Eric Meyers css reset. Work good with this nav tutorial.


#menu{
	background:#000;
	height:75px;
}

#menu-wrap {
	margin:0 auto;
	width:960px;
}

#navigation-main {
	padding:15px;
	color:#fff;
	font-size:24px;
	font-weight:bold;
	margin-bottom:10px;
	float:left;
}

#navigation-main li {
	float:left;
	margin-right:20px;
}

#navigation-main li a {
	display:block;
	color:#fff;
}

#navigation-main li ul  {
	display:none;
	z-index:80;
}

#top-nav-info {
	background:#dddddd;
	float:left;
	width:1000px;
}

#top-nav-sec li a {
	padding:15px;
	display:inline;
	height:42px;
	color:#a19f9f;
}

#top-nav-sec li a:hover {
	color:#1F1E1E;
}

.nav-sec {
	display:block;
	font-size:12px;
	font-family: lucida sans unicode;
	font-weight:normal;
	text-align:center;
}

You should now have a speaking block navigation menu using pure css. I did not explain it much because I know many people do not want to read a very long sententce and the best way to earn is to experiment with things. Mess around with the code and you will be fine.

Create a awsesome images gallery using css3 and jquery

Marcell — Sun, 17 Jan 2010 03:25:49 +0000

Today we will be creating a very simple but great looking css3 image gallery using jquery and css3. The image gallery will be tited to the side and on hover will move. Whenever you click on the image a lightbox will pop out. So lets begin.

Demo

Folder Structure

In the folder of your for your image gallery you should have 3 folders and 2 files.

Css -Contains the jquery css
Images – Contains images
Js – Contains the javascript
index.html
style

The HTML Structure

For the image gallery I simply wrapped the gallery in a div and added the images. Every 4 image has two different classed assigned to them. For example the first 4 images has a class name of thumb-small and for the other 4 images they have a class name of thumb-bottom.

The Css

For the Css you might wonder what -webkit, and -moz-transform is. Webkit is a Css3 tag that targets the safari web browser and moz-transform is a Css3 tag that targets the Mozilla Firefox web browser. In the css

-webkit-transform: – Used to rotate the images
-webkit-transition: – Used to zoom/ease in on the images

.thumb-top{
	clear:none;
	padding:10px 10px 30px 10px;
	height:200px;
	width:200px;
	background:#fff;
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers
	but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:25px;
}

.thumb-bottom{
	clear:none;
	padding:10px 10px 30px 10px;
	height:200px;
	width:200px;
	background:#fff;
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers
	but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:25px;
}

.thumb-top:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	-moz-transform:rotate(-8deg) scale(1.2);
	-webkit-transform:rotate(-8deg) scale(1.2);
}

.thumb-bottom:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	-moz-transform:rotate(4deg) scale(1.2);
	-webkit-transform:rotate(4deg) scale(1.2);
}

#gallery {
	margin-top:20px;
}

Inserting and activating jquery plugins

First things first when activating a jquery plugin is to simply make sure we call in the jquery script. Insert the code below into the head section of your document. The code below calls in jquery, then the two jquery plugins, and finally the plugin Css.

Now we want to add the script below to the body of our HTML document right before the end of the body tag.

For the code below I will try to explain it the best way I can so you can better understand it. I know not everyone is good with inserting Javascript plugins or changing functions.

The first function inside of the script tag targets the light box plugin. The light box plugin is when you click on an image and the image enlarges without being taken to the direct image location.

For this $(“.thumb-top,.thumb-bottom”).fadeTo(“slow”, 0.3); function it just tells jquery to fade to anything with the class of thumb-top or thumb-bottom. So whenever your mouse is not on the image it will be darken.

For this $(“.thumb-top,.thumb-bottom”).hover(function(){ function it just tells you on hover, or whenever you move over the image with your mouse that it will highlight the image.

For the $(‘#gallery a’).lightBox(); function it just asks you what id tag would you like for it to bring up whenever you click on something with the tag of a href. For example I have the images wrapped inside of the id gallery and every image has an a href assign to it so whenever you click on it jquery knows when to call for the second lightbox function.

Note: Rotation does not work in Internet explorer browsers do to lack of support of Css3.

After that you should now have your very own css3/jquery image gallery. I am no jquery expert but I try to help you guys understand it and a easy way instead of using words that you guys are not familiar with.

Credit

Credit goes to Csswizardry for the css3 image gallery.
Credit goes to Leandrovieira for the lightbox plugin.

Highlight Current Page in an HTML Document Using Css

Marcell — Tue, 12 Jan 2010 00:01:57 +0000

When designing a web page using HTML/CSS you might have notice that you cannot have an active page just by creating a new index file. In this tutorial I will teach you the simple steps to creating an active CSS state. Open your favorite WYSIWYG (Dreamweaver, coda, notepad++) editor.

Click here for Demo

Getting an active state when using css can be very frustrating if you’re not that familiar with css. Many developers that are new to css often think it is the end of the world when really the active state can be accomplish with very little code.

The Body

The body is of the most important roles when you’re trying to create an active page using css. The reason the body tag is very important because when its time to define what page the user is on the body tag will keep that page active. You’re probably thinking that just body tag can complete that and truth is it can but with a little bit of help from an id or class tag. to give the body a id or class name you would simply do the following.

body id="home"
or
body class="home"

Everytime you create a new index page make sure you change the body class or id name and you will later know why.

The HTML

For the HTML I created/ a basic navigation menu with and unique id name. Notice every link such as home, about, etc all have different id names. The reason they all have different id names is so we can identify that certain linktag in the css file.


	
		Home
		About
		Team
		Video
		Contact

The CSS

Ok so you now have and idea of how the menu has to be laid out using html. Now its time to define each id element from the html. If you look at the code below
you will notice that every css tag has the body id, followed by the menu id with the a(active) tag and finished with the css properties. Take a look at css and compare it to the html.

body#home #home a,
body#about #about a,
body#team #team a,
body#video #video a,
body#contact #contact a{
	padding:10px;
	background:#FF0000;
	margin-right:5px;
	color:#FFFF00;
	text-decoration:none;
}

This was not a tutorial but I truly hope it helped you guys out. I know many people face this problem quite often and do not know what to do. It was a simple, fast, and sweet technique.

CSS Sprites: How they work, and how to use them.

Daan Weijers — Sun, 09 Aug 2009 04:43:25 +0000

This tutorial is on css sprites. You have probably heard about them before, and you may also have tried to make them, but for many people still, css sprites are a tricky part of developing, and therefore this is often skipped.

So What Are They Exactly? And Why Should I Use Them?

A sprite is another word for one image file, that houses numerous other images.
So, instead of using for example 4 files for a few images, you can place them alltogether in one file, and fat fact comes with a few nice advantages:

one bigger file takes up less harddrive/server space than for example 4 little ones.
a visitor’s browser visiting your site only needs to download 1 file, instead of 4. This will speed up the loading time of your website drasticly.
because one image is transfered instead of 4, you save precious bandwidth.

How To Make a Sprite

As I said before, a sprite is an image file that houses more images. Therefore, the only thing you need to do to make a sprite, is to collect a few alike images, and then put them together in one image.
A great example of how a sprite is made can be found on Apple’s website.
It may not look that way, but for the navigation on the Apple site, only one image is used.. A sprite.

This is a great example of how sprites can be and are used in modern day webdevelopment, and it is exactly how you make a good sprite.

For this tutorial, I’ve prepared a few images. Their respective files can be found here , and now I want you to combine these images into one, and end up with an image that is alike to the following one.

That file can also be found in the zip file you can download below.

Our Basic Markup

To make our tutorial example look a little bit nicer than usual, I prepared the basic HTML for the tutorial.

[sourcecode language='css']

Lipsum

Lorum ipsum dolor sit amet, conseqtuer disciplin cit. Amor iludi brium dos no. Consectetuer dos avre dit.

[/sourcecode]

As you can see, we have created a navigation element, which is nested in the “wrap” div, and below that is a “main” element, which can be used to hold some content.
To make this basic setup look nice, I prepared a little css as well. Don’t worry, we won’t get into the real deal yet.

- Tekst uit oorspronkelijke bericht weergeven -

You can place this css in a