HTML5 and CSS3
The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.
Original Hover Effects with CSS3
Giving feedback to the visitors is a massive part of the user experience , if the user clicks a button they would expect to see something happen. An example of this is uploading an image to a website, it may take some time for the server to upload the image, but when the user clicks the upload button they would expect the page to do something. If the page doesn’t give any feedback that the image is currently being uploaded, the visitor could get impatient and either repeatedly click the upload button or navigate away from the page before the upload is complete, for this reason you should always give feedback to your visitors. A common approach is to use a spinner graphic which is either done with a gif image or with Javascript .
How To Create Loading Spinners Using CSS3 Animations
View code Play Walkthrough Learn to display organizational data or a family tree just using CSS, without any flash or javascript. Very simple markup - just nested lists.
CSS3 Family Tree
Fixing 5 common SEO problems with HTML5... today! - distilled
For sometime now you’ve probably been hearing conversations about how some problem or another would be much easier solved with HTML5, but because X percent of users are still on IE we can’t “move to HTML5″. However, in reality, HTML5 isn’t something you need to ‘switch on’ – it isn’t one big thing. Think of HTML5 not as a tool but as a toolset ; a collection of new features, in many cases independent of one another. This post deals with the SEO benefit of HTML5, and so our focus is on what Google and co. can interpret and not with browser compatibility.
CSS Font and Text Style Wizard Welcome to the CSS Font and Text Style Wizard, brought to you due to the popularity of the HTML and CSS Table Border Style Wizard . Use this wizard to experiment with font and text styles and generate sample CSS style source code.
CSS Font and Text Style Wizard
TOOLS
An Ultimate HTML5 Cheat Sheet for Web Developers
HTML5 has now become the new standard for the web development, every new browser has the compatibility of HTML5, and collectively these are called modern browsers . So the moral of the story is if you are a web developer and want to match the future of web development, you have to learn HTML5 . You cannot depend on previous HTML for your web projects because these will be out dated soon. But one major question may arise into your mind – How to learn HTML5 easily? Learning a new language is not an easy task, as it may have new concepts and logic.
Bulletproof @font-face syntax
Let me introduce you to the best way to do your @font-face definitions: This is the Fontspring @font-face syntax. I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses.
Premium Pixels is an excellent design resource run Orman Clarke . He publishes slick photoshop files every few days, including this Simple Table design. For a little challenge I decided to turn his Photoshop file into actual code using CSS3 and a bit of JQuery. You can see a demo here or download the code (feel free to use in your own projects, no attribution necessary). The goal was to have a cross browser compatible version that looked good in Chrome, Firefox, IE8, IE7, and IE6.
Simple Table CSS3 | WP Theming
How to create slick effects with CSS3 box-shadow
Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop’s Blending options. But now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore. View demo box-shadow property
The tools have been sorteds into the following categories: Grid and Layout, CSS Optimisers, CSS Menus Tools, CSS Buttons, CSS Rounded Corners, CSS Frames, CSS Sprites, CSS Tables, CSS Typography and CSS Forms. Grid and Layout Tools and Generators The 1KB CSS Grid Pin It This is a fresh take on the CSS grid. It can be used to streamline page templates for content management systems, its mission is to be lightweight.
50 Useful Tools and Generators for Easy CSS Development