Muracco Enterprises http://muraccoenterprises.com/blog Web Design & E-Commerce Solutions Tue, 31 Jan 2012 21:11:05 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 4 Rare HTML Tags You Really Should Know http://muraccoenterprises.com/blog/2012/01/4-rare-html-tags-you-really-should-know/ http://muraccoenterprises.com/blog/2012/01/4-rare-html-tags-you-really-should-know/#comments Tue, 31 Jan 2012 21:11:05 +0000 Michael Muracco http://muraccoenterprises.com/blog/?p=131 Read the Rest..]]> Share

1. <cite>

All of us will be familiar with the <blockquote> tag, but did you know about <blockquote>’s little brother <cite>? <cite> allows you to define the text inside of the element as a reference. Typically the browser will render the text inside of the <cite> tag in italics, but this can be changed with a touch of CSS.

The <cite> tag is really useful for citing bibliographic and other site references. Here’s an example of how to use the cite tag in a paragraph:

The new organization book <cite>Getting Things Done</cite> has taken
 the web by storm.

2. <acronym>

The <acronym> tag is a way to define or further explain a group of words. When you hover over text that has the <acronym> tag used, a box appears below with the text from the title tag. For example:

The microblogging site  Twitter has
 recently struggled with downtimes.

3. <address>

The <address> tag is quite an obscure little tag, but that doesn’t mean it isn’t useful! As the name implies, <address> allows you to semantically markup addresses in HTML. The nifty little tag will also italicize all of the data within the brackets, though the style can easily be changed through simple CSS.

<address>Glen Stansberry
	1234 Web Dev Lane Anywhere, USA </address>

4. <abbr>

The <abbr> tag is much akin to the <acronym> tag, except the <abbr> tag is only used to define abbreviated words. Just like <acronym>, you define a title within the tag. When a visitor hovers over the abbreviated text, the full definition appears below. The <abbr> tag is rarely used, but the benefits are many for screen readers, spellcheckers and search engines.

Sgt. Pepper's Lonely Hearts Club
 is my favorite album.

Share

]]> http://muraccoenterprises.com/blog/2012/01/4-rare-html-tags-you-really-should-know/feed/ 0 HTML 5 Features http://muraccoenterprises.com/blog/2011/12/html-5-features/ http://muraccoenterprises.com/blog/2011/12/html-5-features/#comments Fri, 09 Dec 2011 12:10:26 +0000 Michael Muracco http://muraccoenterprises.com/blog/?p=104 Read the Rest..]]> Share

Here are just a few of the many great new features HTML 5 has to offer!

 

New Doctype

The old XHTML  doctype

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The new HTML 5 doctype

    <!DOCTYPE html>

The doctype isn’t even really necessary for HTML5. Older browsers do require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.

 

The Figure Element

The old style of markup with caption for an image.

    <img src="path/to/image" alt="About image" />
    <p>Image of Mars. </p>

There is no easy way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.

    <figure>
        <img src="path/to/image" alt="About image" />
        <figcaption>
            <p>This is an image of something interesting. </p>
        </figcaption>
    </figure>

 

No More Types for Scripts and Links

You no longer need to add the type attribute to your link and script tags.

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

It’s implied in HTML 5 that these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.

    <link rel="stylesheet" href="path/to/stylesheet.css" />
    <script src="path/to/script.js"></script>

 

Make your Content Editable

The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list.

    <!DOCTYPE html>  

    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>untitled</title>
    </head>
    <body>
        <h2> To-Do List </h2>
         <ul contenteditable="true">
            <li> Break mechanical cab driver. </li>
            <li> Drive to abandoned factory
            <li> Watch video of self </li>
         </ul>
    </body>
    </html>

 

Header & Footer

With XHTML our code looked like this:

    <div id="header">
        ...
    </div>  

    <div id="footer">
        ...
    </div>

With HTML5, we have access to the <header> and <footer> elements. The mark-up above can now be replaced with:

    <header>
        ...
    </header>  

    <footer>
        ...
    </footer>

 

HTML 5 Features You Can Use Now

This video provided by nettutsplus explains the many features you should start using right away. Simpler, cleaner code is always a good thing.

 

Share

]]> http://muraccoenterprises.com/blog/2011/12/html-5-features/feed/ 0 Perfect Rounded Corners With CSS http://muraccoenterprises.com/blog/2011/03/perfect-rounded-corners-with-css/ http://muraccoenterprises.com/blog/2011/03/perfect-rounded-corners-with-css/#comments Tue, 08 Mar 2011 19:10:48 +0000 Michael Muracco http://muraccoenterprises.com/blog/?p=58 Read the Rest..]]> Share

note: These effects as well as many others on this site, (such as Drop Shadow), work in all major browsers except Internet Explorer. Microsoft as usual is not up to the task, (IE 9 will finally catch up). I recommend using Mozilla Firefox, Safari or Google Chrome.

A great way to enhance the visual appearance of various block-level elements is to use a “rounded-corner” effect. On my website I use CSS to create rounded corners for several different types of elements, including image borders, content panels, and even pre-formatted code blocks. The good news about using CSS to create rounded-border effects is that it is possible to apply the effect to many different browsers. Sure, Internet Explorer can’t deal with it, but that’s the whole idea behind progressive enhancement, right? Browsers that “get it” enjoy the benefits, while those that don’t continue to function perfectly well without the enhancements.

So here’s a complete collection of quick copy-&-paste code snippets for easy rounded corners with CSS:

CSS Rounded corners for all four corners

   / * 4 rounded corners */
.all-four-rounded-corners
 { -webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px; }

CSS Rounded corners for top-left corner

/* top-left rounded corner */
 .top-left-rounded-corner
 { -webkit-border-top-left-radius: 10px;
 -khtml-border-radius-topleft: 10px;
 -moz-border-radius-topleft: 10px;
 border-top-left-radius: 10px; }

CSS Rounded corners for top-right corner

/* top-right rounded corner */
.top-right-rounded-corner
{ -webkit-border-top-right-radius: 10px;
-khtml-border-radius-topright: 10px;
-moz-border-radius-topright: 10px;
 border-top-right-radius: 10px; }

CSS Rounded corners for bottom-left corner

/* bottom-left rounded corner */
 .bottom-left-rounded-corner
 { -webkit-border-bottom-left-radius: 10px;
 -khtml-border-radius-bottomleft: 10px;
 -moz-border-radius-bottomleft: 10px;
 border-bottom-left-radius: 10px; }

CSS Rounded corners for bottom-right corner

/* bottom-right rounded corner */
 .bottom-right-rounded-corner
 { -webkit-border-bottom-right-radius: 10px;
 -khtml-border-radius-bottomright: 10px;
 -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px; }

Non-symmetrical CSS Rounded corners

/* exploded rounded corners */
 .exploded-rounded-corners
 { -webkit-border-bottom-right-radius: 10px;
 -webkit-border-bottom-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -webkit-border-top-left-radius: 10px;
 -khtml-border-radius-bottomright: 10px;
 -khtml-border-radius-bottomleft: 10px;
 -khtml-border-radius-topright: 10px;
 -khtml-border-radius-topleft: 10px;
 -moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
 -moz-border-radius-topright: 10px;
 -moz-border-radius-topleft: 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 border-top-right-radius: 10px;
 border-top-left-radius: 10px; }

Share

]]> http://muraccoenterprises.com/blog/2011/03/perfect-rounded-corners-with-css/feed/ 0 Text-shadow, Photoshop like effects using CSS http://muraccoenterprises.com/blog/2011/03/text-shadow-photoshop-like-effects-using-css-2/ http://muraccoenterprises.com/blog/2011/03/text-shadow-photoshop-like-effects-using-css-2/#comments Fri, 04 Mar 2011 15:51:03 +0000 Michael Muracco http://muraccoenterprises.com/blog/?p=53 Read the Rest..]]> Share

note: These effects as well as many others on this site, (such as rounded corners), work in all major browsers except Internet Explorer. Microsoft as usual is not up to the task, (IE 9 will finally catch up). I recommend using Mozilla Firefox, Safari or Google Chrome.

CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows:

text-shadow: 2px 2px 2px #000;

This produces the following text with a shadow 2px right
and below of the text, which blurs for 2px:

Really cool drop shadow effect with CSS3

other examples:

text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87
Really cool drop shadow effect with CSS3
text-shadow: 2px 2px 0 #959595;
Really cool drop shadow effect with CSS3
color: #12c911; text-shadow: 1px 1px black, 2px 2px #149c14, 3px 3px #149c14, 4px 4px #149c14, 5px 5px #149c14, 6px 6px #149c14, 7px 7px #149c14, 8px 8px #149c14;
Multiple text shadows can be applied to the same element simultaneously, which can make for some interesting effects. To add multiple text shadows to an element, just separate each text shadow definition with a comma within the same text-shadow property.

Share

]]> http://muraccoenterprises.com/blog/2011/03/text-shadow-photoshop-like-effects-using-css-2/feed/ 0