Feb
8
2012
css // code // html5

CSS Hover Trick

In no way am I claiming this to be original.  But I can’t say I have seen this trick done anywhere else.  With the CSS :hover selector, you can create a nice “status message” appear in one location while hovering over particular items in a list (or menu).  Below are the screen captures of what the trick accomplishes, followed by the entire source code to make it possible.  Enjoy!

csshover00 
No mouse hover

 

csshover01
Mouse hover over first item

 

csshover02
Mouse hover over second item

 

csshover03
Mouse hover over third item

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>CSS Hover</title>
    <style>
        #csshover ul { 
            position:           relative;
            margin:             0;
            padding:            0; 
        }        
        #csshover li {
            list-style-type:    none;
            display:            inline-block;
            margin-right:       3em;  
            cursor:             pointer;   
        }
        #csshover li p {
            position:           absolute;
            top:                2em;   
            display:            none;
            left:               0em;
        }
        #csshover li:hover p {
            display:            inherit;
        }
    </style>
</head>
<body>
    <article id="csshover">
        <h1>CSS Hover Trick</h1>
        <p>Hover over each of the words below.  Look for status message below!</p>
        <ul>
            <li><div>CSS  </div><p>It's all about the style!</p></li>
            <li><div>Hover</div><p>When you wander above...</p></li>
            <li><div>Trick</div><p>Look Ma, no JavaScript!</p></li>
        </ul>
    </article>
</body>
</html>
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jan
28
2012

HTML5 for the Real World

Here are the resources for the “HTML5 for the Real World” Presentation given at SoCalCodeCamp on Saturday January 28th, 2012.  Enjoy!

[HTML5 Demos]

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Dec
7
2011

HTML5 Form Inputs

My latest article published at DevProConnections is about collecting and validating data using the new HTML5 enhancements to form inputs. In the article I cover new attributes to input elements such at required, placeholder, and pattern. I showcase how to style forms with CSS3, and how to customize validation with script.

To read the article online, please visit HTML5 Form Enhancements with CSS3 and JavaScript at DevProConnections!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Nov
10
2011

HTML5 Web Camp Videos

The highly popular HTML5 Web Camp events sponsored by Microsoft are typically filled to capacity when delivered at any location.  In my humble opinion, the best HTML5 Web Camp delivered to date was in my hometown of Phoenix, AZ.  Fortunately, the team at EventDay showed up that day to record every session.  With great pleasure, I announce the availability of these videos for you to watch at your convenience – for free!

video-callouts

Each video provides a simple user interface that allows you to see the presenter, the content on the screen, and navigation controls to the topic you are most interested in.  When the screen in maximized, you will truly be immersed into the experience as if you attended live!

 

 

The link for all these videos is found below.  Please share with your community!!!

http://bit.ly/html5camp-videos

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Nov
2
2011

HTML5 Syntax & Semantics

My latest article published by DevProConnections is dealing with a fundamental yet very misunderstood topic – semantics.  If you would like to learn why semantics matter, I encourage you to read the online article – “HTML5 Syntax and Semantics: Why they Matter

The article demonstrates the use of semantics by building a simple web site using Visual Studio 2010.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Oct
20
2011

WUX202 HTML5 for the Real World

A very big thank you to all the attendees of the HTML5 session at TechEd Africa.  Please enjoy the demos used in the presentation by downloading the zipped resources below.  Please post questions and comments here to keep th conversation alive.  Cheers, and thanks for making the session one of the highest attended and rated at TechEd :-)

HTML5 DEMOS

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Sep
9
2011

HTML5 Web Camp–Phoenix, AZ

html5I am excited to announce the highly popular HTML5 Web Camp is coming to Phoenix, AZ on September 30th 2011!  If you live in the greater Phoenix area and you want to attend, register now as these events typically fill up fast.  Again, to avoid being put on a waiting list or turned down, REGISTER NOW!

To prepare for the event, please visit the HTML5 Web Camp preparation checklist page!

I look forward to seeing you there!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Aug
28
2011

HTML5 is in Style

devpro_html5_css

The next article at DevProConnections is out!

This article is all about using the new features in CSS3 in your HTML5 web sites.

This article discusses layout, media queries, and the little things that make a difference to user experience!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Aug
24
2011

HTML5 Web Camp in LA

The HTML5 Web Camp in LA was clearly the best one yet.  Hats off to all the volunteers and the attendees for being very prepared for the event. 

The event was very interactive, and many questions were regarding browser concerns.  There were a few questions regarding the future of development, and we did show a video regarding Windows 8.

The demo code featured during my presentations can be downloaded below:

[ HTML5 & CSS3 demo files ]

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jul
29
2011
css3 // html5 // script

What is the SSS in HTML5?

html5This will be the first of a series of blog posts to help someone new to HTML5 development.  The first item to address is:  What is meant by the term HTML5?  I like to think of it as “Triple S” or SSS.

  • Source
  • Style
  • Script

Source refers to the HTML markup itself, the tags.

Style refers to the inline styles and/or modules from CSS3.

Script refers to the development aspect of HTML5 with Javascript.

For an introduction to these terms in slightly more detail, please read the first article I co-authored with Daniel Egan.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).

Resources

Archives

Team Blogs

Download OPML file OPML