Every well-respected webdesigner knows how to use a CSS file. With this you can add markup to your webpage. I created a list of my personal top 22 favorite different subject CSS tutorials. They are listed below and are in random order. Read, learn and implement it on your own website.
Remember that a website styles with CSS can look otherwise in different browsers. Use this browser CSS rules checker to make sure you make the correct code. Additionally, don't forget to use the CSS Validation Service to have your CSS to the W3 standards. When you're done with your CSS file, use the CSS Superdouche to trim your CSS file down, making it smaller causing it to use less bandwith.
- Creating Liquid CSS Tabs for Menus - dezinerfolio.com
CSS Tabs based menu systems are really improving instead of all the classic button based navigation. This small tutorial will help you create a image based liquid tab using CSS and xHTML.
- Create a valid CSS alert message - bioneural.net
In various places around the net you may have seen alert boxes. Here's a tutorial on how to create such an alert message that is CSS valid.
- Create valid CSS floating corners - marcofolio.net
Many websites have eye-catching CSS floating corners. These can be used for many purposes, such as advertations. If you're viewing this page, you'll see one floating corner in your browser. Even when you resize your browser, the corner will stick to his position.
- Overlapping CSS Tabs - shapeshed.com
Overlapping navigation is a real problem in CSS with the box model and browser support. It is possible though. This technique is advanced CSS and the tutorial assumes a good level of understanding of both CSS and XTHML.
- CSS Star Rating System - pmob.co.uk
Simple CSS Star Rating System. No JavaScript required.
- Making ListBox with CSS - hedgerwow.com
A tutorial on created advanced listboxes with CSS. Also works with images.
- Fade Out Bottom - css-tricks.com
This is a cool effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0%) with a transparent PNG image and a high z-index value.
- CSS Speech Bubbles - willmayo.com
Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict. Tested in all major browsers.
- Hoverbox Image Gallery - sonspring.com
Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS...
- CSS For Bar Graphs - applestooranges.com
This is a more complex visualization, yet still following the same basic idea. Here the graph is a ‘bad’ to ‘good’ indicator with a marker that travels the length of the color scheme. A lighter bar shade also helps indicate the marker position as it travels from left to right.
- Even More Rounded Corners With CSS - schillmania.com
Yep, it's another article detailing a method of doing rounded corners with CSS. In this case, single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency throughout, gradients, patterns and whatever else you (or your designer) could want.
- Styled Text Area - css-tricks.com
A textarea is an element on a webpage that you can type into. These are commonly used as commenting areas, contact forms or address entry areas. All browsers have defaults styles for textareas which vary. You can take control of your textareas and style them with CSS, just like any other element.
- CSS Drop Shadows - alistapart.com
They’re the corkscrew in every graphic designer’s Swiss Army knife. Much used, oft maligned but always popular, drop shadows are a staple of graphic design. Although easy to accomplish with image-editing software, they’re not of much use in the fast-changing world of web design. On the web, adaptability and ease of use dictate trends — and static images with a fixed background effect are not very adaptable.
- Sitemap Celebration - zabdesign.de
Creating a sitemap for your website can be very useful. Use nested lists to create a nice sitemap. Tested and works fine on most browsers.
- Using Less Images - magnetiq.co
Image rollovers are usually composed of two individual images; one for the default state and one for when the mouse is hovered over the image or link. However, it bears some advantages to use a single image by taking advantage of CSS image offsets.
- Styling form controls with CSS, revisited - 456bereastreet.com
A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across platforms. Most of the time, the question is asked by someone who has just tried to do that, and noticed the difference in rendering across browsers and operating systems.
- A CSS styled table version 2 - veerle.duoh.com
The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go.
- How to make sexy buttons with CSS - oscaralexander.com
This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.
- Iconize Textlinks with CSS - pooliestudios.com
Links are fun, but sometimes we don't know where they take us. With this little CSS technique a user can identify a link by its icon. The idea is pretty simple, if a link points to a .pdf file, we show the .pdf icon after the link.
- Remote Linking - css-tricks.com
Remote linking is a rollover that affects another object on the page. The rollover can affect itself as well. This can be done with PURE CSS, making it a very cool and lightweight technique.
- Floatutorial - css.maxdesign.com.au
Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
- Simple Double Quotes - webdesignerwall.com
This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote.
- Professional horizontal CSS Menus - cssplay.co.uk
Download some really cool professional looking horizontal menus. View the source to learn how to create these menus on your own.
Do you have some favorite CSS tutorials on your own?
Tags: CSS top programming webdesign internet tutorial
Interested in this topic? You might enjoy another article I've written called
Spread the word and submit to:
     |
2007 - 2018 Marcofolio.net