Today I would like to cover how to style your search field using background images in CSS. Previously I was using a different technique to style my forms and search fields, but this way seemed to be less of a head ache so I wanted to share it with those who are interested. First let me go over my original approach which was using This was all fine and dandy but there was one annoying issue. The image button would not align with the search input box and I would have to add a negative top margin to correct this issue. See below for an example. With this revised approach, I decided not to go with the HTML CSS Conditional Comments for IE IE Style Sheet - ie.cssOriginal Approach
as follows:Revised Approach
type="image" and used the tag, and added a background with CSS. This allowed both input text box and the button to naturally align. I also added a :focus pseudo class for the final touch (IE will not read this, so I added a conditional style specifically for IE to hide this effect). Below are some benefits of this method:fieldset.search {
border: none;
width: 243px;
margin: 0 auto;
background: #222;
}
.search input, .search button {
border: none;
float: left;
}
.search input.box {
color: #fff;
font-size: 1.2em;
width: 190px;
height: 30px;
padding: 8px 5px 0;
background: #616161 url(search_bg.gif) no-repeat;
margin-right: 5px;
}
.search input.box:focus {
background: #616161 url(search_bg.gif) no-repeat left -38px;
outline: none;
}
.search button.btn {
width: 38px;
height: 38px;
cursor: pointer;
text-indent: -9999px;
background: #fbc900 url(search_bg.gif) no-repeat top right;
}
.search button.btn:hover {
background: #fbc900 url(search_bg.gif) no-repeat bottom right;
}
**EDIT** Ingo Chao commented that IE6+7 scrolls the background-image horizontally if the input gets more content, so my fix was to use a unique background image strictly for IE, and instead of aligning to the left, I reversed it and aligned it to the right to correct this bug..search input.box {
background: url(search_bg_ie.gif) no-repeat right bottom; /* Unique Input Box background image specifically for IE, and the background position must be aligned to the right*/
}Additional Resources
Examples of Creative / Clean Search & Form Fields
CSS Sprites have been a hot topic for a long time now. The fact is that each image on a web page is a separate server request and you can dramatically increase the performance of a page by combining images and reducing that number of requests. In this screencast I’m going to show you how to do exactly that, by taking what would be 8 different images and combining them into one. As an added bonus, we then expand the idea with jQuery and build ourselves a little accordion widget.
There is a new intro animation for the screencasts! I think it’s pretty cool. Much thanks to Kyrstian Morgan for putting it together for me.
I’ll get some form of downloadable example for this up soon.
Hi everyone, my name is Toby Pitman and Chris has asked me to write a post about a recent experiment that I posted up on the forum a little while ago. It all started when I was looking at theWebKit blog and saw an article on the new CSS3 animations and the one that caught my eye was ‘rotate’. I started thinking what the hell can you rotate on a webpage (it’s animated GIF’s times ten!). Then it hit me — a clocks hands rotate! Bingo!
CSS3 Transform:rotate
Transform:rotate is a new feature of CSS 3 which lets you… well, rotate stuff. Transform will also allow you to scale, skew and translate (move) objects in your web page. All these can be animated by the Transition property (complete with easing and duration).
Sound familiar? Well it should, it’s the same thing we are currently using frameworks like jQuery to animate elements on our web pages. As with jQuery you can animate pretty much any CSS property worth animating with Transition. Think of a :hover effect and you should get some ideas. It’s nowhere near as powerful as jQuery or Mootools etc but can still do some cool stuff. I doubt John Resig will lose any sleep!
IMPORTANT NOTE:
In 100 years time when CSS3 is officially released (along with HTML 5) we will be able to view this demo in all the current browsers of the era. But for now, this demo will only work in the latest version of Apples Safari browser (v3, v4 developer preview, or iPhone Safari) orGoogle Chrome as they are the only browsers supporting the Transform property of CSS3 via the -webkit- prefix. This is coming in Firefox 3.1 so it’s not too far away for some wider audience participation. So for now this is just a bit of fun.
And no, this won’t work in IE6… ever! OK let’s go!
The Graphics
First we’ll need some graphics for our clock interface. We have a face and three hands. All the moving parts are sliced in Photoshop at 600px high and 30px wide and are positioned vertically dead center as by default the rotate property ‘rotates’ from the center of the element. You can use ‘transform-origin’ to set a rotate point if you want.
I’ve gone with a generic clock thing here but there’s nothing to stop you going for a Micky Mouse clock if you like. The moving parts are all PNG images making this effect possible.
The HTML Markup
The mark-up for the clock is a simple un-ordered list. Each list item will hold a moving part and is given a relevant id. Here it is.
<ul id="clock"> <li id="sec">li> <li id="hour">li> <li id="min">li> ul>NOTE: The forum post had a bit more of a clunky mark-up as it has realistic drop shadows on the hands. I’ve refined some of the code a bit for this demo and the forum one has been left as is.
The CSS
#clock { position: relative; width: 600px; height: 600px; margin: 20px auto 0 auto; background: url(clockface.jpg); list-style: none; } #sec, #min, #hour { position: absolute; width: 30px; height: 600px; top: 0px; left: 285px; } #sec { background: url(sechand.png); z-index: 3; } #min { background: url(minhand.png); z-index: 2; } #hour { background: url(hourhand.png); z-index: 1; }The CSS is really simple too. As the moving parts share the same dimensions and start positions we can declare these together to avoid repeating ourselves making the CSS a bit leaner. The
- is given a position of relative allowing us to absolutely position the clock hands inside it.
- Get the timing information for the clock.
- Calculate and inject the CSS style (rotation angle) for each element.
- Update the CSS style info at regular intervals.
NOTE: Rotate doesn’t effect layout and the object behaves like an absolutely positioned element outside the normal flow when rotated.
So where is is the CSS3 stuff? Well we’re going to apply that using some simple jQuery.
The jQuery JavaScript
It should be noted that jQuery has no problem at all using these new CSS3 properties. Also as the styles are allocated dynamically and not from the stylesheet this clock still validates as CSS2.1!
Getting the time
Some of you might (well I did!) equate date and time info with PHP, and when I started this PHP was my first thought, but then I discovered javascript has it’s own built in functionality for getting date and time data too. Note with JavaScript the time is local to the machine not the server.
We’re going to get this info using the Date() syntax and assigning that to a variable. We can get each hands specific data by attaching GetSeconds(), GetMinutes() or GetHours() to the Date() syntax like this example.
var seconds = new Date().getSeconds();The above code will return a number between 0 and 59 and store it inside the variable ’seconds’.
Getting the angle
Next we have calculate the angle for each hand. In the case of the seconds and minutes which have 60 increments per rotation we just divide 360 by 60 which gives us 6. This means that for each second or minute we have to rotate the hand by 6 degrees. We’re going to to store this equation inside another variable. For the seconds it will look like this.
var sdegree = seconds * 6;The hour hand throws up a different scenario. Because there are 12 increments per rotation the angle for each hour is 30 degrees. That’s 360/12=30. Now that would be simple if a clocks hour hand moved in hour increments but it doesn’t. It moves in smaller amounts based on the minute value. Say at 4:30 the hour hand will be half way between 3 and 4. So how do we do this. Here’s the code.
var hdegree = hours * 30 + (mins / 2);Basically we’re going to add the current number of minutes divided by two which should give us a number between 0.5 and 29.5 (’rotate’ can handle all floating point numbers) this puts the hand somewhere between any given 30 degree (hour) increment.
Example:
| 2.40 would be: | 2 * 30 | = | 60 degrees | |
| + | 40 / 2 | = | 20 degrees | |
| ——— | — | ———- | ||
| hdegree | = | 80 degrees |
I did think that the clock might explode when it got past 12 as it would be a number higher then 360 but it worked fine.
So now we’ve figured the math lets inject the new CSS.
Set the style
Here is the CSS3 rotate as if it were in a style sheet.
#sec { -webkit-transform: rotate(45deg); }Here it is injected by jQuery.
$("#sec").css("-webkit-transform", “rotate(45deg)†);The problem we have here is getting the variable ’sdegree’ (which holds our angle) into this syntax to replace the (45deg). At first I just tried putting the variable between the brackets but it wouldn’t have it. To make this work we need to build a ’string’ inside another variable called ’srotate’ and completely replace the second argument. Here’s how we make it.
var srotate = "rotate(" + sdegree + "deg)";The jQuery will now be written as this.
$("#sec").css("-webkit-transform", srotate );Putting it all together (in time!)
The whole jQuery code looks like this.
$(document).ready(function() { setInterval( function() { var seconds = new Date().getSeconds(); var sdegree = seconds * 6; var srotate = "rotate(" + sdegree + "deg)"; $("#sec").css("-webkit-transform", srotate ); }, 1000 ); setInterval( function() { var hours = new Date().getHours(); var mins = new Date().getMinutes(); var hdegree = hours * 30 + (mins / 2); var hrotate = "rotate(" + hdegree + "deg)"; $("#hour").css("-webkit-transform", hrotate ); }, 1000 ); setInterval( function() { var mins = new Date().getMinutes(); var mdegree = mins * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css("-webkit-transform", mrotate ); }, 1000 ); }); Notice how we’ve used a JavaScript setInterval so the function is run every second. The variables that get the time data have to be inside the function so they update too. If not they would only gather that data on page load once, making a pretty rubbish clock.
Our clock should now work (in Safari).
Alternatives
Flash is the obvious one but unless you’ve got ActionScript chops I’d give it a swerve. This may even be possible with PHP using the GD image library to rotate the hands but that’s way above my level.
Incidentally, Soh Tanaka posted this a few days after by pure coincidence: CSS clock. His clock uses JavaScript to add classes and sprite images for the hands.
Conclusion
So there you have it folks, a real and (probably the only) practical use for the new CSS3 property transform:rotate. I for one can’t wait for upside down and sideways websites (Yes, you can even rotate the HTML tag! Although look what that does to Safari) and my personal favorite the spinning/zooming cartoon newspaper blog posts.
So go on, give some of those new CSS3 features a try. 100 years isn’t that far away and the clocks ticking!
via:Css-Tricks
