<![CDATA[HTML - All your code are belong to us]]>

<![CDATA[HTML - All your code are belong to us]]>Blog title inspired by this meme]]>https://allurcode.com/https://allurcode.com/favicon.pngHTML - All your code are belong to ushttps://allurcode.com/Ghost 4.48Tue, 30 Sep 2025 11:27:41 GMT60<![CDATA[CSS Triangle]]>

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"

]]>https://allurcode.com/css-triangle/5b7b0aa2b52b43084c9ea141Mon, 31 Oct 2011 21:58:17 GMT

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.

Examples

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;
}

]]><![CDATA[Hot off the workshop vol. 2]]>

TK Maxx website rebranding

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.
Visit live site

What I’ve learnt

The biggest challenge was to make the site work in Internet Explorer 6 and 7. One

]]>https://allurcode.com/hot-off-the-workshop-vol-2/5b7b0aa2b52b43084c9ea138Tue, 22 Mar 2011 22:45:50 GMT

TK Maxx website rebranding

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.
Visit live 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 fine, but in IE6 and 7 the logo was hidden behind the image.

Before

Logo behind the image

After

Logo on top of the 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; }

]]><![CDATA[Hot off the workshop vol. 1]]>

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

]]>https://allurcode.com/hot-off-the-workshop-vol-1/5b7b0aa2b52b43084c9ea132Wed, 23 Feb 2011 11:51:53 GMT

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

]]><![CDATA[HTML5 Where to start?]]>

Everyone is excited about the new kid on the block – HTML5, but where to start and how to use it? There are couple of things you can start using right now with a few hacks for our lovely IE6 and other browsers not yet supporting HTML5. Before we get

]]>https://allurcode.com/html5-where-to-start/5b7b0aa2b52b43084c9ea125Tue, 15 Jun 2010 14:16:55 GMT

Everyone is excited about the new kid on the block – HTML5, but where to start and how to use it? There are couple of things you can start using right now with a few hacks for our lovely IE6 and other browsers not yet supporting HTML5. Before we get into it, it’s good to know the level of support of HTML5 in different browsers. These few links can help you find it out.

Not supported elements

Following elements are no longer supported in HTML5:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<s>
<strike>
<tt>
<u>
<xmp>

Now, lets start with a few simple tags.

Doctype

Oh the doctype, who could remember the whole thing?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >

Instead of old doctype like the one above, we can finally start using something that is really easy to remember.

<!DOCTYPE html>

YES! That’s it, we’re done 🙂 Even Google is using it already.

Character Set

Again, a lot simpler than it used to be.

<meta charset="utf-8" />

`<script>`, `<style>` and `<link>` elements

We’re all used to this

<script type="text/javascript" src="/path/to/my/file.js"></script>
<style type="text/css">
  #myId {
    margin:0px;
  }
</style>
<link type="text/css" rel="stylesheet" href="/path/to/my/file.css" />

but with HTML5 the we can omit the type attributes as the values like above are set as default. Our bit of code becomes a little more clean.

<script src="/path/to/my/file.js"></script>
<style>
  #myId {
    margin:0px;
  }
</style>
<link rel="stylesheet" href="/path/to/my/file.css" />

Semantic structure

A few new elements were added to add a more semantic meaning to well known

tag. Some of those elements are:

<article>
<section>
<aside>
<hgroup>
<header>
<footer>
<nav>
<time>
<mark>
<figure>
<figcaption>

Support in IE

IE9 is supposed to support HTML5 when it’s out, but for now we have to tell IE what type those elements are. To not complicate things too much, all we need to do is make a use of this awesome script. Just paste it within your head tag.

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Sample page markup

<html lang="en">
<head>
  <title>Title</title>
  <meta charset="utf-8" />
  <meta http-equiv="imagetoolbar" content="no" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="Keywords" />
  <meta name="description" content="Description" />
  <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
  <div id="wrapAll">
    <header>
      <nav>
        <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <article>
        <header>
          <h1>Article Header</h1>
          <time datetime="2010-06-15" pubdate>June 15th, 2010</time>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </article>
    </section>
    <footer>
      Footer content
    </footer>
  </div>
</body>
</html>

]]><![CDATA[Gmail's recent email rendering change]]>

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

]]>https://allurcode.com/gmails-recent-email-rendering-change/5b7b0aa2b52b43084c9ea122Tue, 01 Jun 2010 10:14:28 GMT

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 anymore 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.

]]><![CDATA[Google font api and font directory]]>

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.

<html lang="en">
<head>
    <title>Custom

]]>https://allurcode.com/google-font-api-and-font-directory/5b7b0aa2b52b43084c9ea120Sun, 23 May 2010 12:08:36 GMT

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.

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

Nothing fancy here, result as expected:

Hello world!

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

<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>
      p.tangerine {
        font-size: 48px;
        font-family: 'Tangerine', serif;
      }
    </style>
</head>
<body>
    <header>
        <p>Hello world!</p>
    </header>
</body>

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.

]]>