How to create a simple navigation bar with a horizontal subnav. In most cases we can achieve this effect purely with CSS, but for IE6 we will use a few lines of jQuery to cover all grounds…
-
Horizontal Sub-nav with CSS & jQuery
Posted: 3 years ago in Tutorials
Read More: Horizontal Sub-nav with CSS & jQuery
-
Multi-column layout with CSS3 and some JavaScript
Posted: 3 years ago in Tutorials
There’s a common newspaper and print layout method where the text of an article is arranged over several columns. This makes the article easer to read and looks quite nice visually. Wouldn’t it be great if you could do this with CSS? Well, in fact this is perfectly possible using the multi-column layout module that is part of the CSS3 specification. Whilst browser support for this is patchy, the module is approaching candidate recommendation status, and the method can still be implemented using proprietary but well-supported CSS rule prefixes like -moz- and -webkit- in your style sheets. For browsers that do not support the multi-column layout module in any form, there’s a useful JavaScript solution…
Read More: Multi-column layout with CSS3 and some JavaScript
-
CSS – 3 Simple steps to write better Stylesheets
Posted: 3 years ago in Articles
How to write your style sheets more efficiently. Covers these points:
- A style sheet should be easy to read
- A style sheet should be easy to maintain
- A style sheet should be well commented
- The time to achieve these goals shouldn’t negatively impact the development time of a website.
-
Elastic CSS Framework
Posted: 3 years ago in Tutorials
Elastic is a simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily. Elastic provides a declarative syntax language to define the layout structure and behavior. It’s like having a conversation with your code. This way you don’t have to remember cryptic class names, just express what you want…
Read More: Elastic CSS Framework
-
15+ techniques and tools for cross browser CSS coding
Posted: 3 years ago in Articles
Making your website compatible with a wide range of browsers is probably the hardest task of a front-end developer. To make your coding life easier, here are over 15 tools and techniques for cross-browser CSS development…
Read More: 15+ techniques and tools for cross browser CSS coding
-
Different Ways To Format CSS
Posted: 3 years ago in Articles
Formatting has nothing whatsoever to do with how the CSS functions. But that’s not to say formatting isn’t important. That would be like saying the choice of canvas isn’t important to a painter. It affects how it feels to write CSS, how easy it is to read, how easy it is to navigate, and how easy it is to revisit and reacquaint yourself with previously written CSS…
Read More: Different Ways To Format CSS
-
CSS cascade – a simple step-by-step presentation
Posted: 3 years ago in Tutorials
Here is a presentation on the CSS cascade. A simple step-by-step tutorial on the CSS cascade – for web designers and developers who are new to CSS or have struggled with the Cascade…
-
How to stop images breaking rounded corners in Safari
Posted: 3 years ago in Articles
Currently when you place an image or any ‘replaced content’ inside a block with rounded corners set by -webkit-border-radius, the image pokes through the rounded corners on Safari version 4.01 at the time of writing.
The expected and desired behaviour is that the image be cropped by the rounded corners. This can be achieved by applying overflow:hidden to the container but…
Read More: How to stop images breaking rounded corners in Safari
-
Comprehensive Guide to CSS Line Height
Posted: 3 years ago in Tutorials
A simple, but comprehensive step-by-step presentation on CSS line-height. Covers leading, how to apply various line-height values, as well as line-height and the inline box model. Well worth a read…
Read More: Comprehensive Guide to CSS Line Height
-
Create letterpress type using only CSS
Posted: 3 years ago in Tutorials
The letterpress effect is one of the 2009 trends and is present in a lot of websites. It simply works because it adds a touch of “tactile” to the overall design and at the same time looks good with gradients, shadows, etc. Let’s see a quick way to add this effect to our sites using only CSS…
Read More: Create letterpress type using only CSS