WYDBLOG

Colección Css (tutoriales): Layout, tables, forms, buttons…

Si hay algo que me apasiona además del diseño gráfico es “Css”, aunque si nos ponemos a pensar, para lograr manejar correctamente este lenguaje hay que ser muy creativo y saber diseñar de la mejor forma la hoja de estilo, por lo tanto yo creo que cualquier persona que sepa utilizar este lenguaje de algún modo es un diseñador.
Si tienes ganas de convertirte en un “diseñador Css” o te gustaría perfeccionarte en distintos aspectos sobre este hermoso lenguaje, aquí tienes una recopilación de 92 tutoriales y recursos que te serán muy utiles.

1. Menu circular en CSS

El propósito de esta entrada es demostrar el poder que CSS tiene y que sinceramente no aprovechamos. Quiza sea algo difícil, pero creanme que vale la pena terminar y ver algo que funciona en casi cualquier ordenador sin importar su navegador, soporte de CSS, resolución, etc…

2. Advanced CSS Menu

This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu…

3. Clickable Link Backgrounds

Is there any harm in documenting a seemingly rudimentary and obvious CSS technique? I tend to think not, and so the following may (or may not) turn out to be enlightening for you, depending on the level of your CSS-ness…

4. Scalable CSS buttons using PNG and BG colours

There has been a lot of talk about CSS buttons lately. Very understandable, since there are a lot of web applications being developed today that could benefit from slick looking buttons without loss in accessibility. Before jumping on the train myself…

5. Centered Tabs with CSS

Styling the li as a floated block does give us a great deal of control over margin, padding, and other presentational styles. However, we should learn to love the inline box – with it, we can create a flexible, centered alternative to floated navigation lists…

6. Navigation Matrix Reloaded

First of all I need an extra div that wraps the ul and li elements. Originally the ul contained the large background image. However I will need the ul for another purpose, namely to counter the flickering. Thus in this version the extra div holds the main background image…

7. CSS submit buttons

For some time now we have all known about how you can treat a submit button as you would any tag when it comes to styling it with CSS, we can change its background colour, border and font styles using our trusty CSS…

8. How to create VISTA style toolbar with CSS

I want to show you what you can do with a minimal effort and a little imagination. Here’s a screenshoot from Windows VISTA. We’ll try to reproduce that toolbar, with buttons and hover effect in cross-browser compatible CSS and HTML…

10. Accessible Image-Tab Rollovers

We needed to fit more items into FC’s top navigation. We ran out of room. Previously, this was handled by a simple, styled unordered list. But at a window resolution of 800×600 there wasn’t enough additional horizontal space to add even one more item using the current design…

11. Style Your Ordered List

By default, most browsers display the ordered list numbers same font style as the body text. 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…

12. Learn Web Design: CSS Rollovers

Learn how to create a simple rollover image using CSS.
In addition to working in web design and development, I also teach a few different web design courses. I usually refer my students to intermediate to advanced resources…

13. Advanced CSS Menu Trick

What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on…

14. Percentage dimensions of the holy grail layout

All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content…

15. From PSD to HTML, Building a Set of Website Designs Step by Step

In HTML / CSS, Site Builds by Collis Ta’eed. Today I’m going to take you through my entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups…

16. Design page layout using CSS

Today’s lesson will explains how to design page’s layout for your site using a css file. In the previous lesson we have seen a typical website structure which we can use to project our site. In the css folder create a new css file called default.css where insert the css code…

17. Centering Block Element

18. Top reasons your CSS columns are messed up

I believe the recent surge in popularity of CSS frameworks comes from a lack of basic understanding of the CSS box model and how it’s implemented across browsers. I wanted to share with you some quick tips on how to avoid easy pitfalls so you can create your own CSS framework in no time flat, without all the cruft of having ten thousand column combinations available…

19. The holy grail layout - 3 columns and a lot less problems

I suppose all css developers and standardistas have already stumbled upon the „perfect layout” dubbed the holy grail, featured first here at Glish and then revised here at A list Apart. The Glish version is very good, it has a very thorough cross-browser compatibility, but it also has some faults of it’s own which we will discuss later…

20. Advanced CSS Layouts: Step by Step

21. Understanding CSS Positioning

Without a doubt, positioning, or the layout, is the hardest part of CSS. Not only because it ever so often varies between browsers, but also because CSS has a lot of ways to position an element, all with various (dis) advantages. This series of articles will thrive to explain the possibilities you have in positioning…

22. Bug Fix: IE Double Margin Float Bug

The double-margin float bug has been a source of irritation for CSS-loving web designers for years. The bug first became a major problem in IE5, when CSS started to become increasingly popular, and persisted through IE6. And, while an easy (if mysterious) fix has been known for quite some time now…

23. Learn CSS Positioning in Ten Steps

24. Super Simple Two Column Layout

What I’m trying to do is a fairly standard 3 section layout. The header needs to be 75 pixels in height and 100% in width. Below that, I need a sidebar section 160px wide and a main content block that fills up the rest of the width. So far, fairly standard… nothing too complicated. Here’s the part that I can’t get to work correctly…

25. Three column fixed layout structure using CSS

I included some standard elements such as logo, top bar, navigation bar, text stage, center column for post categories and right column to insert Google AdSense 120X600 ads so you can reuse quickly this code on your webdesign projects…

26. How To Create a Horizontally Scrolling Site

If web pages were made out of wood, the grain would be running up and down. Vertical is the natural flow of web layout. When page elements reach the right edge of the browser window and go over, the flow defaults to “wrapping” that element down onto the next line. The more content on the page, the taller it gets, not the wider…

27. Creating a CSS layout from scratch

28. Prettier Accessible Forms

It can be time consuming to make web forms both pretty and accessible. In particular, laying out forms where the form label and input are horizontally adjacent, as in the image below, can be a real problem. We used to use tables, which worked well in this scenario—but forms don’t constitute tabular data…

29. Accessible CSS Forms: Using CSS to Create a Two-Column Layout

In a recent study of web design patterns, Dr. Melody Ivory found that accessibility is the most underutilized aspect of good web page design (Ivory 2005). In fact websites have become more complex and less accessible over time (Hackett 2003). Less than 20% of the Fortune 100…

30. NiceForm

Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase, or signing up for a website. They are the basic, and pretty much the only way of gathering information on the web…

31. Style Web Forms Using CSS

Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase, or signing up for a website. They are the basic, and pretty much the only way of gathering information on the web…

32. Semantic horizontal Forms

As promised in a previous blog post here, Horizontally aligned elements in forms, i’ve tried to work out a way to reproduce the registration form at http://www.squarespace.com/join/ in a semantically correct way with fieldsets, legends, labels and some CSS styling…

33. Pretty Forms

Forms have been a rough spot when it comes to style. There’s just only so much you can do; the browsers just don’t allow the kind of styling I’d like. The issue is often discussed, and a nice demonstration of the problem can be found over…

34. Tips For Creating Great Web Forms

You don’t need labels for your form to work, but as one CSS-Tricks reader once put it, it is an accessibility crime not to use them. Labels are what signify what the input box is for and associate them together. The use of the (label) tag…

35. Fun with forms – customized input elements

Ever wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility…

36. A CSS styled table version 2

In 2005 I wrote an article about styling a table with CSS. After receiving so many requests I finally decided to give in and write another tutorial. Seems like a popular topic and an interesting one to share some tricks on how you can nicely style them…

37. Replicating a Tree table

The aim is to replicate a graphic table tree using HTML. This was based on a request from a Web Standards Group member. Posted here in case it is of use to someone else…

38. A CSS styled table

Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to…

39. CSS Tables

Tables styled with CSS rules are much more efficient, if done well, than the old method of using font tags, a lot of color tags, and more…These tables are forward looking in the use of CSS but also degrade with a bit of grace for older browsers…

40. sorttable: Make all your tables sortable

While the web design community gradually moves away from using tables to lay out the structure of a page, tables really do have a vital use, their original use; they’re for laying out tabular data. For instance, imagine a table of employees…

41. Datasheet-style form using HTML and CSS

This worked example creates a compact form with multiple similar records, with the familiar appearance of a datasheet.
Note: I’m going to update this tutorial soon with more robust DHTML and CSS…

42. Pure CSS Animated Progress Bar

We’ll put a cool background image in the container and define fixed width and height. First child (SPAN) will act as a progress bar. We’ll absolutely position second child (EM) above the progress bar and shift it to the left to a desired value. EM has the same background as the container so it gives an effect of progress bar stopping at certain percentage…

43. CSS Gradient Text Effect

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty…

44. CSS: the white-space property

White-space controls how white space and cariage returns/linefeeds should be handled in a document. “Normal” is the inherent value for most HTML elements, with the exceptions having their own tags to create special behavior. This is a very powerful property and should be used with caution…

45. 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. It’s a question I often receive, so I decided to publish a very simple…

46. Swooshy Curly Quotes Without Images

Take a quote and render it within blockquote tags, applying big, funky and stylish curly quotes both at the beginning and the end without using any images – at all…

47. Sliding Doors of CSS

Sliding Doors of CSS (Part I) introduced a new technique for creating visually stunning interface elements with simple, text-based, semantic markup. In Part II, we’ll push the technique even further. If you haven’t read Part I yet, you should read it now…

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

Among the many things to like about Veerle’s redesign of her blog is the way she does the hover effects for lists of links, such as those in her “approved” section…

49. The CSS-Only Accordion Effect

The Accordion Effect is fast becoming one of the most commonly used (and perhaps abused?) effects of the Web 2.0 world. Most JavaScript frameworks make such an effect fairly easy to pull off – heck, MooTools even built their reputation on it in the early days. So what makes this accordion effect special? It doesn’t require a single line of JavaScript…

50. Liquid round corners

a multifunctional flexible css-concept with transparency for creating dynamically changing not rectangular borders…

51. CSS Drop Shadows

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…

52. Iconize Textlinks with CSS

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. This whole thing was inspired by the “Showing Hyperlink Cues with CSS” article of Ask the CSS Guy…

53. The ways to style visited links

There’ve been interesting parallel interview about :visited pseudo-class at CollyLogic which made me redo visited links at my blog. Here’s explanation of some techniques, and since IE is the matter of past, some of these are not supported in it…

54. CSS Image Maps

Below is a sample image map that’s built entirely using CSS and XHTML. While I’ve added support for Javascript (item titles are simply displayed beneath the image), I’ve disabled it in this example — I’ve run into a bit of a problem when JS is enabled and CSS is disabled (more details below)…

55. Ticked-off visited links Reloaded

When CollyLogic launched, I was incredibly surprised by the response to the Ticked-Off Links I created for the sidebar. I should say a massive thank you to the many, many folks who linked to the original tutorial detailing two methods of implementation. Firstly, there was my original quick method…

56. CSS Diagrams

I encountered a problem at work one day: I needed to create a set of state transition diagrams for the documentation of a simple XML parser I had written. The documentation is done in HTML, so my first idea was to draw the diagrams as GIF or PNG images…

57. Creating a Star Rater using CSS

An updated and more cross-browser compatible version of the CSS star rater can be found here.This is my first contribution to the CSS loving community. So, many of you have seen a blog. Many of you have seen comments and reviews on sites such as Netflix and Amazon. Most of these reviews…

58. Css Map Pop

An image map can be very useful but normally employs JavaScript. Not this time. This experiment uses a single unordered list and a pair of spans to create such a map, with CSS pop-ups providing more information about the mapped hot-spots. This is CSS put to the test…

59. Make the Footer Stick to the Bottom of a Page

There are several ways to make a footer stick to the bottom of a page using CSS. But until now, they’ve used long and messy hacks or a lot of extra HTML markup; this method uses only 15 lines of CSS and hardly any HTML markup. Even better…

60. Dynamic Pie Chart with CSS

This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries…

61. Bare Naked App

In turning this part of the design into something flexible on the website I saw two options; clever CSS, or ‘Lots of Images’. I decided that ‘Lots of Images’ was a bad idea…

62. Quotations and citations: quoting text

When quoting text in HTML, there are several ways of marking up the quoted text. Which way you choose depends on what you’re quoting, how you’re quoting it, and how important it is for you that all browsers render the quotations the same way…

63. StyleMap: HTML Visual Sitemap Tool

If you’ve ever had to produce a sitemap for a client using tools like Visio or OmniGraffle, you know that it can be tedious to visually organize a complex hierarchy of pages. Having experienced this myself, I developed a simple and efficient way to make a sitemap through the benefits of standards-based HTML and CSS…

64. CSS gallery layout—smells like a table

Setting up a gallery layout is not exactly one of the jobs I am looking forward to doing. I assume you all are using lists by now to lay out thumbnail galleries, right? If so, you already know that those kind of semantic gallery layouts require a lot of CSS code…

65. CSS FOR BAR GRAPHS

Having a working knowledge of XHTML and CSS when developing applications is a big help in knowing what can be done client-side and what should be generated server-side…

66. CSS Drop Shadows II: Fuzzy Shadows

We like shadows. We enjoy making them drop and we love CSS and standards, so we wrote CSS Drop Shadows. The little voice in our head approved of it. We thought that was the end of it…

67. Creating a graph using percentage background images

We like shadows. We enjoy making them drop and we love CSS and standards, so we wrote CSS Drop Shadows. The little voice in our head approved of it. We thought that was the end of it…

68. CSS Liquid Round Corners

There are many techniques available to give your square boxes that nice rounded look but I thought I’d concentrate this article on the basic techniques used to create this box…

69. CSS Design: Creating Custom Corners & Borders

Answer: the rounded corners are right here. In this article, we’ll show how customized borders and corners can be applied to fully fluid and flexible layouts with dynamic content, using sound and semantically logical markup…

70. CSS hover effect

I would like to share some insight on a piece of CSS I’ve used for the homepage for a website a while ago that I’ve built together with Roger Johansson. I’m talking about the hover effect on the 4 tabbed boxes shown on this page…

71. CSS Validation Service

72. CSS Formatter and Optimiser

73. CSS hover effect

74. CSS Library: Horizontal CSS Menus

75. HTML and CSS Tutorials. And Stuff.

76. Floatutorial

77. 6 Keys to Understanding Modern CSS-based Layouts

78. A tool for visual development of YAML based CSS layouts

79. Uni-Form

80. Will the browser apply the rule(s)?

81. Little Boxes

82. Wufoo - Form Builder

83. Icebrgg - Create a Web form

84. CSS Tutorial

85. Spiffy corners

86. List-O-Matic

87. Cascading Style Cheatsheet

88. Panic Coda

89. CSS Tab Designer

90. CSSmate - editor online

91. Online CSS Optimiser

92. Simple CSS — A Free CSS Authoring Tool