Cagintranet Web Design » CSS http://www.cagintranet.com Pittsburgh Web Design » Cagintranet Web Design - Web Designer, Developer, Graphic Artist and Web 2.0 Guru Thu, 25 Mar 2010 10:32:42 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 CSS Tip: Easy Cross Browser & Valid CSS Text Shadows http://www.cagintranet.com/archive/css-tip-easy-cross-browser-valid-css-text-shadows/ http://www.cagintranet.com/archive/css-tip-easy-cross-browser-valid-css-text-shadows/#comments Sun, 22 Jun 2008 13:42:49 +0000 Chris Cagle http://www.cagintranet.com/?p=84 Photo Credit: Glockenblume Although I am certain that I am not the only one doing this, I have developed an extremely easy way to get CSS text shadows without the need to use the wildly unsupported CSS property of text-shadow. .post_title { position:relative; padding:10px 0 0 0; } .post_title h1 { position:absolute; top:2px; left:2px; font-size:30px; [...]]]>

Photo Credit: Glockenblume

Although I am certain that I am not the only one doing this, I have developed an extremely easy way to get CSS text shadows without the need to use the wildly unsupported CSS property of text-shadow.

Lorem ipsum dolor sit amet consectetuer

Lorem ipsum dolor sit amet consectetuer

 

The only problem that some people may see with this example is “duplicate content” because the title is shown twice in the HTML. I’ve decided that sometimes when all you need is a simple text drop shadow, this is an acceptable problem. This technique is extremely easy, and I have used it on a couple sites of mine thus far with no cross-browser issues.

The Code (HTML)

<div class="post_title">
	<h1>Lorem ipsum dolor sit amet consectetuer</h1>
	<h6>Lorem ipsum dolor sit amet consectetuer</h6>
</div>

The Code (CSS)

.post_title {
position:relative;
font-family:arial;
}

.post_title h1 {
position:absolute;
top:2px;
left:2px;
font-size:30px;
color:#C9D8E9;
padding:0;
margin:0;
}

.post_title h6 {
position:absolute;
top:0;
left:0;
font-size:30px;
color:#4471A2;
padding:0;
margin:0;
}
]]> http://www.cagintranet.com/archive/css-tip-easy-cross-browser-valid-css-text-shadows/feed/ 9 CSS Tip: Easy Semantic Web Contact Information http://www.cagintranet.com/archive/css-tip-easy-semantic-web-contact-information/ http://www.cagintranet.com/archive/css-tip-easy-semantic-web-contact-information/#comments Sun, 30 Mar 2008 12:37:26 +0000 Chris Cagle http://www.cagintranet.com/?p=43 The semantic web is coming in a hurry, so now is as good a time as any to embrace it and spend a few minutes to update your web site accordingly. On my site here, and for every member on my local community site, I use the same small snippet of HTML to make my [...]]]>

The semantic web is coming in a hurry, so now is as good a time as any to embrace it and spend a few minutes to update your web site accordingly.

On my site here, and for every member on my local community site, I use the same small snippet of HTML to make my contact information semantic.

HINT: You will notice that near the bottom of the HTML code, there is a link to download the hCard. This is a service that Technorati provides free of charge, and is a wonderful way to give your visitors yet another way to save your contact information. For more information on what an hCard is, read up about it at Microfromats.org.

HTML

<dl class="vcard">

 <dt>Mail:</dt>
  <dd class="adr">
    <div class="fn org">Business Name</div>
    <div><span class="nickname">Your Name</span>,
    <span class="title">Owner</span></div>
    <div><span class="street-address">24 Main Street</span></div>
    <div><span class="locality">Pittsburgh</span>,
    <span class="region">PA</span>
    <span class="country-name">USA </span>
    <span class="postal-code">15202</span></div>
  </dd>

 <dt>Email:</dt>
  <dd><a href="mailto:admin@yourdomain.com" class="email">admin@yourdomain.com</a></dd>

 <dt>Phone:</dt>
  <dd class="tel">
    <span class="type">Work</span>
    <span class="value">412-555-9999</span>
  </dd>
  <dd><a href="http://technorati.com/contact/http://yourdomain.com/contactpage">hCard</a></dd>

</dl>

CSS

dl,dt,dd {margin:0; padding:0}
dl.vcard {margin:0 0 35px 5px;}
dl.vcard dt, dl.vcard .org, dl.vcard .type {display: none;}
dl.vcard dd.adr {padding-bottom: 1em;}
]]> http://www.cagintranet.com/archive/css-tip-easy-semantic-web-contact-information/feed/ 0