QTT: Awesome CSS3

For this quick tip I’m going to show you some of my favorite new features in CSS3. There are lots of amazing things happening with html5 and css3, but here are some of my favorite and what they do. CSS3 is not fully supported by every browser so be aware that not all these can be done in all browser but they provide some awesome effects.

Border-Radius

This is one of the best new additions to CSS. No javascript or images required for rounded corners anymore. Firefox and Safari have support for a border-radius that gives you rounded corners. This one is pretty simple to do, although Mozilla currently has a different format then Webkit at the moment and it looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.roundedCorners {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
 
.topRounded {
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
 
.rightRounded {
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}

Along my course of using border-radius I attempted to add rounded corners directly to an image. This works as expected in Safari but Firefox does not round them. It seems Firefox has a bug in its support of border-radius on img. This isn’t supported by Internet Explorer yet so they will not see these rounded corners. However, remember, not all sites need to look the same in every browser. The other solution to rounded corners that I use when IE support is needed would be jQuery Corners.

Text-Shadow

Another new addition to css is text-shadow which can give some amazing looks to text. Pair it with @font-face and web typography has never been better. This can give you a slick and appealing letterpress look to a header. Text shadow lets you specify the x-offset, y-offset, blur and color. Check it out:

1
2
3
4

h2 {
	color: #333;
	text-shadow: 0px 2px 3px #555;
}

Pretty easy and gives you an amazing effect for text. Again this won’t be supported in older browsers, luckily the fallback is just plain text, so no problem there.
(more…)

QTT: Custom Templates in Kaizen CMS

First a brief intro into Kaizen. Kaizen CMS is still a relatively new (or at least new to the public) content management system that was started by John Hoover back in 2007. The cms that exists today is far from the initial and started to take shape in August of ’09 and released as open source to the public in January 2010. I’ve worked with John for over a year now (at DigiMedia and now at Crane|West) and joined him in development of this project in October ’09. It still has areas we are improving on but is the basis we start all of our sites with. The source is hosted on Github and the project is opensource so feel free to fork and explore the code. The project is in active development with lots of improvements in the works.

Now onto the quick tip for today. I’m going to show you how easy it is to create a custom template in Kaizen CMS. Its honestly as easy as one line of code and the cms already has an example of this in ./views/content/contact.tpl file. A custom template is a great way to provide a different look to different pages without affecting the overall site appearance. You might have a page that you don’t want the sidebar to show up on or a page with a completely different header and footer. Kaizen allows you to do this easily without almost no effort on your part. We use smarty for the templates as well. Lets look at the code for the main content template (./views/content.tpl).

1
2
3
4
5
6
7
8
9
10

{include file="inc_header.tpl" page_title=$aContent.name|clean_html menu=$aContent.tag}
 
	<section id="content" class="content">
		<h2>{$aContent.title|clean_html}</h2>
		{$aContent.content|stripslashes}
	</section>
 
	{include file="inc_sidebar.tpl"}
 
{include file="inc_footer.tpl"}

Line 1 does three things. First it includes your header file, in this case it’s inc_header.tpl, then it sets the page title using the content name (page title set in the admin) and last it sets the menu tag (this lets you tell what page your on and can then set a class on your menu to show that. Line 4-5 is displaying the content for the page, so nothing special. Line 8 & 10 are just including the sidebar and footer.
(more…)

QTT: Faux Columns

For this Quick Tip I’ll show you two easy ways, css and js, to do faux columns. This is basically having two columns (or more) in your layout and having them the same height. Here is an example of a typical 2 column layout with column height problem.

The CSS Way

The first way I’ll show you is using css, basically just a background. With this method you will have a wrapper around your columns with your background image. Your image will repeat vertical to fill the complete height of your longest column, creating a faux column look (columns that look like they are the same height). Check out the CSS Way Demo first. Here is the typical code for this method:

1
2
3

#wrapper {
	background: url(images/wrapper-bg.jpg) repeat-y 0 0;
}

How simple is that css? You can of course apply more to it like rounded corners, set the width, etc if needed. Here is the image I’m using for the demo linked above; innerWrapper-bg.jpg. As you can see its pretty simple. Its small and will just repeat for the length of the wrapper. Lets check out the html:
(more…)