Exposed Elements » HTML

How well does your browser support HTML5?

Mario — Wed, 28 Sep 2011 06:00:12 +0000

Opera Mobile currently scores 269 on my device.
http://html5test.com

my lifestream

Mario — Sun, 10 Oct 2010 02:29:33 +0000

I like the idea behind the friendfeed widget but wanted to customize it a bit. Here is an easy way to produce a lifestream feed for your website using a little bit of code.

code to display the feed

script src=”http://friendfeed.com/embed/widget/openelements?v=3&num=4&hide_logo=0&hide_comments_likes=0&hide_subscribe=0&width=330″ type=”text/javascript”

Using CSS code, the thought bubble expands when the feed is finished loading.

CSS for styling (works on modern browsers)

.friendfeed {
position:absolute;
left:551px;
top:50px;
width:329px;
background-color: #cccccc;
padding-left: 20px;
padding-bottom: 20px;
border-radius: 25px;
}

#friendfeed.widget, #friendfeed.widget div, #friendfeed.widget span, #friendfeed.widget img, #friendfeed.widget table, #friendfeed.widget tr, #friendfeed.widget td {
margin-top: 0px !important;
margin-left: 0px !important;
padding-left: 0px !important;
font-family: ‘lucida sans unicode’, ‘lucida grande’, sans-serif !important;
font-size: 0.98em !important;
font-weight: normal !important;
line-height: 95% !important;
letter-spacing: 0 !important;
color: #333 !important;
background-color: transparent !important;
border:0 !important;
}

See the full working example at marioseijo.com

Bing Twitter maps

Mario — Sun, 04 Apr 2010 18:05:46 +0000

Bing maps recently added the ability to add custom Twitter feeds into their maps, it’s called Bing Twitter maps. The map uses Silverlight 3 by default, but the nice part about it is this: If you don’t have Silverlight installed, the map falls back to plain Javascript, which is recognized by all web browsers. I took Microsoft up on their offer and plugged my Twitter feed into their maps. The code is super easy to implement and add to your own site.

HTML code:

This demo shows my Twitter feed and Bing maps.

How about you?

I’d love to hear from you if you are using the Bing maps API; go ahead and post your links in the comments section.

How to add the service mark symbol with HTML

Mario — Sat, 23 Jan 2010 21:41:41 +0000

HTML has a tag known as which stands for superscript text. This tag properly places text half a character above the baseline.

Example:
bite size technology, design and marketing ideas^SM

In order to achieve the service mark symbol as you see above, you need to align your “SM” text to the top of its line-height and decrease the font size to 50% of its original size. The following code samples will produce the service mark symbol on your web pages.

CSS code:

sup { vertical-align: text-top; font-size: 50%; }

HTML code:

bite size technology, design and marketing ideas^SM

Let me know in the comments section if this code helps you, or better yet, share it with others who might need it.