понедельник, 24 декабря 2012 г.

CSS Magic: Align Form Fields Without Tables


I’ve seen many a source code that is neat and XHTML-compliant everywhere except—for some mysterious reason—forms. There is some unspoken rule that tables are the only way to align form fields into two even columns. That rule is wrong. Without further ado, here is how to rid your pages of the final vestiges of layout tables (tested in Firefox 3 and IE6, the best and worst of all possible worlds):
HTML:

<div class=”field_container”><label>First Name</label><input type=”text”></div>
<div class=”field_container”><label>Last Name</label><input type=”text”></div>
CSS:
label {
width:150px;    
/*Or however much space you need for the form’s labels*/
    float:left;
}
I’m serious, that’s it. So if I see another table, YOU’RE FIRED. :)

среда, 5 декабря 2012 г.

Tooltips in CSS3 and HTML5


In this article I’ve decided to write about quite simple and easy method of how to create the simple “tooltips” – pop-up prompts. In this method we will not use JS, we’ll be content with CSS3 and HTML5.

Disclaimer

Actually, css attr() for property of content pseudoelement appeared in CSS2 and in this method, generally, there is nothing new.

Simple method

Simple CSS3 tooltip in Tooltips in CSS3 and HTML5
This method can be used wherein some small “tooltips” are needed.
First I will show you the code:
?
1
Hover me!
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.tooltip {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}
 
.tooltip::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip); /* The main part of the code, determining the content of the pop-up prompt */
    margin-top: -24px;
    opacity: 0; /* Our element is transparent... */
    padding: 3px 7px;
    position: absolute;
    visibility: hidden; /* ...and hidden. */
             
    transition: all 0.4s ease-in-out; /* To add some smoothness */
}
         
.tooltip:hover::after {
    opacity: 1; /* Make it visible */
    visibility: visible;
}
We take some element (In our case it’s span), add to it an attribute with text, which will be shown and we take the pseudoelement ::of after. In content of this pseudoelement we, using the most remarkable property – attr(), we set the text to our pop-up prompt and then on: hover we show it. I think that other properties are clear on comments in the code.
Separately I want to mark, how the animation behaves in Chrome and Opera (maybe in IE too).
It is not present. It is connected with that WebKit and Opera does not apply transitions and animation to the pseudoelements ::of before and ::after.
On this occasion there is a bug registered in WebKit.

Method for more complicated tooltips

CSS3 tooltip in Tooltips in CSS3 and HTML5
Sometimes in tooltip there must be not only text, but also some formatting or image which cannot be inserted in the previous method.
Further I will consider only an example that can be done by this method.
And the code:
?
1
2
3
4
qutIM — Free multiprotocol client. It's ported under the great number of  operating systems.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.htooltip span { /* The appearance of our tooltip */
    background-color: rgba(0,0,0, 0.8);
    border-radius: 15px 15px 15px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #fff;
    margin-left: 2px;
    margin-top: -75px;
    opacity: 0; /* Make it transparent */
    padding: 10px 10px 10px 40px;
    position: absolute;
    text-decoration: none;
    visibility: hidden; /* and hidden */
    width: 350px;
    z-index: 10;
}
         
.htooltip:hover span { /* show the tooltip when hover */
    opacity: 1;
    visibility: visible;
}
         
.htooltip span img { /* example image */
    border: 0 none;
    float: left;
    margin: -71px 0 0 -234px;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    z-index: -1;
}
         
.htooltip:hover span img { /* show the image */
    opacity: 1;
    visibility: visible;
}
Everything is quite simple. On this page you can see the demo example.
P.S. Some of you may ask: And where is HTML5? data-* attributes beinga part of HTML5 specification are mentioned in the article.