Back in the early days of the website there was a magically HTML tag which you would see everywhere...this tag is the marquee tag.

This was used on almost every website, if you don't know about this tag or don't remember it, then basically this tag will make any text you add inside it to scroll across the screen. You can variable the speed and direction the text moves across the screen.

Here is a marquee

Many people got annoyed with this tag and thankfully has been deprecated from the html specification.

But someone developing at webkit missed this tag so much they decided to build a webkit CSS property to create a marquee, which can be used as below.

-webkit-marquee: direction increment repetition style speed;

As it is a webkit property it can only be used on chrome or safari browsers.

The marquee property takes 5 parameters:

• Direction - Defines the direction of the marquee you have the choice of, ahead, auto, backwards, down, forwards, left, reverse, right and up.
• Increment - Defines the distance the marquee travels per loop.
• Repetition - This is the number of times it loops around. If you want it to be infinite you can just use the value infinite.
• Style - This defines the style of the motion on the marquee, alternate, none, scroll, slide.
• Speed - This defines how fast the marquee will scroll fast, normal, slow

View the demo page to see the different effects created with -webkit-marquee.

.marqueeLeft {
  overflow-x: -webkit-marquee;
  -webkit-marquee: left large infinite slide slow;
  font-size:1.8em;
}
.marqueeAhead {
	overflow-x: -webkit-marquee;
  -webkit-marquee: ahead large infinite slide slow;
  font-size:1.8em;
}
.marqueeAuto {
	overflow-x: -webkit-marquee;
  -webkit-marquee: auto large infinite slide slow;
  font-size:1.8em;
}
.marqueeBackwards {
	overflow-x: -webkit-marquee;
  -webkit-marquee: backwards large infinite slide slow;
  font-size:1.8em;
}
.marqueeDown {
	overflow-x: -webkit-marquee;
  -webkit-marquee: down large infinite slide slow;
  font-size:1.8em;
}
.marqueeForwards {
	overflow-x: -webkit-marquee;
  -webkit-marquee: forwards large infinite slide slow;
  font-size:1.8em;
}
.marqueeReverse {
	overflow-x: -webkit-marquee;
  -webkit-marquee: reverse large infinite slide slow;
  font-size:1.8em;
}
.marqueeRight {
	overflow-x: -webkit-marquee;
  -webkit-marquee: right large infinite slide slow;
  font-size:1.8em;
}
.marqueeUp {
overflow-x: -webkit-marquee;
  -webkit-marquee: up large infinite slide slow;
  font-size:1.8em;
}

Demo

With some of the new graphical features you see in CSS3 it can start to add more and more effects to your HTML elements the same way you used to have to use photoshop to do.

Things like box shadow and color gradients are now so easy to do in CSS that you don't even need photoshop anymore. Here is another CSS property that you might not realise existed but it's another effect you would normally do in Photoshop and that's adding a stroke around text, just by using the CSS property text-stroke.

Currently this property is only supported on webkit so it will only work on Chrome or Safari, and you can only use it by prefixing the property with -webkit-.

-webkit-text-stroke: <width>
<color>;

This accepts two values the width of the stroke and the colour of the stroke.

This property now allows you to create a cool outline of any font you are using on your website.

Black Stroke

Black Stroke

.blackandwhite{
	font-family: 'Courgette';
	font-size:3em;
	color: black;
	text-align: center;
        -webkit-text-fill-color: white;
        -webkit-text-stroke: 2px black;
}

Red Stroke

Red Stroke

.redandblack{
	font-family: 'Courgette';
	font-size:3em;
	text-align: center;
	color: red;
        -webkit-text-fill-color: black;
        -webkit-text-stroke: 2px red;
}

Green Stroke

Green Stroke

.greenneon{
	font-family: 'Courgette';
	font-size:3em;
	text-align: center;
	color: green;
        -webkit-text-fill-color: black;
        -webkit-text-stroke: 2px green;
}

As you can see from the above examples is that we have also added another webkit property -webkit-text-fill-color. This property will overwrite the text color with this value. This means that we can set the text color to be something default and this is what the other browsers will see.

Then adding the -webkit-text-fill-color will overwrite the color so we can now use the -webkit-text-stroke to add the webkit stroke.

View the demo to see these affects in different browsers.

Demo