Limeberry is a CSS 3 Finely Granular Color Gradient Generator. It allows you to input very precise (up to the nth decimal) numeric values to be used as your gradient color stops. Choose how many color stops you want and then define what colors you want at those stops.
This is definitely early beta. It's functional, but only just (but hey, I did it in an hour over my lunch break).
Check out the project page to see the roadmap and for info on how to contribute (this is an open source project).
This was developed with Chrome, but early testers have informed me it works with Firefox and Opera as well (yay!).
Ok, I'm so mega busy right now working on Flurl. I need to have it done TONIGHT because I've got other pressing obligations coming up and I just won't have any time to work on it after today.
I wanted to have movement and sound and I wanted it REALLY CORNY as an homage to the flickr pandas from whom it gets it's photos.
That's just a little taste. It's going to be much more. It's going to have music and it's going to have a photo stream.
First I designed the animation:
Yeah, really simple I know. I'm just telling it to rotate from 0deg to -364deg. Note that I named the animation "turnit".
Next I applied the animation to my div.
Line 1: use the animation "turnit" we defined before. NOTE THAT THE ANIMATION DEFINITION MUST COME BEFORE WE TRY AND APPLY IT. If I tried to use it before I defined it in my stylesheet, nothing would happen.
Line 2: Loop forever.
Line 3: Last for 30s.
Line 4: Make it smooth (linear). Could ease-in or out or whatever, but I wanted it to be seamless with no apparent start or stop.
Notes: If you look at the source you will see that I made my turning div 3200px wide and tall and then put it inside of a container that was 100% wide and tall and overflow hidden to keep there from being scrollbars. I then positioned the div so the center of it would be right under the unicorn's foot.
Here's the entire "view source":
What it does:
Allows you to edit html element box dimensions directly in the browser to get that perfect witdh/height/padding/margin/border combo you're looking for.
When you need it:
- Resolving float issues
- Adjusting Padding/Margin
- Prototyping Layouts
How to use it:
If you don't want to create an entirely new alternate style-sheet just for print media, there is an easier way to do it.
I had a small adjustment I needed to make for printing a page on my site, and rather than creating an entirely new (duplicate) alternate style-sheet just for print media, I discovered a neat little CSS method you could use to put the print style right in with the main style.
It's the @media print CSS method.
My original CSS code was as follows:
For some reason the "Drag Layer" div was appearing over-top the image contained in a sub-div. I'm using scriptaculous to display a blown up version of an image when you hover over a smaller version of the image. But when you print, the smaller version of the image doesn't show up. Making the dragLayer div display equal to none didn't work for some reason. So instead I defined a print stylesheet with the dragLayer div's height and width equal to 0. I didn't want to have to make an entirely new duplicate stylesheet just for this one little CSS change for printing, so after some exploring I found the @media print css directive. Here is the style I ended up with:
This little trick was mentioned in passing in page 210 of Elizabeth Castro's
HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide), but Elizabeth claims it isn't as widely supported or well known as the other standard methods of doing this. In all of my testing so far, however, it looks like it works in all of the newest versions of three of the major browsers (FF, IE & Chrome).
It really helps to read the documentation. Way back when I started designing websites using external stylsheets, I found a little trick. If you had IE specific styles and Firefox specific styles, you could extract them both out, and include them both like this:
<link href="ffStyles.css" rel="stylesheet" type="text/css" title="Firefox Styles" />
<link href="ieStyles.css" rel="stylesheet" type="text/css" title="IE Styles" />
Since you are (in this case) telling the browser that you have two styles, and both are different (you used a title attribute), but both should be default (you used the "stylesheet" parameter for the "rel" attribute) the browser doesn't know what to do. You've told it only to use one, but that both are the default, and thus, have contradicted yourself.
At this point, IE and FF both make very different (but helpfully so) decisions. I'm betting that IE said, "well, these are cascading, so in cascades you always take whatever the last thing is and use that" and therefore IE used the last style as the default and ignored the first. Firefox either said "IE uses the last one, so I'll use the first one so people can use the trick Chris is talking about above" or they said "Ok, looking for stylesheet... found it! Use it! Oh, another one... um, we don't need anymore because we already have one, so ignore it" either way it doesn't really matter, because the point is, it works out nicely for the developer.
I always thought this was a "bug" that I was exploiting, and that my dual stylesheet was an exploit/hack. Then I read the documentation today for the first time and learned how stylesheets are supposed to work and be included. The major thing I found out was that the title attribute is purely optional, and serves a double purpose:
It clearly states in the documentation not to put a title attribute if you want it to be “persistent” (universal) but if you want it to be “preferred” (default) to set the title attribute and set the rel type as "stylesheet". It doesn’t say anything about being able to have two stylesheets both with the rel attribute set to “stylesheet", but it does make it appear as if you are not supposed to have more than one with the rel type of “stylesheet” (at least that’s what I’m inferring from the fact that they are giving you a way to make “alternate” stylesheets). This actually makes sense, because if they give you a way to have “preferred” and “alternate” stylesheets, why would you make two preferred? What would that even mean? I’m guessing the way they intended was something like this:
<link href=”basicStuff.css” rel=”stylesheet” type=”text/css” />
<link href=”blueStuff.css” rel=”stylesheet” type=”text/css” title=”blue theme” />
<link href=”redStuff.css” rel=”alternate stylesheet” type=”text/css” title=”red theme” />
This way, all of the stuff that is universal to both themes just goes in without a title tag, because the only purpose of the title tag is so you can switch between them, and why would you want to switch the universal stuff (you wouldn’t)? So, by putting a title, you are implying that the user should be able to see and choose between your titled styles, and by putting “stylesheet” instead of “alternate stylesheet” you are stating that “this one is the one you should see by default”. So in this example, the blueStuff.css style would be used by default (for both IE and FF) and the redStuff.css style would be an available alternate.