Exposed Elements » CSS http://exposedelements.com minimalism, web design and technology Fri, 18 May 2012 05:12:27 +0000 en hourly 1 my lifestream http://exposedelements.com/2010/10/my-lifestream/ http://exposedelements.com/2010/10/my-lifestream/#comments Sun, 10 Oct 2010 02:29:33 +0000 Mario http://exposedelements.com/?p=638

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

]]> http://exposedelements.com/2010/10/my-lifestream/feed/ 0 How to add the service mark symbol with HTML http://exposedelements.com/2010/01/how-to-add-the-service-mark-symbol-with-html/ http://exposedelements.com/2010/01/how-to-add-the-service-mark-symbol-with-html/#comments Sat, 23 Jan 2010 21:41:41 +0000 Mario http://exposedelements.com/?p=375 HTML has a tag known as <sup> which stands for superscript text. This tag properly places text half a character above the baseline.

Example:
bite size technology, design and marketing ideasSM

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<sup>SM</sup>

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

]]> http://exposedelements.com/2010/01/how-to-add-the-service-mark-symbol-with-html/feed/ 6