Best Web Buzz

Front-end web developers always want to find ways to optimize your HTML and CSS code. I saw a post on Cssglobe.com by Alen Grakalic about CSS Text Gradient and it opened me the idea about CSS Text Gradient. So maybe I can have this look gradient without using a transparent gradient PNG file. Bestwebbuzz.com presents text gradient without transparent gradient PNG file. This is how it works.

css gradient

CSS
h2 {
 font-size:250%;
 color:#0079b6;
 font-weight:normal;
 letter-spacing:-.05em;
 margin:.6em 0;
 position:relative; 
 font-weight:bold;
}
h2 span{
 position:absolute;
 display:block;
 top:0;
 left:0;
 height:60%;
 width:100%;
 background-color:#FFFFFF;
 filter: alpha(opacity=65); /*     <—-this part do the magic——*/
  -moz-opacity: 0.65;/*       <—–this part do the magic———*/
  opacity: 0.65;/*          <—-this part do the magic———-*/
}

HTML
<h2>My Cool Title<span></span></h2>
<h3>My Cool Title<span></span></h3>

You can download the demo file here demo

I would like to thank Alen of cssglobe and Virgil of jampmark.com for the idea and concept.

Highlighting Downloadable documents and feeds

Another common frustration is clicking on a link thinking it is going to take you to a page only for it to start downloading a PDF or Microsoft Word document. Luckily, CSS can help us distinguish these types of links as well. This is done using the [att$= val] attribute selector, which targets attributes that end in a particular value, such as pdf or .doc:

Example:

a[href=".pdf"] {
background:url(images/pdflink.gif) no-repeat right top;
padding-right: 10px;
}
a[href=".doc"] {
background:url(images/wordlink.gif) no-repeat right top;
padding-right: 10px;
}

So in a similar way to the previous examples, you can highlight links to word documents or PDFs with their own separate icon, warning people that they are downloads rather than links to another page

Lastly, many people have RSS feeds on their website well specially blogs like WordPress. The idea is for people to copy these links into their feed readers. However, inadvertently clicking one of these links may take you to a page of seemingly meaningless data to avoid possible confusion. You could highlight RSS icon:
a[href=".rss"] {
background:url(images/rsslink.gif) no-repeat right top;
padding-right: 10px;
}

Highlighting different types of link

Some of you might already know this technique but for people still learning CSS this might help you.

A link from your website to an external page can be highlighted without using a class or an id for each anchor.

To identify if your link an external link using [href^="http:"]
#container p a[href^="http:"] {
  background: url(images/externalLink.gif) no-repeat right top;
  padding-right: 10px;
}

#container p a[href^="http://www.bestwebbuzz.com"], a[href^="http:// bestwebbuzz.com"]  {
  background-image: none;
  padding-right: 0;
}

<div id=”container”>
<p><a href=”http://www.google.com/”>This is an external link</a></p>

this is how it would look like

External Link Screen Shot

Links mixed with internal and external links
<p>And here is a reasonably long line of text containing  an <a href=”http://www. bestwebbuzz.com/index.php”>absolute internal link</a>, some text, an <a href=”http://www.yahoo.com/”>an external link</a>, some more text, a <a href=”css-button.htm”>relative internal link</a> and then some more text.</p>
</div>

this is how it would look like

mixed with internal and external links

 

You can even do it with this links

mailto:

aim:

<p>Contact me by <a href=”mailto:info@andybudd.com”>email</a><br />
Send me an <a href=”aim:goim?screenname=andybudd”>instant message</a> using AIM/iChat.</p>

This is how it would look like

highlighting im and email links

Unfortunately this does work on IE6 but work on modern browsers.

You can download source here external_link

 

This post will be continueed on the next post so watch out for that.

Reasons not to include ul, ol, li on your CSS reset.

Based on Eric Meyer’s CSS reset on meyerweb.com he included ol, ul, li which was a great help on front-end developers.

Now when you are coding for a CMS (content manangement system) site you don’t want your clients to back to you and ask you why your ul bullets are not showing and your ol is not showing numbers on display. Remember not all clients have the ability to insert inline CSS styling to make bullets and numberings show up each time they will publish a new page.

So I keep my list elements as it is regardless of each various browsers output difference.

I reset margin and padding on the section where styling is not dynamic for end users like comment post, navigations, categories and etc. To keep the design crossbrowser compatible.

I suggest you should understand and study the style first before doing copy and paste.

This just my own approach on list elements, maybe I miss something so feel free to comment on this one.

Graphic file formats and its behavior (JPEG,JPG/GIF/PNG),

Following are the most commonly used graphics file formats for putting graphics on the World Wide Web and how each differs from the others. This would be very helpful for starters on web designing having questions on there mind on what graphic file format they will use. Continue reading »