Dev Tips | Become a Better Developer, One Tip at a Time. » HTML/CSS

Introducing Minerva – A Creative Portfolio Theme

Drew Douglass — Wed, 06 Jan 2010 04:52:43 +0000

Recently, I teamed up with very talented designer and personal friend Baz Deas to form a small and fun ThemeForest team. We came up with a name, DesignThirst, and have released our first premium HTML template on ThemeForest. Minerva, the name of the theme, is a premium and very fresh corporate/portfolio theme. Just check out some the features!

Introducing "Minerva"

Minerva is a fresh and clean site template that works great as a portfolio, personal, blog, or corporate site. Minerva comes packed with features and is ready to go out of the box. It even comes with a working AJAX & PHP contact form w/ spam protection!

Screenshots

Home Page

Footer

Contact Page

Blog Comments

Theme Features

Working AJAX & PHP Contact form.
Nice jQuery effects in the Footer and ‘Share This’ section.
Easy to use jQuery Slider in the header.
Custom Font Embedding with Cufon, falls back on awesome font stacks and still looks great.
5 Different page types included.
Supported in all major browsers, including IE6!
Valid XHTML
Custom and in depth online and offline documentation and support.
Clean, elegant, and semantic code aids in good SEO .
Minimal use of images and creative use of sprites to save loading times.
Special attention paid to elements and typography, see demo page.

Demo, Documentation, & Support

http://designthirst.net/themes/minerva/ – Live Demo

http://designthirst.net/docs/minerva/ – Online Documentation

http://twitter.com/DesignThirst – DesignThirst on Twitter

Get Minerva now!

You can get Minerva right now, available exclusively through ThemeForest.

Feedback, Updates, and Feature Requests

If you didn't know, once you buy a theme on ThemeForest, you can download any updates made to that item for free at anytime! That said, ~~we're about to release Minerva version 1.1~~ version 1.1 has been released!, which comes with some small enhancements, so no matter when you buy it, you'll forever have access to upgrades for free!

I'd love to hear any feedback or feature requests, let me know what you think!

5 Advanced CSS Techniques To Increase Your Skill Set

Muhammad Adnan — Fri, 04 Dec 2009 01:15:07 +0000

The number of CSS techniques that can be used to achieve a certain effect is plentiful. As CSS standards progress, so do our options when it comes to working with CSS. Today, we will have a look at 5 advanced CSS techniques that will help to increase your skill set.

Tutorial Details

Program/Language: CSS
Language Version: 2.1
Difficulty: Beginner/Intermediate
Estimated Completion Time: 30 minutes

Below you will find a list of the different advanced CSS techniques we will shortly discuss in this article.

Scaling the background image to browsers' window size (e.g.Twitter).
Text & image indentation.
Z-index in object elements.
CSS shadows.
CSS user interface enhancements

Scaling the image background to browsers' window size (e.g.Twitter)

If you take a look at the way Twitter handles user backgrounds, you will notice that there is a sort of scaling effect going on. This helps ensure that the page displays in an aesthetically pleasing way. A few months ago, I had to scale an image to the size of the browser. I tried many solutions, both with and without JavaScript, but they never fit the screen properly. I desired for the background to stay fixed and stretch across the windows size just like Twitter. Finally, I came up with a solution, and I'm going to share that solution with you today.

Let’s begin with the XHTML markup below:

		
		
			
			scaling the background image to browsers window size

The above code should be pretty self-explanatory. It is an XHTML document with an inline image in the body, this will serve as the background image for the page.
Now, for the content and markup, let's create some DIV elements/sections as seen in the code below:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ligula sapien, imperdiet non egestas quis, tristique commodo augue. Nunc vehicula, lacus ac sagittis auctor, sem mauris laoreet neque, sit amet imperdiet enim felis ut enim. Proin vitae ipsum sapien. Donec placerat consequat est, eu dapibus diam vulputate non. Nam ultricies augue in urna aliquam vel posuere nulla tincidunt. Curabitur lectus augue, congue eget sodales vel, elementum eget lectus. Sed eget lobortis elit. Cras vitae rutrum quam. Curabitur eget turpis sit amet ante dignissim auctor ut posuere leo. Vivamus vitae gravida ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non purus urna. Nunc sit amet sem non est lobortis euismod sodales in ante. Phasellus et nunc nisl.

Nulla porta velit et libero venenatis ornare. Nam adipiscing interdum libero ac commodo. Proin lacinia elementum ornare. Sed sapien lectus, euismod vitae porta in, iaculis non dolor. Morbi vulputate tincidunt sollicitudin. Morbi sit amet fringilla felis. Nulla vitae tortor et massa convallis dictum quis at ipsum. Vivamus a mi vitae justo aliquam volutpat. Nulla sit amet enim libero. Praesent suscipit, erat in consectetur pretium, ipsum urna hendrerit lorem, sit amet placerat nisi lacus pharetra sem. Proin nec felis vitae lectus hendrerit vestibulum. Sed ullamcorper nunc nec turpis molestie ac semper urna accumsan. Pellentesque eget massa arcu. Vivamus vitae quam ut felis vehicula bibendum et vel sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis, sem vitae vulputate pharetra, elit felis aliquet diam, in sagittis enim dui eu justo. Nullam bibendum tincidunt dui eget sollicitudin. Praesent purus orci, suscipit eget sollicitudin in, scelerisque sed sem. Pellentesque et magna neque. Donec vestibulum venenatis arcu, quis pellentesque ipsum laoreet quis.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed malesuada nisi a tellus gravida blandit. Integer id quam ante. Cras non facilisis dui. Phasellus porttitor rhoncus consectetur. Duis nec orci nisi, pulvinar interdum libero. Nulla vel mi volutpat nisi aliquam dapibus sed id velit. Sed commodo pellentesque vulputate. Ut hendrerit orci sit amet mi pellentesque vitae rutrum sapien feugiat. Integer imperdiet quam a massa hendrerit sit amet egestas massa fermentum. Curabitur at massa risus. Mauris aliquet elit id nunc auctor interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam lorem magna, dapibus id volutpat id, pretium id tortor. Morbi pharetra elit lectus, quis semper ipsum. Mauris pulvinar consectetur elementum. Nam ullamcorper nisl et est consequat euismod.

Maecenas lacus massa, malesuada a pulvinar quis, convallis vel lacus. Sed velit lacus, sodales a accumsan nec, convallis nec justo. Donec vitae orci eu ligula semper tincidunt. Pellentesque facilisis urna et nisl tempus porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ut interdum erat. Pellentesque rutrum justo eu lectus molestie dictum. Pellentesque scelerisque pulvinar metus sit amet sollicitudin. Nullam nisi elit, hendrerit ut tempor id, volutpat et mauris. In hac habitasse platea dictumst. Phasellus elementum pharetra interdum. Phasellus vel velit vel felis vestibulum interdum a ut turpis. Cras facilisis nisl vel elit rutrum in blandit magna pharetra. Integer nec justo in risus fringilla ornare. Praesent ut erat quis orci fermentum placerat sit amet id purus. Proin nec nulla ligula. Ut nibh elit, pulvinar a porttitor sed, pulvinar id justo. Quisque est dui, facilisis non commodo sed, molestie volutpat justo. Nunc ligula purus, tincidunt et varius sit amet, vehicula vel tortor.

Duis ut ligula ut augue iaculis porta sed id metus. Duis ultricies tempor orci dapibus convallis. In hac habitasse platea dictumst. Aenean at velit magna, ac hendrerit lorem. Nam facilisis leo in nulla ullamcorper tempus. Duis odio orci, fringilla sed suscipit vel, luctus nec lorem. Maecenas convallis sagittis ultricies. Cras consectetur tristique metus nec tristique. Integer ultricies sem velit, et pulvinar odio. Maecenas quis sollicitudin eros. Ut eget justo non velit tincidunt rhoncus ac eget nunc. Proin quis urna turpis. Pellentesque id mauris diam, id aliquam metus. Curabitur vitae semper mauris. Morbi fringilla pharetra lectus. Ut diam nisl, egestas ac lacinia sed, sodales quis felis. Integer ante enim, interdum eu dictum vitae, sagittis vel tortor. Maecenas dignissim, nisl sed scelerisque molestie, tellus justo fermentum ligula, sit amet venenatis quam turpis quis diam.

There are three separate id containers: scroller, container, and text-content. The 'scroller' is used to move everything inside of it. In this case, the divs and content inside it.

See the preview of your code in your favorite browser.

Scroll down and you will see that the text is below your image, as demonstrated below:

We will now add the necessary CSS that will stretch the image to fit the screen. The image will be stationary and the text will move around if needed.

Let’s go through the above CSS code step by step.

html, body {
	margin:0;
	padding:0;
	width:100%;
 	height:100%;
	overflow:hidden;
}

The margin and padding is set to 0 to overwrite the default browser CSS settings. We set the width and height of the image to 100% and set overflow to hidden. After applying this above CSS, your page should look like the following:

You will notice that there are no scrollbars at right side and all of the text is hidden; This is because of the use of the overflow:hidden property.

#background{
	position:absolute;
	z-index:1;
	width:100%;
	height:100%;
}

Now, we set both the width and height of the image to 100% for the background to fully stretch to the size of the screen. We will get to why we are using z-index shortly. Using the above snippet, our page now looks like:

Now our background image is fixed to the screen.

#scroller{
	position:absolute;
	width:100%;
	height:100%;
	top:0
	left:0;
	overflow:auto;
	z-index:2;
}

Styling the scrolling div is pretty simple, z-index is used to place the scroller on top of the background image - the overflow:auto property makes it scrollable when the contents of the scroller take up more room than provided. In other words, the content will be moving while the background is fixed. Let's take a look at the page now:

#container{
	margin-left:25%;
}

#text-content
{
	background-color:#CCC;
	width:600px;
	padding:10px;
	margin-top:60px;
}

In the CSS code above, I've applied some basic styling to the content. The page will now look like:

You are free to use any of this code according to your needs. It is a nice example to demonstrate how you can stretch an image to the browser's size.

View Scaled Background Demo

Images and text-indent

As web developers, we are very used to using multiple images on our websites to achieve certain effects or outcomes.. If you want a professional CSS style, and improved SEO with images, you should write CSS in a separate file instead of via inline-css. Our HTML file will be smaller and search engines will crawl it faster and recognize them better. Let's see an example of using images with CSS in a better way.

Basic HTML markup:

	This is the map of Pakistan, indicating my city Sialkot.

Preview of above markup:

First, we shall apply some CSS to the above DIV:

#map{
	position:relative;
	background-image:url(images/map.jpg);
	background-repeat:no-repeat;
	width:382px;
	height:296px;
}

After applying the CSS style, this is what the page looks like:

There is some text on top of the image, which will be crawled by search engines. We need to hide this from the user, though. You may be thinking about using the display:none; property, but, our purpose is to show the text when search engines crawl our webpage. Here is the updated code:

#map{
	position:relative;
	background-image:url(map.jpg);
	background-repeat:no-repeat;
	width:382px;
	height:296px;
	text-indent:-9999px;
}

text-indent:-9999px; is the property used to move the text away from the screen, rather than removing it completely. Click here to see more details on text-indent.

Your page will now look something like this:

Try the web developer Firefox plug-in to disable the CSS style and then see your website preview

You may know about CSS sprites, that they improve load times and decreases the number of HTTP requests that are made. But using the text-indent property with sprites makes the navigation even more fascinating for SEO as well. If you don't know about CSS sprites then take a look at some of the links below
http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/
http://css-tricks.com/css-sprites/

In your CSS, you can set the background images and text-indent accordingly.

View Text Indent Demo

Z-index in an object tag.

What is z-index?

Elements have 3 positioning dimensions - X (horizontal), Y(vertical) and Z(depth). z-index is how deep down an element is - an element with a higher z-index is placed above an element with a lower z-index. Z-index must be an integer and can only work on elements that have explicitly been given a position property (absolute or relative).

One of my previous issues was fixing the z-index position in an object tag. The solution was very interesting, so let's it now!

Z-Index doesn't work with the object tag. So, after some research and several attempts, I reached a solution which I'll show you here:

In the embed tag, you will notice that I used the wmode="transparent" property. This sets the video into transparent mode. For flash files, see the below snippet:


    
    
    
    
    
    
    
    
    
      
      
      
      
      
      
      
		Content on this page requires a newer version of Adobe Flash Player.

This part of the code is quite interesting, so I would suggest that you try viewing the page with and without these tags.

View Z-Index Object Demo

CSS Shadows

If your job is to convert PSD to XHTML/CSS you must be dealing with shadows of images in the PSD that you are going to work on. You must be looking some solution to apply the shadows in CSS instead of taking the images from PSD. Applying shadows to images/text via CSS is a good way to reduce your file size.

There are two CSS3 properties to give shadows in web pages:

1. Text-shadow

2. Box-shadow

Text-shadow:

If you want to give shadow to your Text in webpage then use the text-shadow css3 property.Let's move step by step to achieve this goal.

1. Wrap the text with a DIV, as seen below:

            Text Shadow
            
                            Envato - Nettuts+

2. Here is the css style that is used to give shadows to above text:

h2{
color:#FF0000;
text-decoration:underline;}
.txt_shadow{
font-size:38px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-shadow:2px 12px #999;  /*x-axis y-axis color*/
}

Above css style is pretty simple to follow, text-shadow property is used for styling the text shadows. It takes 2 arguments. 1st is x-axis that scales the shadow to right side. 2nd is the y-axis that scales the shadow to down. If we set the negative value to x-axis it will scale the shadow to left and if we set the y-axis to negative it will scale the shadow to up.After applying the above html/css your text shadow will look alike below:

3. Let's make this more attracting by adding the blur to shadow.

Text Shadow with blur


	Envato - Nettuts+

.txt_blur_shadow{
font-size:38px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-shadow:2px 2px 5px #999;  /*x-axis y-axis blur color*/
}

See the text-shadow property clearly. We added 4 arguments now. 3rd one is new that is used to blur the shadow. After applying the above styling the resulting text will be

Looks pretty clean with blur Isn’t it ?

4. You can add even multiple shadows to your text. Its CSS style will be

.txt_multiple_shadow{
font-size:38px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-shadow:2px 12px #999,5px -5px #999;  /* 1st style[x-axis y-axis color], 2nd style[x-axis y-axis color] */
}

See the text-shadow property; we used multiple styles of shadows separated by commas. You can even use blur with it too. After adding the above style it will look alike this

Click here to view the demo

Box-shadow:

The great way to give a shadow to an image in your webpage is use box-shadow property. Let’s see how to style the image shadows.

1. Take a picture of which you want to apply drop shadow. I selected a picture of my son

2. Wrap the image with a DIV, as seen below:

Image Shadow

3. CSS style to apply shadow to above markup

.img_blur_shadow{
width:540px;
height:380px;
border:1px solid #000000;
padding:2px;
box-shadow:1px 1px 10px #999;  /*[x-axis y-axis blur color]*/
-moz-box-shadow:1px 1px 10px #999;
-webkit-box-shadow:1px 1px 10px #999;
}

Box-shadow property cannot be recognized by every browser. So, we used –moz-box-shadow for Firefox and –webkit-box-shadow property for chrome/web kit engines. Arguments for box-shadow are same like text-shadow. Output of above html/css markup will be

4. Even, you can drop multiple shadows, like we have seen previously for text, for images also.HTML/CSS will be

Multiple Image Shadows

.img_multiple_shadow{
width:540px;
height:380px;
border:1px solid #000000;
padding:2px;
box-shadow:1px 1px 10px #999,1px 1px 10px red;  /*[x-axis y-axis blur color]*/
-moz-box-shadow:1px 1px 10px #999,1px 1px 10px red;
-webkit-box-shadow:1px 1px 10px #999,1px 1px 10px red;
}

The above code is pretty easy to understand if you have followed how to multiple shadows with text. It has same number of arguments and you can use number of multiple shadows separated by commas.

View CSS Shadows Demo

CSS UI Enhancements

While working on my latest project, I had a few strange issues I was running into. First of all, when I try to select the text in Firefox it didn't turn blue like in IE Browsers. Secondly, when the user clicks on a link, an dotted outline appears around the link. This was especially annoying because I was using text-indent with the links.

Text Selection Highlight Color

To create a highlight color when text is selected, I use the following code:

/*Mozilla browser selection*/
::-moz-selection{
	background: #69f;
	color:#fff;
}
/*Other browsers selection except IE */
::selection {
	background:#69F;
	color:#fff;
}

Remove Border Outline around links

I went over some popular websites and was shocked when I saw they had the same problem - an outline appears around the link. A few of the popular websites are listed below with their screen shots.

Even the BBC website is facing this issue.

So the solution for removing this outline is:

a:link, a:hover, a:visited{
	outline:none;
}

Attribute-Specific Icons

Do you want to have file icons next to your links? Add PDF icons next to your .PDF links, MS WORD icons next to your .doc links, so on and so forth. This is a great way to make links describe what they're pointing to.
The code for specifying the attribute icons is:

a[href$='.pdf']{
	padding:0 20px 0 0;
	background-image:url(images/Print.ico);
	background-position:right;
	background-repeat:no-repeat;
}
a[href$='.doc']{
	padding:0 20px 0 0;
	background-image:url(images/docs.ico);
	background-position:right;
	background-repeat:no-repeat;
}

View UI Demo

Conclusion

In this tutorial, we have learned the advanced techniques of CSS that can solve some tricky issues. Luckily, most if not all of these techniques are easy to understand and implement. If you know of any other techniques to solve these problems, please share them with the world and post them in the comments area.

CSS Tip: How to Make Circles Without Images

Vasili — Mon, 04 May 2009 02:53:28 +0000

About a month ago, Jeffery Way posted an article about creating shapes with pure CSS, no images added. I've been using the CSS3 property of border radius a lot in a design I've been working on and thought, "why can't I use this to make circles?" Today, I'll show you how to make your very own CSS circles. In addition, we will use our new knowledge to create a simple jQuery plugin!

View Demo

Structure, structure, structure!

How are we suppose to make a circle without any HTML to style? Because this is just a simple shape, I'll be using an "empty" span tab — I've just put into it.






CSS Circle




&amp;nbsp;

I'll be using inline CSS because this is just a demo, but if this were for a project you'd probably want to put it in an external style sheet. I've also reset the margins and padding, then gave the body a one inch margin to push our circle away from the sides of the page.

Basic Styles

For now, I'll give the circle a background of #333 just so we can see it. You'll also want to give it the same height and width, this is the length of the diameter. The size doesn't really matter just make sure it's en even number.

.circle {
display: block;
width: 80px;
height: 80px;
background: #333;
}

Note: If you're using an inline element (like a span tag), you'll want to give the element a display of "block". If you don't know if your element is a block level element or not, just load the file in a web browser and if it's height and width look larger than 1px it is.

Circles Are Really Made With CSS3

What really gives this circle its arcs is CSS3's -moz-border-radius and -webkit-border-radius properties. What we're going to have to do is give the border radius a value of half the height/width; this is the radius of the circle. For my example, I've used 80px for the height and width so I'll set the border radius to 40px.

.circle {
display: block;
display: block;
width: 80px;
height: 80px;
background: #333;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}

Conclusion

CSS3 is a very powerful tool to know how to use. Just make sure you don't base your entire website around it because not every browser supports it yet. However, if you can get the effect in certain browsers and still have you're design looking okay in other browsers, I think it's fine to use browser specific styles.

Create a jQuery Plugin For Our Circles

You can also take this a step further by making it into a jQuery plugin.

(function($){

	$.fn.jCircle = function(options) {
		var defaults = {
			size: 40
		},
			settings = $.extend({}, defaults, options);

		settings.size = parseInt(settings.size) || 40;
		settings.radius = (settings.size/2) + 'px';

		return this.each(function(){
			var $this = $(this);

			$this.css({
				display: 'block',
				width: settings.size + 'px',
				height: settings.size + 'px'
			});

			$this.css('-moz-border-radius', settings.radius);
			$this.css('-webkit-border-radius', settings.radius);
		});
	}

})(jQuery);

View Demo

Javascript Tip: Easy Fading Using jQuery

John Bloomfield — Thu, 30 Apr 2009 22:29:49 +0000

Whilst working on a project recently I came across a need for us to show a selection of images depending on their type and when a link to them is clicked. I decided to use jQuery as it saves a lot of time as most of the work is done for you. I will step through the code so you can see how I did it.

View Demo

As with any jQuery, we are required to use the following line to tell our jQuery code to run as soon as DOM is ready rather than when the page has finished loading.

$(document).ready(function(){

The next line detects any click from a link inside the div with an id of “links”

$('#links a').click(function(){

Once a link has been clicked any attribute from that link is accessible through $(this), so the next line sets up a new variable called “color” and takes the “rel” attribute from the tag and puts it into our new variable.

var color = $(this).attr('rel');

Once we know which colour link has been clicked we can then fade out all images that have a different colour and fade in the colour that has been clicked.

$('#tiles div.tile:not(.' + color + ') img').fadeTo("slow", 0.3);
$('#tiles div.' + color + ' img').fadeTo("slow", 1);

To finish off we need to close our function brackets. You will notice there is a “return false;”. This is to stop the link actually activating the href attribute and basically overriding it so we can do our magic. This becomes useful when users don’t have Javascript activated in there browser, you can make the link work as normal. Unfortunately, you would need to create separate pages with different colours highlighted instead. (sigh!)

So, to sum up I have put all the code below and you will need to remember to include the latest jQuery Javascript file from www.jquery.com
All the HTML you can grab from the source of the demo page.

Final Code

$(document).ready(function(){
   $('#links a').click(function(){
      var color = $(this).attr('rel');
      $('#tiles div.tile:not(.' + color + ') img').fadeTo("slow", 0.3);
      $('#tiles div.' + color + ' img').fadeTo("slow", 1);
   });
   return false;
});

Hopefully, this will be useful to someone. Have fun!

View the Demo

An Interview with Chris Coyier

Drew Douglass — Thu, 19 Feb 2009 01:00:06 +0000

I recently had the absolute pleasure of interviewing one of my favorite internet heroes, Chris Coyier of CSS-Tricks.com. Chris is a web designer and developer and you have probably seen his stuff all over the net. The interview was conducted on the famous NETTUTS.com and I encourage you all to check out the interview and let me know what you think!

ID Your BODY: A Simple CSS Trick With a lot of ROI

Brian Cray — Fri, 30 Jan 2009 23:33:00 +0000

One of the latest raves in Web design is to add an id attribute to the body tag, like . It's a small thing, but it's a damn good idea!

Why? Let's say you have 15 pages total on your Geocities Star Wars fan site. You want the headlines (

`Headline!`

) to be 16 px in size with the exception of the home page. On the homepage you want the headlines to be 18px and bold!

Will you make a new separate CSS file just for the homepage that the user has to download in addition to the default CSS? NO! You're too good for that! You & C3PO hang out on the weekends.

Instead of all that extra CSS file nonsense, you can use in replacement of , which enables you to assign unique CSS only to the homepage like so:

/* for all pages */
h1 { font-size: 16px; }

/* for homepage only */
#homepage h1 { font-size: 18px; font-weight: bold; }

And BOOM! Your homepage headlines are styled differently without any hacks or additional files. That's awesome and incredibly useful.

So why not stop there? Because adding id attributes to the body element of each page takes time and work. When you start that new section on your Geocities Star Wars fan site about Princess Layla's secret love affair with R2D2, you'll be adding lots of id attributes for all the juicy pages. It'll be redundant and boring.

Let's use PHP to make things A LOT easier. Use the following line in replacement of and your pages will automatically have id tags based on their filenames.

There you have it. Use that line in your HTML template, and your pages will have id attributes assigned to automagically. Yippy!

For example, c3po.php will become #c3po, c3po/loveaffairs.php will become #c3po_loveaffairs (forward slashes "/" are replaced with underlines "_"), and your homepage will be #index. Enjoy!