With so many blogs, articles, videos, books and other types of media it's hard to keep track of all the great stuff out there. This is a list of little examples of tricks that I've seen around. I have kept the examples as close to the origanal source material. In some cases I've added a little to expand on. Comments were added if I felt it would help.
Included is a link to the source material where I learned (in most cases copied) the code from. A link to the source video has been Please visit the creator's sites to learn step by step how to create the code.
A trick I learned was to make the CSS editable using the contenteditable tag and making the head visible. Not all the CSS on the page is editable just the part that is being shown. If you want to see how the editable part works, use
the view source. I did my best to put everything in one file to make it easier to view.
Create custom Definition lists with CSS.
Mohit Manuja - YouTubeUse a sprite sheet for bullets in a list.
Mohit Manuja - YouTubeAdd custom Counters for an ordered list
Mohit Manuja - YouTubeColored numbered bulleted list
Mohit Manuja - YouTubeUsing CSS to create Gradients
Mohit Manuja - YouTubeExamples of using CSS3 Radial Gradients
Mohit Manuja - YouTubeExamples of using CSS3 Linear Gradients
Mohit Manuja - YouTubePutting a box shadow inside the box
PHP Academy - YouTubeWorking on inset Box Shadows
PHP Academy - YouTubeFolded corner using CSS3
Mohit Manuja - YouTubeDog eared corner using CSS.
PHP Academy - YouTubeA stamp effect for images
Mohit Manuja - YouTubeUse a Sprite sheet to hold button icons, including hover and click.
Adam Khoury - YouTubeUse a Sprite sheet to hold all the Social Logos
Mohit Manuja - YouTubeAnimate Social Icons
Mohit Manuja - YouTubeCreate an evenly spaced menu accros the top of a page.
PHP Academy - YouTubeA simple Tab system using only CSS.
PHP Academy - YouTubeTrick to correct float issues.
Mohit Manuja - YouTubeExamples of using View Ports
PHP Academy - YouTubeTips on creating a responsive design
PHP Academy - YouTubeWebsites and Tips to take care prefixes
Mohit Manuja - YouTubeCustom Fancy headline
Mohit Manuja - YouTubeCustomer Tooltip in CSS
Mohit Manuja - YouTubeCreate an Envelope shape in pure CSS
Mohit Manuja - YouTubeCreate the Flag of India in CSS
Mohit Manuja - YouTubeShake up a title just in CSS
Mohit Manuja - YouTubeA fixed height Stick Footer with CSS
PHP Academy - YouTubeUsing a Full Screen image as background
PHP Academy - YouTubeAdding a little spice to your HR tag!
CSS TricksA run through of the display attribute. Part 1
Learn to Program>A run through of the display attribute. Part 2
Learn to ProgramA run through of the display attribute. Part 3
Learn to Program