<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

I wonder why they don’t make it “disabled” by default. Someone also suggested to put a hidden underscore to confuse Skype:

+1 800 (555) 555 <div style='display: none;'>_</div> 55 55

This is how it looks in your browser:
Confucius says: Everything has its beauty but not everyone sees it.

Nothing special, so, let’s add a style for all browsers:

q:before, q:after { content: "" }

Now, all the Q’uotes display the same in all browsers (IE and normal browsers). So, to add quotes, we’ll add them ourselves and stylize the quote as we wish. I’m reminding that there are special html entities for curled quotes: accronym to Left Double Quote – “ and Right Double Quote – ”

Confucius says: &ldquo;<q>Everything has its beauty but not everyone sees it.</q>&rdquo;

Next, let’s italize the quote:

q { font-style: italic }

Confucius says: “Everything has its beauty but not everyone sees it.”

Good? Good.

First of all, you should know that browsers are not video players, thus they can’t have K-Lite codec pack built-in or they can’t play MJPEG from your old camera… So we should be very specific in choosing the right video format.

After big debates, the big guys like Google, Mozilla, Opera and others decided they should use the WebM codec. It is based upon the famous On2 codec which was used in FLV file formats if you remember. The other two big video formats: H.264/MPEG-4 AVC and Ogg Theora will move to second choice slowly because they are covered with different patents, and so, people using them will need to buy patents and lose money, but WebM is not just royalty-free, it’s open source. So we can expect WebM2 and WebM3 in future with much quicker decoding speed and picture quality.

VP8 is delivered in Matroska container with Vorbis audio, both of outstanding quality. Plus, it will be played back in Internet Explorer 9 if the codec will be installed.

So, we have these choices today: H.264/MPEG-4 AVC, WebM and Ogg. According to the table at Wikipedia by today, the most playable format now is Ogg. Only poor Safari and Internet Explorer can’t embed the codec yet.

Creating a video tag is very simple, just like this:

<video>
	<source src='dre.ogv' type='video/ogv; codecs="theora, vorbis"' />
	<source src='dre.mp4' type='video/mp4; codecs="avc1, mp4a"' />
</video>

Isn’t that simple? Now why did i place 2 source tags, that’s because some browsers can play Ogg, while others play only H264, so we can include both here to make sure our video will be played and information delivered.
Additionally we can put a poster attribute to the video tag for the preview image like this:

<video poster="http://example.com/video.jpg">
...

Next, let’s add an id for our video, switch on the controls, set the dimensions and put the dark background color.

<style>
#myvideo { background: black; width: 400px; height: 300px }
</style>
<video poster="http://example.com/video.jpg" id='myvideo' controls>
...

No need in putting controls=true or whatever, the browser should just watch if the attribute is set. Now, adding a bit of javascript can help us create custom controls for the video:

<script type='text/javascript'>
function ge(i) { return document.getElementById(i); }
</script>
 
<button onclick='ge("myvideo").play()'>Play</button>
<button onclick='ge("myvideo").pause()'>Stop</button>
<button onclick='ge("myvideo").currentTime -= 10'>Backward</button>
<button onclick='ge("myvideo").currentTime += 20'>Forward</button>
<button onclick='ge("myvideo").muted = !ge("myvideo").muted'>Mute/Unmute</button>

See how easy and intuitive it is, plus no need in developing different conditional statements for each browser, one command for all and that’s how it should be.

In the end you should get something like this:

Play Stop Backward Forward Mute/Unmute

Note: this OGG video is seen to be played back only in Mozilla Firefox, while Opera and Chrome see the video tag and display the player, but can’t play it.
Chromium plays the WebM format nicely, so we can expect it to be played in stable Google Chrome versions in a few days.

First, let’s create our pop-up box and define some basic styles. Remember, we’ll need a sequence of borders, so let’s create a set of border style rules too.

<style>
.boxwrap {}
.boxwrap2 { }
.boxwrap3 { }
.box { background: #83d8ff; text-align: center; font: normal 22px Tahoma; text-shadow: 1px 1px 1px #fffff7; padding: 20px; }
</style>
<div class='boxwrap'>
  <div class='box'>Welcome to our website!</div>
</div>

Now, let’s work on our borders. First, let’s create a semi-dark colored, thin border. Then, add a lighter border to highlight it. And finally, finish with a darker border from the same color family. Remember to do it upside-down (i.e. boxwrap #3 is the most inner border, and border #1 is the most outer)

<style>
.boxwrap { border: 1px solid #d49101 }
.boxwrap2 { border: 1px solid #ffe490 }
.boxwrap3 { border: 10px solid #ffc000 }
</style>
<div class='boxwrap'><div class='boxwrap2'><div class='boxwrap3'>
  <div class='box'>Welcome to our website!</div>
</div></div></div>

This is what we get in the end.

Try different color combination and add more additional borders if you need:

Symbols

Currency

Mathematical Symbols