100 CSS Examples and Tutorials
Category: CSS, CSS Expert Ideas | 3,437 views | 5 Comments |
Navigation
Perfect pagination style using CSS- This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages.
Styling Lists
The Amazing <li>- With a little CSS, the <li> becomes one of the most powerful and versatile tags in a web designer’s arsenal. This article is a tutorial and a tribute to the amazing <li>.
So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series.
Better Ordered Lists (Using Simple PHP and CSS)- Here is an example where you ditch the traditional ordered list and create your own!
Style Your Ordered List- Here is a quick CSS tutorial on how you can use the ordered list <ol> and paragraph <p> element to design a stylish numbered list.
- Live DemoView it Here
- Download zip file
List Based Calendar- A simple way to add multiple views to a calendar, so you can view your events in a simple list, or in a month based calendar format.
- Live DemoView it Here
Forms and Form Elements
Datasheet-style form using HTML and CSS- Make a datasheet-style web form using HTML, CSS and JavaScript with multiple similar records,
Styling File Inputs with CSS and the Dom - File inputs (<input type=”file” />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. Read more…
CSS tricks
Category: CSS, CSS Examples | 1,976 views | 2 Comments |
1. Block vs. inline level elements
HTML elements are either block or inline elements. The characteristics of block elements include:
- Always begin on a new line
- Height, line-height and top and bottom margins can be manipulated
- Width defaults to 100% of their containing element, unless a width is specified
Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. Inline elements on the other hand have the opposite characteristics:
- Begin on the same line
- Height, line-height and top and bottom margins can’t be changed
- Width is as long as the text/image and can’t be manipulated
Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong>and <em>.
To change an element’s status you can use display: inline or display: block. But what’s the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this, but in actual fact this is a very powerful technique, which you can use any time you want to: Read more…
One thing to do before starting a new project
Category: CSS Expert Ideas | 603 views | Add a Comment |
- Invest time in getting organized.
- Clean up your desk.Getting rid of the visual clutter around you will establish an environment where creativity can flourish.
- Estimate your capabilities and capacities.
always ensure that you have enough time and resources to do the job justice, otherwise you’ll end up cutting corners, pushing back deadlines, and deliver a sub standard experience to the client and the user base.