35+ very Useful And Powerful CSS techniques

July 28, 2016 · 41 comments

by Lars

In this article tripwire magazine provides a list of very useful CSS Techniques that you can use freely to make your website or blog more dynamic and inprove its Look & Feel. The article will also give you an introduction to CSS and why it should be used instead of table-based layouts.


ElegantThemes
ThemeForest

Advertisement

Introduction

Cascading Style Sheets (CSS) is used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document.

Cascading Style Sheets offer significant advantages compared to the other option available – table-layouts. First of all CSS provides us with a strict separation between layout, design of the page, and the information, presented on the page. This means that the layout of all pages in a website can be changed at one by editing style definitions in one .css-file that all the web pages refer to. The separation of layout and information also means that loading different .css files with the same content pages one can completely change the aspect of the site, making it perfectly suitable for immediate user needs fx. screen, printing or mobile devices.

Although almost all modern browsers have good CSS support, older browsers are at a disadvantage. However, on older browsers a CSS-based layout still proves to be usable by displaying navigation and content at the beginning of the page.

Using CSS can also avoid most of the accessibility issues raised by table-layout cells that can make it really hard for people that relay on text browsers, screen readers and speech output browsers to access information.

While CSS may offer many advantages and gives the developer very high level of control of the layout it is still quite hard to implement correctly from bottom up and without having experience and good tool support. Direct reuse or modification of existing CSS solutions to fit the exact needs for your site may be a good start and it is really the intention of this article to give you a good overview of what is possible with CSS and what is available freely to get you started quickly!

Table-layouts are quite simple to implement and they are in particular easy to work with in WYSIWYG editors. That is probably why we see tables being used on close to 9 out of 10 website on the Internet today (guesstimate).

Among the many issues related to tables, the most disturbing one (for users as well as web developers) is browser compatibility. Even though table-layouts have been around almost from the beginning of the Browser Era the most common browsers today just can’t agree on how to interpret and present tables. Known problems are gaps that should not be there, weird positioning of cells or even thicker rows or columns than intended etc. Guess most readers are ready to learn more about CSS now? Take a look at this post if you need more details to be convinced!

CSS has been around for some time and over the last few years web-developers have written many articles about CSS and developed many useful techniques. We believe that by using proven techniques and solutions you can save a significant amount of time and at the same time get a much more appealing and flexible look and feel on you website or blog. Of course this requires that you are able to what you need in time. Below you’ll find a list of techniques we ourselves really couldn’t live without. They are essential and they indeed make our life easier. Hope you find them as useful as we do!

UPDATE Mar. 21st: Take a lool at some of our other popular articles. If you’re looking for High Quality Free Fonts to use in your designs or Tools, Techniques and Inspiration you may find what you need in the articles listed below.

75+ Excellent Free Fonts For Professional Design

75+ Excellent Free Fonts For Professional Design

In this article tripwire magazine presents an overview of more than 75 excellent free fonts you should consider using for your designs. Not all free Fonts are worth using but the Fonts listed in this article have all been picked out because they are better than the rest.

111

80+ Stunning Photoshop Text Effect Tutorials

In this article tripwire magazine provides a collection of more than 60 very useful Typography and Font Tools, Techniques and Inspiration.

108

60+ Typography & Font Mega Toolbox

Photoshop can do some real magic when it comes to Text Effects. In this article tripwire magazine provides a list of more than 80 Stunning Photoshop Text Effect Tutorials that you can use to create Unique Logos, Posters, Post Cards…you name it.

1. CSS Tabs

css tabs

CSS code is embedded in the page and can be found by viewing the page souce code

2. How to Size Text in CSS [1] [2]

css zooming

3. Bar Graphs

Use CSS to show nice looking bar graphs based on just div and span tags

css Bar Graphs

4. Drop Cap – Capital Letters with CSS

css - Drop Cap - Capital Letters

5. Opacity Applied to Heading

Opacity Applied to Heading

6. Magazine StyleDROP CAPS

Magazine StyleDROP CAPS

7. Easy CSS Pullquotes

Thechniques that help you create various types of Pullqoutes.

Easy CSS Pullquotes

8. Link List Block Hover

How to Create a Block Hover Effect for a List of Links

Link List Block Hover

9. Create Resizable Images With CSS

Want layouts that still work if a user increases their browser’s text size? Resize images in order to stay in proportion with the content.

Create Resizable Images With CSS

10. CSS Curves

cssCurves

11. Making web pages extend to the bottom of the window [1] [2]

If you ever made a web site with the content in a center column and a different background for the body, or with a short lateral navigation bar, probably you experienced the problem of some elements not extending to the bottom of the browser window when the height of the content is lesser than the document area of the browser window.

footerStickAlt

12. CSS image replacement for submit buttons

Using this method you’ll get a clickable image when style sheets are active, and a standard button when style sheets are off.

CSS image replacement for submit buttons

13. Vertical align for navigation lists with multiple lines

Let’s see a quick tip for aligning vertically navigation lists that use the tipical floated box approach to display the list in a row, but that have several items displayed across multiples lines.

Vertical align for navigation lists with multiple lines

14. CSS Image Preloader

Visitors browsing at slow connections have to wait until large images load and they don’t have a clue something is missing — they see an empty block of space between two blocks of text. Image preloader will solve this issue.

preloader_demo

15. Link Thumbnail

A picture’s worth a thousand words, right? So spice up those plain old text links with Link

Link Thumbnail

16. PHP-based CSS Style Switcher

his PHP script checks to see if the user allows cookies. If so, a function is provided to change to an alternate CSS

php_style_changer

17. Prettier Accessible Forms

Form-styling solution that is both accessible and portable

Prettier Accessible Forms

18. Faux Absolute Positioning

With faux absolute positioning, we can align every item to a predefined position on the grid.

fauxabsolutepositioning

19. Sparkline charts

Here are three techniques for incorporating data visualization into standards-based navigation patterns.

Sparkline charts

20. A More Accessible Map

Is there a way to display text-based data on a map, keeping it accessible, useful and visually attractive? Yes: using an accessible CSS-based map in which the underlying map data is separated from the visual layout.

A More Accessible Map

21. Multi-Column Lists

How to produce a single, semantically logical ordered list that wraps into vertical columns.

Multi-Column Lists

22. Revised Image Replacement

Image Replacement is a method of using an image to replace text and content, specifically header information, titles, headings, and visual content, while preserving the “readability” of the page.

css-revised-image-replacement

23 . CSS3 Multi-Column Module

CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.

CSS3 Multi-Column Module

24. Optimizing Your Website Structure For Print Using CSS

The secret to creating printable pages is being able to identify and control the “content area(s)” of your website. Most websites are composed of a header, footer, sidebars/subnavigation, and one main content area. Control the content area and most of your work is done. The following are my tips to conquering the print media without changing the integrity of your website.

Optimizing Your Website Structure For Print Using CSS

25. Optimizing Your Website Content For Print Using CSS

optimizing-content-print-css

26. Printing Web documents and CSS

This document describes some of the issues concerning the use of CSS to reformat Web documents for printing

Printing Web documents and CSS

27. Onion Skinned Drop Shadows

Now, web designers can use it to render another seeming impossibility: the truly extensible CSS-based drop shadow.

Onion Skinned Drop Shadows

28. Mountaintop Corners

This example demonstrates the way that the CSS above sets the background images on either end of the box, while assigning a background color to shine through the transparent portions of the images.

mountaintop

29. Improving Link Display for Print

How to insert the value of an anchor’s href attribute, in-line, after the text, slightly smaller and flanked by parentheses for printing web pages

Improving Link Display for Print

30. CSS tricks for custom bullets

CSS tricks for custom bullets

31. PDF Link Labeling Example

Insert image based on file type linked to.

PDF Link Labeling Example

32. Unobtrusive Sidenotes

Unobtrusive Sidenotes is a simple mix of Javascript and CSS that makes it ridiculously easy to incorporate sidenotes into your web pages or blogs

Unobtrusive Sidenotes

33. Format Footnotes with Javascript & CSS

There are two divs, “content” and “footnotes”. “Content” holds the content, “footnotes” is empty. The footnotes are added in-line in span tags (with class="footnote") within the content.

format_footnote

34. Create a valid CSS alert message

create-a-valid-css-alert-message

35. Snook’s Resizable Underlines

The aim is to apply underlines to paragraph text that stretch the whole width of the column (without using justified text), regardless of the lengths of the paragraph text itself.

underlines_samples

{ 25 comments… read them below or add one }

Armeo July 6, 2013 at 9:16 am

Thanks to bring it

Reply

fotografia gamou December 10, 2011 at 11:58 am

I see that you are a good player in websites. But i can say that you are also a good writer!

Reply

Blogger widgets November 25, 2011 at 8:04 pm

Absolutely great. What I most like is 15th widget. It is awesome. I’ll surely apply few tricks of these to my blog too.

Thanks.

Reply

apokriatika October 17, 2011 at 11:12 am

Css is genius code i prefer to make all my sites but its not that easy like php or html…

Reply

Sandeshaya April 2, 2011 at 1:05 pm

A More Accessible Map, was nice time. really worth article.
Thanks to bring it.

Reply

Anitha June 29, 2010 at 1:17 pm

Thank you for the information…….

Reply

chu March 14, 2010 at 9:51 am

Quite useful tips :p ! thank u

Reply

Sanatate September 13, 2009 at 6:17 am

Big thanks. very useful

Reply

Geek_2k September 6, 2009 at 9:05 am

its coool collection man… keep it up

http://www.hidden-geek.blogspot.com

Reply

sergey August 29, 2009 at 5:53 pm

Where the images?

Reply

tripwiremag August 29, 2009 at 10:59 pm

@sergey, thanks for letting me know. Problem fixed

Reply

ideamashups May 15, 2009 at 12:36 am

This is GOLD!! Thanks so much for the post

Reply

JJ May 14, 2009 at 11:50 pm

Excellent source!!! Will most definitely have to try the multi-column text trick!!!!!!

Reply

Benny April 9, 2009 at 8:38 am

This is a great collection, thanks!

Reply

Miguel March 27, 2009 at 2:19 pm

Thanks a lot. It´s simply great and usefull

Reply

Srikrishna March 21, 2009 at 1:43 am

Gud collection. this will help css developers a lot.

Thanks a lot for this

Reply

Vivekanand March 20, 2009 at 12:00 pm

This collection is awesome enough, it would have been great of including “CSS Sprite” and “CSS Image Roll Overs”… thanks a lot for your excellent effort.

Cheers!
Vivek
[http://www.developersnippets.com]

Reply

Billy Girlardo March 20, 2009 at 9:49 am

I had several of these saved already, but several thers are going to be very useful. Thanks, great post!

Reply

Tuan Anh March 20, 2009 at 8:03 am

Thank you so much for this article. I will try to do something interesting as written here :), they’re so beautiful.

Reply

Steve March 20, 2009 at 6:32 am

So good, I added it to IHeartTopTens.com : http://www.ihearttoptens.com/view.php?uid=30

I hope it does well!

Reply

Juan Cherry II March 19, 2009 at 4:53 pm

Thanks for the collection. It has been shared and saved as a worthwhile bookmark!

Reply

rocky March 10, 2009 at 1:05 am

this is very useful for the designers&developers

Reply

Selvam February 24, 2009 at 10:51 pm

Very useful one. Great collection…

Reply

Gelay February 24, 2009 at 11:31 am

Some of the techniques, I have never seen before. Very helpful compilation. Thanks.

Reply

Gelay February 24, 2009 at 11:31 am

Some of the techniques, I have never seen before. …

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

{ 16 trackbacks }

Previous post:

Next post:


Web Analytics