The Basics Part II: CSS Rounded Corners

Posted on Aug 18, 2011 by Nate to General, Web Development

If you’d like to see part one of the series you can go here: CSS Absolute Positioning.

In part 2, I’d like to go over CSS rounded corners. For ages I’ve spent time poring over websites trying to figure out what method would work best for getting me those coveted round corners in my site. The method we will be discussing today provides you with a box that is not only stretchable horizontally, but vertically as well, thus making this solution totally dynamic.

This method makes use of absolute positioning to create our edges and corners. There are quite a few variations based on what you’re trying to do with your rounded corners, but we’ll just be covering a simple box with a 1px rounded border like so:

The first thing you’re going to need are the images for each of the corners, and a one pixel image that is the same color. You can do this manually, or you can use a site like http://www.generateit.net/rounded-corner/ to generate your corners for you. I generally do the latter since everything is pre-cut and ready to go.

After you have the images, the HTML to create the box is pretty straightforward:

<div class="roundBox">
          <span class="top"> </span>
 
		 <span class="left">   </span>
		 <span class="right">   </span>
		 <span class="top-left">   </span>
		 <span class="top-right">   </span>
		 <span class="bottom-right">   </span>
		 <span class="bottom-left">   </span>
<div class="roundBoxText">
        This is some text inside the rounded box</div>
<!-- End Round Box Text --></div>
<!-- End Round Box -->

To explain the above code, we are basically creating a container “roundBox” to house the borders, and then creating the ‘s for each corner and edge of the box. This can be used as the basic html for a wide variety of rounded corner boxes.

Next, the css gets a little more inolved:

On to the css:

.roundBox {
position: relative;
padding: 4px 0px 4px 6px;
font-size: 14px;
height: 200px;
width: 200px;
text-align: center;
}
.roundBox .roundBoxText {
position: relative;
z-index: 2;
}
.roundBox .top-left, .roundBox .top-right, .roundBox .bottom-right, .roundBox .bottom-left, .roundBox .top, .roundBox .bottom, .roundBox .left, .roundBox .right {
position: absolute;
z-index: 1;
font-size: 0;
line-height: 0;
}
.roundBox .top, .roundBox .bottom {left: 3px;right: 3px; height: 3px;  }
.roundBox .left, .roundBox .right { top: 3px;bottom: 3px;width: 3px;}
.roundBox .top { top: 0; background: url(img/border.jpg) left top repeat-x;}
.roundBox .bottom {bottom: 0; background: url(img/border.jpg) left bottom repeat-x;}
.roundBox .left {left: 0; background: url(img/border.jpg) left top repeat-y;}
.roundBox .right { right: 0; background: url(img/border.jpg) right top repeat-y;}
.roundBox .top-left, .roundBox .top-right, .roundBox .bottom-right, .roundBox .bottom-left { height: 3px; width: 3px;}
.roundBox .top-left {top: 0; left: 0; background: url(img/tpl.png) left top no-repeat;}
.roundBox .top-right {top: 0;right: 0;background: url(img/tpr.png) right top no-repeat;}
.roundBox .bottom-right {bottom: 0; right: 0; background: url(img/btr.png) right bottom no-repeat;}
.roundBox .bottom-left { bottom: 0; left: 0;background: url(img/btl.png) left bottom no-repeat;}

This CSS looks very complicated, but is actually quite simple. In the first part, we are setting the general width and height of the box, and setting a few styling things like font size. The most important part of this is the position: relative. Building upon our previous post where we dealt with absolute positioning, this is necessary in order for the borders to be contained inside the container.

Next we are going to set each of the corners to position: absolute;, and give them a lower z-index than the content div (this isn’t necessary for this example, but you may have large borders that go under text in your own work). We then take each corner and edge and set them to their appropriate positions. For example, top-left would end up with top:0 and left:0;. For the edges, you will notice that the positions are not 0. This is done to keep the repeating edges from overlapping the corners.

And there you have it, a box with rounded corners with compatibility for all major browsers. This solution is great because it doesn’t require javascript, or any CSS hacks to work. It is just plain HTML and CSS. I do apologize to the HTML purists out there who don’t like the extra markup in their code, but it is my opinion that the tradeoff for universal support is well worth it.

See the live demo below, or download the source files:
Demo
Source Code

Tags: CSS, html, Web Development, website design

Absolute Positioning CSS Elements: The Basics

Posted on Jul 22, 2011 by Nate to Web Design, Web Development

When first learning to write HTML and CSS, creating  a compatible, functional, great-looking website can be a daunting task. Many early developers are stuck with hours upon hours of troubleshooting, trying to figure out that one small piece of CSS that is causing their page to to look like a garbage dump. That’s why, in this series of posts, we’ll be going back to the basics and looking at some simple CSS methods you can use to crate great designs with as little hassle as possible.

The first item we are going to look at is absolute positioning. Let’s assume you have a box like below that you want to place some objects in, but they are not going to be sitting side-by-side like usual. Instead, you want them to be layered on top of each other, and you want them spread out in different corners of the container.

The first rule when placing objects inside of a container is to give the container a style of “position:relative”. If this is not done, then the absolute elements we will place later will ignore this container, and will find the next highest div that is static and all of your positioning will be wrong.

Next, we can place any elements we please inside this container. By setting the elements to “position: absolute;”, we are essentially releasing it from any boundaries that existed. It can now overlap and move freely within (or outside of) the boundaries of the container through the use of top, right, bottom, and left properties.

Being able to move these elements anywhere on the page is great, but what about overlapping? Let’s say I want to add another div in the center of the box that would overlap the other boxes:

Now we have an overlaying box! There’s only one problem, it’s not showing over the other boxes. This is where z-index comes in.

By setting the z-index to ’1′, we are essentially telling the block to show above the other blocks whose default value is still ’0′.  So far we’ve seen that all of these blocks can be positioned inside of the container, but what if we want our blocks to show outside the boundaries of the container? we can give our blocks a negative position, just as easily:

By simply creating a negative position on the element, it will cause the element to move outside the bounds of your container. This can be used in a variety of ways on your website to create very interesting results.

And those are the basics of absolute positioning. Stay tuned for part 2 where we discuss some more basics of CSS.

Tags: basics, CSS, Web Development

Rotated Background with Slide Up Menu using JQuery and CSS

Posted on Mar 3, 2010 by Rich to Web Development

So you’re not really into flash?
Don’t know how to code flash?
Don’t want to know how to code flash?
Love jQuery?

Well all this is pretty much me. Now a days most of the things you can do in flash, you can now do with jQuery; well somewhat. But that doesn’t stop us developers from trying right? One of our latest clients wanted a cool feature that I thought would be nicely shared with the rest of the web development community.

Let’s think of a box with rotating images inside. along with the images, we have a navigation menu that slides up / down while the images rotate. Pretty cool huh? well lets show you how I made this happen.

Check out the Demo

Lets begin with the Basics of what is needed:

1. JQuery/ custom js
2. css/html/images

Javascript

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"><!--mce:0--></script>
<script src="bg-rotate-slide-up-js.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>

CSS

body{margin:0;padding:0;}
#mainImageBox{position:relative;height:300px;margin-top:20px;margin-bottom:20px;margin-left:20%;}
#mainImageBox img{float:left;position:absolute;margin:0;padding:0;border:1px solid #6a39b3;}
#mainImageBox img.show{z-index:100}
.snapShot{margin:0;padding:9px;left:0;position:absolute;top:0;z-index:0;}
#mainImageBox #subNavBox{position:absolute;z-index:200;top:1px;left:1px;width:650px;height:300px;}
#mainImageBox #subNavBox .sNavWrap{float:left;position:relative;bottom:0;background-color:#6a39b3;margin:0 0 0 20px;padding:0;font-size:12px;text-align:center;top:269px;}
#mainImageBox #subNavBox .sNavWrap a{margin:0;padding:8px 10px;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#f9f9f9;text-decoration:none;text-align:center;display:block; text-transform:uppercase;font-weight:bold;}
#mainImageBox #subNavBox .sNavWrap .sSub{border-top:1px solid #ddd;margin:0;padding:0;}
#mainImageBox #subNavBox .sNavWrap .sSub a{display:block;margin:5px 0;padding:5px 0 8px 0;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#080808;text-decoration:none;text-align:center;display:block;text-transform:uppercase;font-weight:normal;}
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix:after {clear: both;content:' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}.clearfix {display: inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}

HTML

<!-- begin main image box -->
 
<div id="mainImageBox">
    <img class="snapShot show" src="one.jpg" alt="One" width="650" height="300" />
    <img class="snapShot" src="two.jpg" alt="Two" width="650" height="300" />
    <img class="snapShot" src="three.jpg" alt="Three" width="650" height="300" />
    <!-- begin sub nav slide up box -->
 
<div id="subNavBox" class="sNav">
        <!-- list 1 -->
 
<div class="sNavWrap">
 
<div class="sHead">
            <a href="#">Header Link 1</a>
 
<div class="sSub">
                <a href="#">sub link for 1</a>
                <a href="#">sub link 2 for 1</a>
                <a href="#">sub link 3 for 1</a></div>
</div>
</div>
 
 
<!-- list 2 -->
 
<div class="sNavWrap">
 
<div class="sHead">
            <a href="#">Header Link 2</a>
 
<div class="sSub">
                <a href="#">sub link for 2</a>
                <a href="#">sub link 2 for 2</a>
                <a href="#">sub link 3 for 2</a></div>
</div>
</div>
</div>
 
 
<!-- end sub nav slide up box --></div>
 
 
<!-- end main image box -->

Building off of a carousel foundation I found, I stripped down to the bare minimum and ran from there. Here is all the Javascript written for this example:

Javascript (bg-rotate-slide-up-js.js)

$(document).ready(function(){
	/*****************************************************************************
		dealing with the navigation
	*****************************************************************************/	
 
	$(".sSub").each(function(){
		var newWidth = $(this).width();
		$(this).prev().css("width",newWidth);
		$(this).css("display","none");
		//alert( 300 - $(this).height() );
	});
	// Deal with Sub Nav
	$(".sNavWrap").hover(function(){
		// I Loath you IE fix
		if ($.browser.msie && $.browser.version.substr(0,1)<8){var minusPX = "33";}
		else{var minusPX = "32";}
 
		var newHeight = (300 - $(this).children().children(".sSub").height() ) - minusPX +"px";
		//alert(newHeight);
		$(this).animate({
			top: newHeight
		}, 300, function() {
			$(this).children().children(".sSub").show();
		}).stop(true, true);
		$(this).children().children(".sSub").slideDown(300);
	},function(){
      	$(this).animate({
			top: '269px'
		}, 300, function() {
			$(this).children().children(".sSub").hide();
		}).stop(true, true);
		$(this).children().children(".sSub").slideUp(300);
    });
 
}); // END THE DOM
 
/*****************************************************************************
	dealing with the rotating images
*****************************************************************************/
function mainImageFlow()
{
	// set the opacity of image(s) to 0 (can't see them)
	$('#mainImageBox img').css({opacity: 0.0});
	// set the first image to be seen
	$('#mainImageBox img:first').css({opacity: 1.0});
	// set the function for 'mainImageGallery' to run every 3 seconds.
	setInterval('mainImageGallery()',3000);
}
function mainImageGallery()
{
	// if the images have no class (class='show') then show the first one anyway
	var current = ($('#mainImageBox img.show')?  $('#mainImageBox img.show') : $('#mainImageBox img:first'));
	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('sNav'))? $('#mainImageBox img:first') :current.next()) : $('#mainImageBox img:first'));
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	$("#subNavBox").removeClass('show');
}

Check out the Demo

OR

Download the zip file

Update: Per your requests, here is an updated script and CSS code that gives your menu an animated scrolling effect. This code has also been cleaned up quite a bit from the previous version.

$(document).ready(function(){
	/*****************************************************************************
		dealing with the navigation
	*****************************************************************************/	
 
	$(".sSub").each(function(){
		var newWidth = $(this).width();
		$(this).prev().css("width",newWidth);
		//$(this).css("display","none");
		//alert( 300 - $(this).height() );
	});
	// Deal with Sub Nav
	$(".sNavWrap").hover(function(){
		// I Loath you IE fix
		if ($.browser.msie && $.browser.version.substr(0,1)<8){var minusPX = "33";}
		else{var minusPX = "32";}
 
		var newHeight = $(this).height() - minusPX +"px";
		//alert(newHeight);
		$(this).stop().animate({
			bottom: newHeight
		}, 'slow')
	}, function(){
      	$(this).stop().animate({
			bottom: '0'
		}, 'slow')
    });
 
}); // END THE DOM
 
/*****************************************************************************
	dealing with the rotating images
*****************************************************************************/
function mainImageFlow()
{
	// set the opacity of image(s) to 0 (can't see them)
	$('#mainImageBox img').css({opacity: 0.0});
	// set the first image to be seen
	$('#mainImageBox img:first').css({opacity: 1.0});
	// set the function for 'mainImageGallery' to run every 3 seconds.
	setInterval('mainImageGallery()',3000);
}
function mainImageGallery()
{
	// if the images have no class (class='show') then show the first one anyway
	var current = ($('#mainImageBox img.show')?  $('#mainImageBox img.show') : $('#mainImageBox img:first'));
	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('sNav'))? $('#mainImageBox img:first') :current.next()) : $('#mainImageBox img:first'));
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	$("#subNavBox").removeClass('show');
}

And the modified CSS:

body{margin:0;padding:0;}
#mainImageBox{position:relative;height:300px;margin-top:20px;margin-bottom:20px;margin-left:20%; overflow: hidden;}
#mainImageBox img{float:left;position:absolute;margin:0;padding:0;border:1px solid #6a39b3;}
#mainImageBox img.show{z-index:100}
.snapShot{margin:0;padding:9px;left:0;position:absolute;top:0;z-index:0;}
#mainImageBox #subNavBox{position:absolute;z-index:200;bottom:0;left:0;width:650px; height: 30px;}
#mainImageBox #subNavBox .sNavWrap{float:left;position:relative;bottom: 0;background-color:#6a39b3;margin:0 0 0 20px;padding:0;font-size:12px;text-align:center;}
#mainImageBox #subNavBox .sNavWrap a{margin:0;padding:8px 10px;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#f9f9f9;text-decoration:none;text-align:center;display:block; text-transform:uppercase;font-weight:bold;}
#mainImageBox #subNavBox .sNavWrap .sSub{border-top:1px solid #ddd;margin:0;padding:0;}
#mainImageBox #subNavBox .sNavWrap .sSub a{display:block;margin:5px 0;padding:5px 0 8px 0;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#080808;text-decoration:none;text-align:center;display:block;text-transform:uppercase;font-weight:normal;}
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix:after {clear: both;content:' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}.clearfix {display: inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}

Tags: CSS, html, jQuery, jQuery examples, jQuery HTML, jQuery tutorial

In the year 3000! ok maybe 2012 – The future of Development

Posted on Jun 8, 2009 by Rich to Technology Trends, Web Design

So I have been reading lately on the evolution of web development and how it will affect our culture as a whole. I have seen many blogs and articles state that mobile development will grow substantially. I totally agree with this item. Most websites now have evolved into thinking of mobile website presentation as an important part of their design and development. Some may argue in having a separate presentation for your mobile edition like yoursite.com/mobile or m.yoursite.com others might argue that something like “Progressive Enhancement” might be the solution.  While others still might have their own reasons for doing what they do. I personally feel like there is no right answer. The biggest question to me is something that plagues us as developers and designers on the regular computer browsers.  That is cross-browser compatibility. For example, I went from a sidekick slide to a G1 and now to the iPhone. Each phone supports different functionality and such. which makes it very difficult to have the mobile edition look the same across all phones. Yikes!

Another thing I have read about lately has been on the “I hope IE 6 Dies” mentality. While me as a Developer would truly hope so, we might not have that even in 2012. With the prices of these systems, licensing costs, lack of IT manpower or whatever else could be impeding the upgrade of computer systems in larger corporations we might still have to deal with this disease.

Frameworks Frameworks Frameworks. Developers have their preference. Some might tell you to learn all, some might say stick to one. At the end of the day, I can see them integrating concepts together to form the ultimate framework like voltron.js

I would talk about HTML5 and CSS3, but why. If not all browsers support it, then we are back to 2009.

Tags: CSS, CSS3, Dojo, HTML5, jQuery, Progressive Enhancement, Prototype

Getting to know the 960 Grid System

Posted on May 5, 2009 by William to Web Design

There is a popular commercial on television for a company that claims to “move at the speed of business.” As anyone who owns a small business can tell you, time truly is money, and sometimes, it helps to have a system for web design that cuts down on the mistakes and maximizes the number of people you can reach with your site. The 960 Grid System is named for the web design idea of having 960 lines per web page.

Read the rest of this entry »

Tags: 960 grid, CSS, Page Layout, web design

TypeChart: CSS Web Fonts Made Easy

Posted on Nov 4, 2008 by Damien to General, Web Design

TypeChart is a simple and easy to use font CSS generator which comes in very handy when you need just the right “browser friendly” font. It easily allows you to view all web-safe fonts in your browser and it even renders what they would look like in other operating systems.

Along with simply viewing the CSS font showcase you can download the CSS for various sizes and treatments of selected fonts. Overall it’s an extremely helpful CSS font tool for developers and designers alike.

Tags: CSS, typechart

CSS – Keeping It Organized

Posted on Oct 22, 2008 by Damien to Web Design

When writing CSS you’ll often find yourself with an extremely long CSS doc that could pass the 1000 line mark. Commenting every block of CSS can be very helpful and benificial especially if working within a team of developers who may need to change items in the future.

Aside from just commenting your individual blocks of code there’s also another VERY helpful method that we often use here at THAT Agency. We simply break our stylesheets into several documents and link them through a CSS import. Breaking everything apart into it’s base elements is a handy way of navigating. Some basic categories could be:

Reset – a full CSS reset to alleviate cross browser issues
Structure – base structure of the layout
Text – controls all copy, header tags, horizontal rules, etc.
Navigation – Primary navigation
Header – Logo header, contact information, etc.
Footer – The all important closing statement

First we’ll start off with a base StyleSheet.css which would house all classes that don’t necessarily fall within the above mentioned categories. Here is a sample stylesheet header:

/*********************************************************************

Sample Cascading Stylesheet (c) 2008
Written by: THAT Agency LLC
All rights reserved.
Any reproduction or intentional misuse is strickly prohibited

*********************************************************************/

/* Reset CSS */
@import url(“reset.css”);

/* All Text CSS */
@import url(“text.css”);

/* 960 Grid CSS */
@import url(“960.css”);

/* Global Navigation CSS */
@import url(“global_nav.css”);

/* jQuery Tooltip CSS */
@import url(“jquery.cluetip.css”);

/* jQuery Facebox Lightbox CSS */
@import url(“facebox.css”);

/*********************************************************************

By using the @import url to bring in corresponding stylesheets allows easy access to the block items such as primary navigation CSS, base Text CSS and various other items that may otherwise get lost within a long CSS document. This also serves as a major help when working with a team of developers as each can then focus on just a particular block of CSS without the need to adjust the main CSS doc.

Tags: CSS

Image Stretching with CSS

Posted on Jan 24, 2008 by Jonathan to Web Design

One of the most vital considerations when designing any website is how it will display in different browsers, at different resolutions and on different screens. While one person views your site with Firefox, another is using Internet Explorer and both are displaying specific elements in their own special way. To counteract this, it is a matter of finding a loophole to work around the browsers’ shortcomings, or opting for a solution that agrees with both, but compromises the final product.

It tends to be a time-consuming process and lose-lose for everyone involved. That is why it is helpful to have a clever community that consistently churns out new fixes to old problems. It is something I had recently had some trouble with, stretching images with CSS, but was eventually overcame. Alex Walker offers his one-stop reference guide for avoiding this nuance.

The first three solutions (Embedding everything into an SWF with Flash, HTML5, and Seam Carving) are brief overviews of methods that have worked in the past or have some glimmer of an effective future, but at present lack the clout. They are all precursor to his more efficient method that basically boils down to playing with CSS attributes.

The technique involves layering multiple transparent images, and instead of focusing the stretching on prominent foreground elements, focusing it on the menial and the background; almost creating an illusion of sorts without the once-problematic image tearing.

Walker provides a more in-depth discussion of the process, code snippets, and working examples of Image Stretching at http://www.sitepoint.com.

Tags: CSS

THAT CSS Reset

Posted on Jun 21, 2007 by Damien to Web Design

One major struggle we all have as CSS designers is keeping the consistency across multiple browsers and most of the problems come from the default setting that browsers have for common elements. By using a basic CSS reset and working from there you can override the browser’s settings and start fresh from ground zero.

After doing some research I’ve put together a simple CSS reset. I’ve seen some more complicated ones but this one seems to work fine for general use. I’ve even added in a few additions I have yet to see in other CSS resets such as the dotted border that Firefox commonly puts around links and an overflow-x issue I’ve commonly run into.

Enjoy!

body {
margin: 0;
padding: 0;
overflow-x: hidden;
}

html {
margin: 0;
padding: 0;
overflow-x: hidden;
}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

fieldset,img {
border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
font-weight: normal;
}

ol,ul {
list-style: none;
}

caption,th {
text-align: left;
}

h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
margin: 0;
padding: 0;
}

q:before,q:after {
content: ”;
}

abbr,acronym {
border: 0;
}

a {
outline: none;
}

Tags: CSS

Don’t Fear the CSS

Posted on Jan 5, 2007 by Damien to Web Design

I recently had a conversation with a fellow designer in Chicago about the state of the web and and the constantly evolving coding structures. He, as with a lot of web designers out there, has a general fear of CSS if not the simple lack of time to learn new techniques. He is accustomed to using simple image slices and table based layouts but in todays webby world this technique will be the death of you.

CSS and XHTML based sites are easier for search engines to pick up, quicker to load and are more accessible to people with disabilities than any other type of site. Often times image/table based sites are skipped over by search engines as their content is hidden within image files which are not accessible to the disabled let alone the search engine spiders. Old swap_image markup for rollovers is also thing of the past as this this requires the user to download several unnecessary graphics in order to use the navigation. CSS handles this gracefully and quickly.

Also table based sites are slower to load, require much more HTML markup than CSS/XHTML. Speed is key when it comes to web users. The longer the user has to wait for the information the more likely they won’t wait at all.

My advice to those out there still afraid of the big bad CSS is to head to Amazon or your local bookstore and pick up a couple books and find some in-house project for which to play with. A couple good ones to start with would be CSS, The Missing Manual by David Sawyer McFalarland and the beautifully illustrated The Zen of CSS Design by Shea and Holtzschlag.

CSS is here and as far as I can tell, it’s going to be here for quite a while so take the time to learn it. It may just save your job.

Tags: CSS