all your code are belong to us » CSS http://allurcode.com and all my code are belong to you Thu, 19 Jan 2012 20:33:59 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 CSS Triangle http://allurcode.com/2011/10/31/css-triangle/ http://allurcode.com/2011/10/31/css-triangle/#comments Mon, 31 Oct 2011 21:58:17 +0000 6bytes http://allurcode.com/?p=640

Really simple triangles working in all major browsers including IE6+

HTML

No surprises here. Our HTML is as simple as that.

<div class="arrow_top"></div>
<div class="arrow_right"></div>
<div class="arrow_bottom"></div>
<div class="arrow_right"></div>

CSS

The trick is to create an element with zero width and height. The actual size will be determined by the element’s borders. For example up arrow has top and bottom borders set as transparent and the left border with a solid colour. Imagine it as drawing an arrow where its pointing corner is our zero dimensions div element.

Demo

Arrow top

.arrow_top {
	width:0;
	height:0;
	border-top:30px solid transparent;
	border-bottom:30px solid transparent;
	border-left:30px solid #ff9600;
}

Arrow right

.arrow_right {
	width:0;
	height:0;
	border-top:30px solid transparent;
	border-bottom:30px solid transparent;
	border-left:30px solid #ff9600;
	margin-bottom:10px;
}

Arrow bottom

.arrow_bottom {
	width:0;
	height:0;
	border-left:30px solid transparent;
	border-right:30px solid transparent;
	border-top:30px solid #ff9600;
	margin-bottom:10px;
}

Arrow left

.arrow_left {
	width:0;
	height:0;
	border-top:30px solid transparent;
	border-bottom:30px solid transparent;
	border-right:30px solid #ff9600;
	margin-bottom:10px;
}

Arrow top with non transparent borders and pointing corner is a 5px / 5px div

.arrow_top_filled {
	width:5px;
	height:5px;
	border-left:30px solid #222;
	border-right:30px solid #222;
	border-bottom:30px solid #ff9600;
	margin-bottom:10px;
}

Arrow top right

.arrow_top_right {
	width:0;
	height:0;
	border-bottom:30px solid transparent;
	border-left:30px solid transparent;
	border-right:30px solid #ff9600;
	margin-bottom:10px;
}
]]> http://allurcode.com/2011/10/31/css-triangle/feed/ 0 Hot off the workshop vol. 2 http://allurcode.com/2011/03/22/hot-off-the-workshop-vol-2/ http://allurcode.com/2011/03/22/hot-off-the-workshop-vol-2/#comments Tue, 22 Mar 2011 22:45:50 +0000 6bytes http://allurcode.com/?p=548

TK Maxx website rebranding

After

Before

 

Website redesign for TK Maxx. Launched just yesterday.
Venda coding all the way in the back end and HTML, JavaScript and CSS in the front end.
View site

What I’ve learnt

The biggest challenge was to make the site work in Internet Explorer 6 and 7. One particularly annoying issue was to make the logo stay on top of the sliding main homepage image. All other browsers were just fine but in IE6 and 7 the logo was hidden behind the image.

 

TK Maxx website rebranding, logo bug

Logo behind image

TK Maxx website rebranding, logo fixed

Logo above image

 

The trick was simple yet not obvious. <div> containing the logo needs not only its z-index set to a higher value than sliding image, but also we have to make sure IE treats it seriously and make our CSS rule important.

#logo { z-index: 1000; }

Above will not work whereas below will work like a charm.

#logo { z-index: 1000 !important; }
]]> http://allurcode.com/2011/03/22/hot-off-the-workshop-vol-2/feed/ 0 Hot off the workshop vol. 1 http://allurcode.com/2011/02/23/hot-off-the-workshop-vol-1/ http://allurcode.com/2011/02/23/hot-off-the-workshop-vol-1/#comments Wed, 23 Feb 2011 11:51:53 +0000 6bytes http://allurcode.com/?p=478

Just launched. TK Maxx and Red Nose Day campaign applications.

Facebook quiz

Fun quiz to find out your perfect Red Nose Day t-shirt.
View site

Website application

Upload you photo with Flash uploader, resize it and pan it around with JavaScript then save your results with PHP.
View site

]]> http://allurcode.com/2011/02/23/hot-off-the-workshop-vol-1/feed/ 2 Multiple borders with CSS2 http://allurcode.com/2010/07/06/multiple-borders-with-css2/ http://allurcode.com/2010/07/06/multiple-borders-with-css2/#comments Tue, 06 Jul 2010 10:18:45 +0000 6bytes http://allurcode.com/?p=353

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

 

]]> http://allurcode.com/2010/07/06/multiple-borders-with-css2/feed/ 2 Gmail’s recent email rendering change http://allurcode.com/2010/06/01/gmails-recent-email-rendering-change/ http://allurcode.com/2010/06/01/gmails-recent-email-rendering-change/#comments Tue, 01 Jun 2010 09:14:28 +0000 6bytes http://allurcode.com/?p=305

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.

 

]]> http://allurcode.com/2010/06/01/gmails-recent-email-rendering-change/feed/ 0 Google font api and font directory http://allurcode.com/2010/05/23/google-font-api-and-font-directory/ http://allurcode.com/2010/05/23/google-font-api-and-font-directory/#comments Sun, 23 May 2010 11:08:36 +0000 6bytes http://allurcode.com/?p=263

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.

 

]]> http://allurcode.com/2010/05/23/google-font-api-and-font-directory/feed/ 0