We Keep Coding

How do I check/pick a font color for good contrast against gradients on a webpage?

So I have, say a button with a gradient from one arbitrary color to another. Is there a systematic way to with code (a) check if the current text color will or will not work and (b) if the current text color doesn't work, is there a way to generate a text color that will work over the gradient? I am changing the gradients of certain buttons, based on user input, and need to update the font color if necessary.
Note, I recognize that this is a fairly well solved problem for solid color backgrounds (for instance, see here: http://www.particletree.com/notebook/calculating-color-contrast-for-legible-text/).

If you're looking for automatic detection, I would maybe start here:
http://khan.github.io/tota11y/
This is a jQuery plug-in that checks background/foreground color for accessibility, on the example if you click the bottom left icon and then click "Contrast" it will point out the issues on your page. It looks like it works with gradients, so perhaps you can modify this in a way that helps you choose your colors.
For more manual approaches:
This chrome plugin says it works with gradients:
https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll
Wave:
http://wave.webaim.org

How to get background color of a site?

Let me explain. I am not looking for a particular attribute of a particular DOM element. I started thinking that if I checked the background-color of the body element, I would find the background color of a page.
But for example for this site: performance bikes the background color of body is black, and it's "obvious" that the main background color of the site is white.
So, I am parsing the site with PhantomJS. What do you think would be a good strategy to be able to find the most "visible" background-color. I don't know how to say that, but for a human it is kind of obvious which color is the background. How to find it programatically?
EDIT: the bikes site is just an example. I am thinking on how I would do this for "any" page.

The background color of the Performance bikes site is transparent. However, because of some weird reason, they decided to make the whole main div to be absolute position, therefore, the body tag is 1px high and thus showing the default white color. One idea I have is, you can check if the body's height is less than some percentage of the window. If it is too small, then it probably is white, or transparent for some special browsers.
Alternatives including taking a screenshot of the page and determine the background color from it.

You can use javascript and check which of the layers is on top, also the width and height of that div, then just grab its background-color property.

What about something like this?
Not perfect, but should return you the element with the biggest area and make sure that it is visible. Won't account for it being below other elements, but it's a start...
var element={
width:0,
height:0,
color:'',
jQEl:{}
}
$('*:visible').each(function(){
var $this = $(this);
var area = element.width*element.height;
var thisArea = $this.width()*$this.height();
if(thisArea>area){
element.width = $this.width();
element.height= $this.height();
element.color=$this.css('background-color');
element.jQEl=$this;
}
});
console.log(element)

I'd take a screenshot, then make a histogram of the image to find the most common colour.
Refinements:
First go through and replace all text content with "& nbsp;"
Give extra weight to the pixels closest to the edge of the screen.
(To automate entirely within PhantomJS, you might be able to use something like http://html2canvas.hertzen.com/ to use a canvas, and never need to make an external image file.)

Another nice solution is to use browser plug-ins. I use Eye Dropper for chrome.
https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en
Or you can use colorPicker for Firefox. To get it, in your firefox browser, goto:
Tools -> Add-ons -> top right search bar look for "colorPicker"
It's 10 times faster to find the color of a background on a site this way than searching through the CSS code.

Animated pop-up like on wunderlist.com

I've came across wunderlist.com site and just fell in love with the zoom-like pop-up they have on the image just beneath the header "Learn more about Wunderlist".
I'd love to implement something like this on my site.
Can somebody tell me how this is done? I tried to reverse-engineer, but with no luck :)
I'm not hoping for the whole ready code, but maybe some guidelines on how to achieve this with CSS/jQuery.
Or maybe you know some jQuery plugin that I could use?

They are using all CSS. Pretty simple really.. I would code a full js fiddle example for you but I don't have the time, so instead I will list out the different elements you need and how they interact.
First the large image is just a div with a background image with set
dimensions.
The circular images themselves are generated from one large image containing all of the circles in one spot, this is called a sprite. The circles are just div's with background images and background positioning to position the correct circle inside the box from the sprite image.
The text boxes themselves are also div's with a standard H2 and P tags for the text.
Everything is absolute positioned in order to achieve the proper layout.
The small circles are div's with :hover states that are absolute positioned over their respective targeted areas.
The animation on :hover is achieved by the use of css3 transition and css3 transforms.
This should get you started.
Comment if you have questions.
Had some time to have some fun: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/

Try looking at two main aspects:
Open up your inspector tool of choice and look at what happens to body.login .feature
...more specifically, look at what happens to its transform: scale and opacity values upon :hover.
Hint: the transition is mainly on them.
Still in your inspector, change the scale to (1) and the opacity to 1. How it smoothly gets from one state to the other is dictated by the transition property.
This isn't meant to tell you exactly how to achieve it, but to get you on your way :)

It's not that hard actually. The Wunderlist team has even made it easier. They have a large sprite image with the zoomed images cropped and ready with rounded corners, borders and shadows. You can see it here: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png
What you do is on mouseover you show a half transparent black background (can be position: fixed with full width and height). Then you create a element with the sprite as the background image (even better, have a class ready in your css and append it to your newly created element). Set position to the position of the hovered element.
When added to the dom animate the transform scale of the element (starting with something like scale(.24) as they do).

Well since you tried reverse engineering. I'll try and guide you along that path.
There is only one div with id overlay which is changes it's place & content, on hover of any div with class feature. Work your way further from their app js, it's not minified.
The content of the popup in this case is an image moved to different positions.

Clipped Text & Shadows

I'm trying to get the text in this example to display properly, but I keeps clipping text & shadows in various letters and I can't figure out why and how to fix it.
Here's a jsfiddle (Removed), so you can understand it fully. Please refresh the jsfiddle once it loads, as the first letter clipping doesn't appear like it does on a regular published page.
The problem is on load (after you refresh) the 'F' & it's shadow will be clipped. Then, mouseover the text - 'Second' will appear, then mouseout and first word will appear again, but then 't' shadow is clipped.
Can't figure out how to fix these. Could someone please help me clear these clipping bugs.
Thanks, Bill
UPDATE: I figured out the 'F' letter clipping problem (updated jsfiddle) - I will need help w/ the 't' clipping - Thanks, Bill
BUMP - Someone? Pretty Please - Bill

This problem has to do with the way fonts are rendered. Certain fonts (like the one you're embedding) have serifs which extend beyond the "box" of the letter itself. In typical typography, this is handled by allowing the render area to extend beyond the box itself - because most applications don't make a box around each letter.
I think the issue you're having stems from the fact that each letter is actually a <span>, which means that it does, in fact, have a box. Your JS is then messing with opacity, overflow and positioning, which causes the CSS rendering to box off each individual <span> as it is being rendered.
My suggestion would be to avoid using the explicit widths / overflows that you're applying to the spans, and instead let them auto-size, and control absolute positioning.
If each span has the same z-index, and they are spaced correctly, this should give you what you're looking for, without causing clipping.
UPDATE:
The issue is that the font renders in a fashion which overlaps letters (as many script-style fonts do). As a result, you -must- render this font in such a way that it extends beyond the bounds of it's box.
However, when CSS from the plugin turns the individual letters partially transparent, transparent items can't extend beyond the outsides of their boxes... so the clipping occurs.
The solution is to increase the size of the box sufficiently that the clipping doesn't occur, and allow the boxes to overlap.
In other words, the trick is to provide padding-right and padding-left which give the font letters enough space to fully express, then adjust with negative margin-left, to move the letters back together.
For this font, at this size, the style which makes it work is:
.lslide_wrap a span span.sl-w1 {
...
/* Add the following 2 lines: */
padding: 0 100px 0 22px;
margin-left: -22px;
}
An updated version of the original jsFiddle can be found here.

Creating mosaic/tiled image effect with jquery

Is there a way to create the effect shown here on msi.com main image? Though done in flash, I'd prefer doing it with jquery. I've also tried with 'mosaic generators', but haven't been able to replicate the effect well, but use of a generator with js would be acceptable too.
[edit] I failed to mention, I'm only interested in emulated the tiled/mosaic aspect of the effect, not animation. I'd like a large image (e.g. 400px by 300px) separated by whitespace (or color customizable borders) into 9 equally sized blocks or tiles each.
While I would like to apply a individual hover effect to each image, giving each the effect they are separate entities, I don't necessarily need any further animation.
Rounded corners aren't important or wanted.
[/edit]

It would be pretty interesting to do it with jquery. You'd have a table of images, each with a hover event that toggled an animation when mousing on and off. The logic isn't too hard; getting the images and the animation to look nice would be a little harder, but not undoable. It depends on how closely you want to replicate the effect. :D
edit: you just want a mosaic of images? you can just use a table to position all of the images, and use js for the events. What else do you want or need js for? :D

Here's an idea. Load a large image into a DIV. Decide on the size of your windows and create a PNG with transparency where you'd like the windows to be. (Opaque at the borders with thickness to control how wide you'd like the whitespace.) To create the effect, use three layers. The image at the bottom layer (which you can swap out as needed). The middle and top layer will be repeated along the x and y axises and controlled individually by jQuery. The middle layer will have the PNG with transparency and on top of that, the top layer with just a solid color (matching your page's background to "seem" invisible?). To create any "pretty" effects, you can adjust the opacity or animate the top layer of the separate boxes to show/hide the image on the bottom layer which will be visible through the middle layer's transparent area in the PNG.
Hope my explanation was clear. With some smart coding, this can be packaged and reused anywhere you'd like.