CSS Drop Down Menu
Use just CSS to create a drop down menu from a unordered list of links, without the need for Javascript.
Take a look at the CSS drop down menu demo, code and downloads…
Grains Of SandCSS3 & HTML5 Demos, Templates and Info
Pseudo Elements - :before and :after
A pseudo-element places a fake element before or after the content of the targeted element. For example p:before{content:'*';} will insert an asterisk before every paragraph. You can of course acheive much more than that using :before and :after…
Continue reading - Pseudo Elements - :before and :after
Give A Polaroid Effect To Images
Give plain images a Polaroid effect using figure and figcaption tags, along with some other CSS3 tricks.
Find out how to give plain images a Polaroid effect and download the source files.
Image Hover Effects
Give the effect of images moving when they’re hovered or in focus, using CSS3 tranform:rotate and transform:scale.
Find out how to create the image hover effect and download the source files.
Free HTML5 Templates
A few free HTML5 website templates have been now been added to the main site…
We’ll be adding more soon.
Larger Image Popup When Thumbnail Hovered
Using CSS positioning, along with some CSS3 styling, you can show a full sized image in a popup window when a thumbnail is hovered over, without the need for any javascript
Style Buttons With CSS3
CSS3 makes it easy to style form buttons by adding shadows, curved borders and gradients. You can of course style every part of a form, but that’s for another demo.
CSS3 transform:rotate
Use CSS3 transform to easily and quickly rotate an element to add nice effects to your website
Basic Syntax
The syntax is very straightforward, simply state how much you want the element to be rotated in degrees (positive for clockwise, negative for anticlockwise).
transform:rotate (n deg);
Browser Support
xxx is supported by all the latest browsers, including IE9. Older versions require the following prefixes…
Mozilla browsers (Firefox): -moz- :
Webkit browsers (Chrome, Safari): -webkit- :
Opera browsers: -o- :
Internet Explorer: -ms- :
IE8 and earlier will require CSS3pie
Usage
transform:rotate(10deg); - element will be rotated 10 degrees clockwise
transform:rotate(-5deg); - element will be rotated 5 degrees anticlockwise
Example
Further Reading
We’ve provided some transform:rotate demos, complete with full explanations and downloads.
Styling Text With CSS
Whilst you still might want or need to use Photoshop (or similar) to create text for headings and logos, it’s getting easier and quicker to use CSS to style most text on your site. Not using images in the place of text is a good idea from a accessibility and usability standpoint, it also reduces the weight and load time of your code - making all your visitors far happier.
Continue reading - Styling Text With CSS