Useful CSS3 Coding Examples and Other CSS3 Fun Stuff

Below are some useful and time saving examples regarding CSS3 and its many uses.

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

  *  Multi-column text using CSS3
  *  HTML5 canvas awesomeness – games roundup
  *  HTML5 logo using CSS3
  *  Feature table design with CSS3
  *  CSS gradients – quick tutorial
  *  Center a block element without knowing its width – Part II

Web Design Trends for 2011

The evolutionary process of web design continues to move forward. If you are involved in designing web sites then I’m sure that you agree that there are some very exiting changes relating to web standards that are starting to show up on newly designed sites. Leading the charge on those changes are HTML5 and CSS3.

These two changes are greatly going to impact designs for the upcoming year. HTML5 and CSS3 will make your design process more productive and easier to manage.

Below we have listed some trends to watch out for in 2011:

     *  JavaScript – Instead of flash JavaScript can be smaller and quicker to run, along with being more stable and less buggy.

     *  Web 2.0 – Application design will continue its popularity in 2011, both on the web and in mobile design.

     *  Grid Design – With HTML5 you will see less table design and more grid based design.

     *  Personalization – Users want to interact with technology, this push will continue.

     *  Browser Speed – Browsers will continue to push the envelope on speed.

Useful List of Customizations for CSS Cursors for WebKit

 If you need a useful list of CSS cursors for your websites follow the links below.

Multi-Tasking is Overrated

This buzzword Multi-Tasking at one time was tops on the list. Now depending on who you talk to they will tell you that it is one of the top buzzwords over the past 10 years or so.

Think about this if you will. What if i were to tell you that the start of Multi-Tasking is the near death of innovation. Any inventor will tell you that a great invention takes time and patience. The art of Multi-Tasking to speed everything up is a hindrance to innovation.

If you do some research of the top inventions/inventors of the 20th/21st century you will find that they didn't do it by Multi-Tasking. No their invention was nurtured and cared for along the way with great thought, patience and consistency. That is how great things come about.

We have been brainwashed into believing that quick, quick, quick is the way to go. Everything needs to have been done yesterday.

So what is the point to all of this jibber jabber?

The point is quite simple, slow down, and think before you act, you don't need to go so fast that you can't think straight.

Multi-Tasking reduces your overall effectiveness

Be an inventor by focusing on what you are doing and doing it to the best of your ability. Understand that the greatness that you create will come over time because you will think of newer and better ways to getting the same thing done.

Remember stay focused, take your time and get it done right the first time.

Google has just introduced a new group of tags for attributing sources for news stories. With these new tags you will be able to tell Google the source of the story that you are covering.

The two new tags are: syndication-source and original-source.

syndication-source indicates the preferred URL for a syndicated article. If two versions of an article are exactly the same, or only very slightly modified, we're asking publishers to use syndication-source to point us to the one they would like Google News to use. For example, if Publisher X syndicates stories to Publisher Y, both should put the following metatag on those articles:
< meta name="syndication-source" content="http://www.publisherX.com/wire_story_1.html" >

original-source indicates the URL of the first article to report on a story. We encourage publishers to use this metatag to give credit to the source that broke the story. We recognize that this can sometimes be tough to determine. But the intent of this tag is to reward hard work and journalistic enterprise. For example, to credit the publication that broke a story you could use a metatag like this:
< meta name="original-source" content="http://www.example.com/burglary_at_watergate.html" >

To get more information on exactly how to use these tags you can visit the Google Help Center.

A URL Tracking Hack Worth Knowing

The first time I heard about this hack it was at the Search marketing Expo (SMX - East) in New York City. After learning about bit.ly’s tracking capabilities I was able to go back and see how many people had been clicking on my bit.ly links, very cool. Why I had never heard of this hack before is beyond me.

 For all of us that use social media on a regular basis you can now find out how effective your social media campaign / links are.  The only prerequisite is that you do need to have a link in your post, and that link needs to be a bit.ly link.

 Just in case you didn’t know bit.ly is a URL shortener, and is widely used in social media especially Twitter. With Twitter’s 140 character limit bit.ly will take your URL and shorten it for you.

In order to track your link results all you need to do is add a plus (+) sign to the end of any bit.ly link and you will be taken to a statistics page. You will be able to see how many people clicked on your link. It will tell you what date and time your link was clicked on. It will also provide you with referrer and location information.

For those of us who use social media on a regular basis this is a great hack. Hope you enjoy it! Spread the word.

RockMelt, a company backed by Netscape founder Marc Andreessen is going to be coming out with a new browser that will be unlike any browser that is out today. Based on the video below this new browser will have its talons stretched into the social media market's nest.

In order to provide you with a social media experience the RockMelt browser will share your Facebook information and will need to tie into your Facebook account. Some are calling it a Facebook browser and until we can get our hands on it I'm not sure if that will be a good name for it or not.  UPDATE: Now having spent a little time with this browser I can see why some would say that, but it is more than that.

Some differences with RockMelt is that it is built around your friends, feeds, and search results. The left rail is for friend. The right rail is for sites. And the top rail is for search. It is built on Chromium the same open source browser that forms the foundation of Google’s Chrome browser.

The following has been said: Since RockMelt shares your friends, feeds, and search results it does bring back into question the Facebook privacy policy issues. We will have to wait and see on this. From a marketing perspective RockMelt should be able to target very specific ads to the end user based on the information that they are going to have, but are you going to be okay will giving them all of that information?

UPDATE: RockMelt has said the following in regards to security/privacy: "We're not running ad networks, so we're not trying to target users in any way. We're not storing personal information about users and what they do. We anonymize info about what users are doing. We never record info about users, what they're doing online, searches they're doing, anything like that."

The Web has changed a lot since Marc Andreessen revolutionized the Internet with the introduction of his Netscape browser in the mid-1990s. That's why he's betting people are ready to try a different Web-surfing technique on a new browser called RockMelt.

As is always the case it is never a dull moment when listening to Marissa speak. She is eloquent in her speech, very engaging and informative. She is extremely well versed when she discusses the different inner workings related to Google.

Adobe is going to be coming out with a Flash to HTML5 conversion tool. The conversion video below shows a pretty cool example of how this is going to function. Looks like a pretty clean and precise export. I can't wait for this release!

The Edge prototype uses the Webkit rendering engine to preview animations. Like Dreamweaver, Edge offers a source code editing mode so, like Dreamweaver, when it’s probably a good idea for users to have some knowledge of coding to verify that the generated code is clean. This looks like a very useful tool for those who want to render animation in their html pages. The interface is very much like Dreamweaver and Flash, so the learning curve should be minimal. I look forward to its eventual release!