Posts Tagged ‘CSS’

Multiple borders with CSS2

Posted by Wojtek Kosinski at 6 July 2010

Category: CSS, HTML

Tags: , ,

How to make a div with multiple borders?

Usual approach is to create a div with border then create another div inside that one with different border. We end up with lots of divs inside of another divs. If there only was an easier way to do it in CSS without the need of more divs… There is!

:before and :after pseudo classes

Internet Explorer 6 and 7 does not support :before and :after pseudo classes and to be honest I couldn’t find a working fix for it. The good thing is that those dinosaurs are fading out from our lives.
:before and :after pseudo classes allow to place text or an image before and after each HTML element using content: ”; attribute. In below example content is empty as we need just a border.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple borders with CSS2</title>
<meta charset="utf-8" />
<style>
body { background: #fff; }
#box {
	float: left;
	position: relative;
	width: 100px;
	height: 100px;
	margin: 20px;
	border: #f00 solid 5px;
}
	#box:before {
		position: absolute;
		width: 90px;
		height: 90px;
		content: '';
		border: #0f0 solid 5px;
	}
	#box:after {
		position: absolute;
		left: 5px;
		top: 5px;
		width: 80px;
		height: 80px;
		content: '';
		border: #00f solid 5px;
	}
</style>
</head>
<body>
	<div id="box"></div>
</body>
</html>

Above code should result in:
Multiple borders with CSS

More information about :before and :after pseudo classes can be found here

 

No Comments

Gmail’s recent email rendering change

Posted by Wojtek Kosinski at 1 June 2010

Category: CSS, HTML

Tags: , , , , , ,

Problem

Gmail recently made a few changes in their email rendering engine. Unfortunately for us our image based HTML newsletters that used to look fine in gmail are now broken. Each image seems to have a weird spacing after it.
If you’ve been sending HTML newsletters for your clients for some time now, you probably have your own email templates that work well in all email clients. Well not all thanks to Google.

Solution

To make things back to what they were just add style=”display:block;” to every img tag in your HTML email and we’re back in business.

 

No Comments

Google font api and font directory

Posted by Wojtek Kosinski at 23 May 2010

Category: HTML

Tags: , , , , ,

Technorati code: G8GA9E4SYN2J

Google just made our life much easier by announcing Google font api and Google font directory.
Using custom fonts on your website is as easy as adding two lines of code. Lets consider this simple example.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom fonts</title>
<meta charset="utf-8" />
<style>
      body { font-size: 48px; }
</style>
</head>
<body>
<header>
	<p>Hello world!</p>
</header>
</body>
</html>

Nothing fancy here, result as expected.

 

Hello world!

 

Now lets add those two aforementioned lines. Line 6 and line 9 in below listing.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom fonts</title>
<meta charset="utf-8" />
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<style>
      body { font-size: 48px; }
      p { font-family: 'Tangerine', serif; }
</style>
</head>
<body>
<header>
	<p>Hello world!</p>
</header>
</body>
</html>

and the effect

 

Hello world!

 

The font directory is a bit limited at the moment but I think we can safely assume that Google will be adding more fonts over time.

 

No Comments

Page optimized by WP Minify WordPress Plugin