52Framework is a HTML5 and CSS3 framework which aims to build websites using HTML5 & CSS3 easily.
This framework fully uses all the great advantages of HTML5 & CSS3 which makes much cleaner mark up.
WebSite: http://52framework.com
Demo: http://52framework.com/downloads
Download: http://52framework.com/demo
CSS3, please! is a online cross-browser CSS3 rule generator. Which provides you to produce CSS3 properties by editing default properties. You can see the results of your inline changes in real time in a preview box. You can also able to toggle rules on and off to see how your design is looks like.
Using tool you can write rules for rounded boxes, border-radius, box-shadow, linear-gradients, rotation & @font-face.
CSS3 Generator is similar to CSS3, please!. It also explains each CSS3 value and shows the browser requirements of every rule.
Using tool you can write rules for Border Radius, Box Shadow, Text Shadow, @Font Face, Multiple Columns, Outline, Gradients.
In this post smashingmagazine present 45 useful CSS/JavaScript-techniques that may help you find clever solutions to some of your problems or just get inspired by what is possible with CSS. It cover interesting CSS-techniques, navigation menus, CSS typography, CSS lists and CSS buttons.
Link: Read Article
In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects… Read
http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3
In this post we will take a look at some interesting properties of CSS3 that you can put into practice in your website designs today.
Read
By now everyone has heard of HTML 5 and its new functionalities. Pretty exciting isn’t it… also a little daunting. Of course, there are two sides to the excitement, most developers love it, others feel it has come to soon and we are not ready for it. … Read
Since previous article about CSS text effects got really big attention I decided to research and find more interesting articles and websites just focused on CSS3, teaching you how to use it, showing pros and cons and much more. Read
Article provides good resources for Photoshop Web Design Interface sites…Read
In this article, you’ll have all the best resources available Read
jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessibility, flexible styling, and user-friendly design. Visit
jQuery definitely is one of the biggest trends coming in up-to-date designs and the best of all, everything is done without countless code lines. Keeping in mind such aspects I created hopefully pretty complete collection of jQuery sites, tip and trick articles, video screencasts, tutorials, cheat sheets and lot’s more. Took a while to compile and research was really solid. Read
Sprite is nothing but one image which has collection of small images that are required in web application. Which improves page loading time by reducing number of requests to server.
Consider one scenario , suppose we have two web pages,
1. first page shows 100 small images 1kb each
2. second page shows 1 big image of 100kb
What do you think , which page will get loaded first?
Now you may think that both pages will take same time as both pages has same page size (i.e. 100kb each), right??
Then your are wrong, second page will load first as compared to first page.
Because to fetch each resource, browser sends a HTTP-Request to server. that means to fetch 100 images browser needs to send 100 HTTP-Requests to server. Which increases page loading time so decreases performance of site.
CSS sprites reduce HTTP requests and the loading time of pages.
This is the main reason why CSS sprites are often used on websites with heavy
traffic.Particularly sprites are used for navigation (such as for hover effects), icons and buttons.
Step 1. Creating sprite
To create sprite we can use any software like Photoshop, paint or fireworks etc.
Combine all images, icons into single images , keep some space (min. 1px ) between images as below,
Step 2. Creating CSS
Create common CSS class which applies background image to elements, As
ul#menu li a
{
background-image: url(sprite.gif);
}
Now here comes the best part. To show particular image for class, we have to set
background-position correctly.
for that we have to make every image inside the sprite move to the top left corner (0px in X, 0px in Y) as that is the point where image start seeing.
To see about image button,
ul#menu li a.about
{
background-position: -143px -4px;
}
Step 3. Creating HTML
<ul id="menu"> <li><a href="#" class="home">Home</a></li> <li><a href="#" class="about">About</a></li> </ul>
In my previous post, “CSS Formatter and Optimiser” I have given basic idea about CleanCSS Optimiser tool and how it does CSS optimization. CSS Shorthand is one of the important notations of CSS property which helps a lot to get optimized CSS.
So, I have collected some of important CSS shorthand properties here.
Margin and Padding both has same shorthand syntax.
.className{
margin-top: 10px;
margin-right: 5px;
margin-bottom: 3px;
margin-left: 1px;
}
Instead of above we can simply combined into
.className{
margin: 10px 5px 3px 1px;
}
Value of margin property is in Top, Right, Bottom and Left.
Here are some images for quick reference of shorthand notations,
Refer following image for shorthand syntax,
Background Default Values
By default, the background property will assume the following when you do not declare each value of the properties,
Refer following image for shorthand syntax,
Border has 3 px width by defaults, following CSS will create a ‘3px’ solid blue border
.className{border:solid blue;}
Border examples
1. Following CSS will create 5px solid ‘black’ border
p {
border:5px solid;
}
2. Following CSS will create a ‘3px’ dashed ‘black’ border
p {
border:dashed;
}
3. Following CSS will create a 3px dotted red border
p {
border:dotted;
color:red;
}
4. Following CSS will create a 5px solid blue border
body {
color:blue;
}
body p {
border:5px solid;
}
Refer following image for shorthand syntax,
Font Default values
Font examples
.className {
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:1em;
line-height:1.2em;
font-family:georgia,”times new roman”,serif;
}
can be combined as,
.className {
font:bold 1em/1.2em georgia,"times new roman",serif;
}
In this post we’ll see how to apply browser specific CSS using CSS hacks.
As we know that Each browser has its own default styling of HTML elements also
some of the CSS properties are supports only limited number of browsers.
So to remove default styling we can use either reset CSS which will applied to all browsers or we can use CSS hacks for particular browser.
Using Conditional comments we can easily target IE.Conditional comments only works in Internet Explorer.
e.g. for IE 8 ,
<!--[if IE 8]><style type="text/css"> selector {property:value} </style><![endif]-->
The selector is HTML element/tag name or can be css class name,
property is the css attribute and value indicates attribute value.
Conditional comments are also applicable in page body,
e.g
<body> <!--[if IE 8]> This is Internet Explorer 8<br /> <![endif]--> </body>
Following are the syntax of Conditional comments for IE
<!--[if IE]>IE <![endif]--> <!--[if IE 5]>IE 5 <![endif]--> <!--[if IE 6]>IE 6<![endif]--> <!--[if IE 7]>IE 7<![endif]--> <!--[if IE 8]>IE 8<![endif]--> <!--[if gte IE 5]>IE 5 and up<![endif]--> <!--[if lt IE 6]>IE lower than 6<![endif]--> <!--[if lte IE 6]>IE lower or equal to6<![endif]--> <!--[if gt IE 6]>IE greater than 6<![endif]-->
/* Only Firefox 1 - 2 */ body:empty selector {property:value}
/* All Firefox */ @-moz-document url-prefix() { selector {property:value} }
The Safari CSS hack works similar to the Firefox hack because it uses a Safari proprietary extension to CSS. By using the -webkit prefix we can target Safari and only Safari.
@media screen and (-webkit-min-device-pixel-ratio:0) { selector {property:value} }
or
body:nth-of-type(1) #safari { display: block; }
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body selector {property:value} }
CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise. For optimization CleanCSS is using CSSTidy – an opensource CSS parser and optimiser.
CSS Optimiser reduces the size of CSS file more than 30% depending on various conditions, it causes faster loading pages and lower traffic costs.
HTML 5 is the next major version of HTML. It introduces a new elements that will make our pages more semantic. This will make it a lot easier for search engines and screen readers to navigate our pages, and improve the web experience for everyone.
HTML 5 uses < !DOCTYPE html>which tells browser that current document is written in HTML5 .
HTML 5 introduces a number of APIs that help in creating Web applications. These can be used together with the new elements introduced for applications:
canvas element.contenteditable attribute.draggable attribute.
I have created demo page by referring post by Mads Kjaer and HTML 5 working draft . Mads has explained very well in the post.
The structure of page is,
<!doctype html> <html> <head> <title>Page title</title> </head> <body> <header> <h1>Page title</h1> </header> <nav> <!-- Navigation --> </nav> <section> <!-- Main content area --> </section> <aside> <!-- Sidebar --> </aside> <footer> <!-- Footer --> </footer> </body> </html>
Online Demo:
Download Demo Page:
Why:
If content of page is small then footer might end up in the middle of the page instead of down at the bottom of the browser window.
Using Sticky Footer CSS, footer will stick to the bottom of the page.
see at following image to see difference,
WebSites: Here are two sites,
1.http://ryanfait.com/sticky-footer/
2. http://www.cssstickyfooter.com/
They are compatible with all major browsers, but it requires fixed pixel height.
Ultimate Web Resources 