To my surprise, it was the Turkish website of LG Electronics that was using my Google Analytics tracking code. On top of that, they were also hotlinking to one of my locally hosted copies of prefixfree.js, which I’m not even sure they’re getting any use of. One would think that a big company such as LG would have web developers that knew better.

So, seeing that they’re hotlinking to one of my script files, I decided to have some fun with cross-site scripting. To not get into any trouble, I figured I should stay away from trying to break the site, although there would have been lots of fun things that I could have done (like inserting and playing around with fool.js). But what if I could at least use the injected script to prevent the Google Analytics code from sending data to my account?

With that goal in mind, let’s look at some of the code that they copied:

<script type="text/javascript" src="http://joelb.me/scrollpath/script/lib/prefixfree.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25206568-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

At the top you’ll see the hotlinked script and below that is the Google Analytics code.

There are two things that are important to note here, the first is that the hotlinked script is included before the Google Analytics code. Secondly, look closer at line 3:

var _gaq = _gaq || [];

This line of code sets the _gaq variable to an empty array, but only if the variable has not already been defined. This means that we are free to define our own version of _gaq in the injected script, without it being overridden. The next two lines (4 and 5) use the push method to set the tracking options, so we need to have that defined on our object to avoid run-time errors.

There are probably a lot of things that can be done with the _gaq variable to prevent the rest of the code from sending any data to Google Analytics, but I decided to set up an object that replaces the UA-25206568-1 tracking code with UA-XXXXXXXX-X, by using the push method. By replacing the tracking code, the Google Analytics servers won’t be able to identify the account to send the data to, thus preventing the site from cluttering up my traffic data. Here’s the object with its push method:

_gaq = {
  push: function(value) {
    if (value[0] === "_setAccount" && value[1] === "UA-25206568-1") {
      _gaq = [["_setAccount", "UA-XXXXXXXX-X"]];
    } else {
      _gaq = [value];
    }
  }
};

When the push method of _gaq is used and the tracking code is set to mine, the method overrides the _gaq object to a regular array containing the replaced tracking code. I’ve also set a fallback in case they decide to change the code to something that doesn’t concern me.

The last thing I added was a message that gets printed out to the console when you visit the page, which you’ll be able to see until they remove the copied source code. It will be interesting to see how long it takes for them to notice this.

Post Source: Fun with Cross-Site Scripting (XSS)
Site: a Hint of Creative

Post Source: Something I’m Working On…
Site: a Hint of Creative

As far as CSS only solutions go, there are two other tricks that can be used to achieve this similar behavior: using either the :checked or the :target pseudo selectors. In this post, I’ll show you my CSS transition technique used above, followed by a slightly cooler example that I’ve been working on.

The HTML

<button class="red">Red</button>
<button class="green">Green</button>
<button class="blue">Blue</button>

<p>
This text will only have the color while the button is pressed down.
</p>
<p class="perm">
This text will keep the given color even after the button is released.
<p>

The CSS

The prefixes below have been omitted for brevity.

/* The large delay prevents the color from changing */
p.perm {
	transition: color 0s 9999999s;
}

/* When a button is pressed, overwrite the transition property
   to remove the delay, so that we can instantly change the color */
.red:active ~ p.perm, .green:active ~ p.perm, .blue:active ~ p.perm {
	transition: color 0s; 
}
.red:active ~ p {
	color: red;
}
.green:active ~ p { 
	color: green; 
}
.blue:active ~ p {
	color: blue;
}

The JavaScript

// Absolutely none

How It Works

It’s actually pretty simple. With our first CSS declaration, we’ve made it so that any changes to the color property will be delayed by approximately 116 days ( :D ). This virtually infinite delay makes sure that the color stays the same once we’ve set it.

The trick now is to somehow temporary get around this delay, so we can apply the different colors with the buttons. This is done by overriding the transition property during the button press, setting the delay to 0. Now when we release the button, the old transition property will kick back in, setting the delay to 116 days. This will make sure that the text will keep the new color instead of going back to the default.

As far as I know, this only works with animatable properties, but a cool fact is that you can end a transition halfway through and have the property still keep the exact value that it had at that point in the transition. So for example, let’s say we have a linear transition from opacity 1 to 0 over two seconds, but only let it run for one second. The opacity value should now be stuck at 0.5 because the delay prevents it from going back. If we now were to run the opacity transition again, it would continue from 0.5 instead of starting over from the beginning.

Now, before you run off and start using this technique all over the web, keep in mind that this is a very dirty hack for achieving something with CSS that ideally should be done with JavaScript.

Taking it a step further

As I mentioned, I’ve been working on something cool to show this off, so make sure to check out the demo below.

Post Source: Maintaining CSS Style States using “Infinite” Transition Delays
Site: a Hint of Creative

I released a jQuery plugin a couple of days ago and I haven’t had time to write about it here until now. The plugin is based on a slightly crazy idea, but it has been getting some good response on Forrst and Twitter (my follower count has tripled quadrupled since the release).

Most people seem to think that it’s a pretty cool plugin, but struggle in coming up with good practical uses of it. It might not be of much use on any “serious” website, but I think it can create quite a nice effect on personal portfolios and presentation pages, if used creatively.

So what does the plugin do exactly? Well, it lets you define a custom path for the window to follow when scrolling up and down, and you can also throw rotations into the mix. You draw the path with methods that work exactly the same way as the canvas methods for drawing lines and arcs.

To make it easy to see how your path is coming along, I’ve added an option to display the path on an overlaid canvas. Enable this while your building your site, and you should have no problem with shaping the path exactly the way you want it.

After creating the demo I’ve learnt that the way you present your social “follow me” and “share” links can have a big impact on the rate of people that actually click on them. This time, I decided to only include links for following me and sharing the page on Twitter, completely disregarding all other social networks. This increased the amount of social shares tremendously compared to previous demos that I’ve made. Also, instead of using the default tweet button, I made my own custom tweet link that fits in better with the design, using my previously described technique. I’ll be keeping this in mind once I get around to re-designing parts of this blog.

The source code and documentation is on GitHub. Let me know if you use the plugin to build something creative, I’d love to see it!

Demo

Post Source: jQuery Scroll Path
Site: a Hint of Creative

Tweet buttons are a great way to spread your content to the public. Twitter provides an easy way to include their button on your site, but this comes at the cost of not having a very customizable style.

The button is served inside an iframe, which restricts CSS and Javascript access. This can make it hard to get the button to fit in with the rest of the design. What’s even worse is that while the button wrapper is set at a fixed width, the counter inside isn’t. Once the page starts getting more tweets and the counter increases, the width of the button expands, but since the parent iframe has a fixed width, it’s impossible for us to know the actual width of the button.

Something that can also be seen as an issue is the size (46.5 kB) of the widget.js script that Twitter injects with the default button. In most cases though, this script file should already be in the visitor’s cache.

Building the Button

At its core, building a tweet button is as easy as creating a link to Twitter’s tweet intent, with some added URL parameters to set the tweet text. But you probably also want to display the tweet count of the page, to brag about how popular and awesome your site is. This requires us to use Twitter’s count API.

The count API is currently a “private” API, which in other words mean that it’s not linked to in any of Twitter’s developer documentation. This doesn’t mean we can’t access it though, and by looking through the widget.js script, the URL is easily found.

The reason Twitter labels the API as private is because they’re concerned about scaling, but if we were to use the default button, we would still be using this same exact API. In this case, we aren’t adding any extra load to Twitter’s servers, we are actually using less of their bandwidth, since we aren’t downloading the widget.js file with each visit.

Alright, let’s get to the code!

The HTML

<a href="#" class="tweet" data-via="JoelBesada" data-hashtags="cool">
       <span class="count">0</span>
       <span class="message">Tweet</span>
</a>

In the HTML, we can set different options for the tweet with the data attributes, using the same syntax as the Twitter button builder. The href is left empty, as we are going to parse the data attributes and create the tweet intent link with Javascript.

In my example, I want the tweet count to display first, and the text “Tweet” when the button is hovered over, so I have two span elements for this.

The CSS

The vendor prefixes below have been omitted to keep the CSS clean.

.tweet {
    position: relative;
    display: inline-block;
    padding: 7px 10px;
    width: auto;
    min-width: 50px;

    text-align: center;
    font: 16px Helvetica, Arial, sans-serif;
    color: white;
    text-shadow: 1px 1px 0 #021D2B;
    text-decoration: none;

    background: blue;
    background-color: #209adb;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0,0,0,.1) 5px, rgba(0,0,0,.1) 10px),
                      linear-gradient(top, #5ab9ed 0%,#209adb 100%);

    border: 1px solid #04141C;
    border-bottom-width: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1),
                inset 0 1px 0 rgba(255,255,255,0.4),
                inset 0 0 3px rgba(255,255,255,0.5);

}

/* Twitter icon */
.tweet:before {
    content: "";
    display: block;
    position: absolute;
    left: -35px;
    top: 7px;
    width: 24px;
    height: 24px;

    /* Base64 PNG icon shortened down to prevent chaos */
    background-image:url(data:image/png;base64,iVBORw0KGgo...);

    pointer-events: none;
}

/* Extra shadow */
.tweet:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 20px;
    width: 100%;
    height: 20px;

    box-shadow: 0 26px 10px rgba(0,0,0,0.35);
}

.tweet .count {
    position: relative;
    z-index: 2;
    transition: opacity 0.25s ease-out;
}

.tweet .message {
    display: block;
    position: absolute;
    padding-top: inherit;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    text-align: center;

    transition: opacity 0.25s ease-out;
}

.tweet:hover {
    animation: bgpos 0.3s infinite linear;
}

.tweet:hover .count {
    opacity: 0;
}

.tweet:hover .message {
    opacity: 1;
}

.tweet:active {
    border-bottom: 1px solid #04141C;
    top: 2px;

    box-shadow: inset 0 2px 3px rgba(0,0,0,0.7),
                0 1px 0 rgba(255,255,255,0.2),
                inset 0 0 3px rgba(0,0,0,0.5);

    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0,0,0,.1) 5px, rgba(0,0,0,.1) 10px),
                      linear-gradient(top, #106491 0%, #106491 100%);
}

.tweet:active:after {
    display: none;
}

.tweet:active:before {
    top: 5px;
}

@keyframes bgpos {
    from { background-position: 0 0; }
    to { background-position: 14px 0; }
}

I might have gone a little bit overboard with the CSS on this one, but I’ll explain some of the trickier parts before we get on to the Javascript.

The background is created with multiple gradients, which are comma-separated and ordered so that the topmost layer is defined first. The striped pattern is created with a repeating linear gradient, to see more of these I recommend you check out this awesome gallery with different CSS3 patterns by Lea Verou. Below the stripes, we have a simple linear gradient between two shades of light blue.

To create some depth in the button, I’m using several box shadows. The shiny and sharp look is achieved by using inset bright shadows, one on the top and another one around the whole border. By increasing the size of the bottom border, we get a sense of height. This effect is also amplified by adding another thicker shadow below the button with the help of the :after pseudo element.

Something that can’t be seen from the picture, but is apparent in the demo, is the looping animation that displays when hovering over the button. By animating the background position, the stripes move across the button and we get a cool looking hover effect. For doing this, we use a simple @keyframe definition with start and end background-position values, calibrating the end x-value to make sure that the animation looks seamless when looped.

For the active state (button pressed down), we darken the background colors, and set some dark inset shadows. We also replace the extra bottom border width and the drop-shadow with a one pixel highlight.

The Javascript (using jQuery)

var API_URL = "http://cdn.api.twitter.com/1/urls/count.json",
    TWEET_URL = "https://twitter.com/intent/tweet";

$(".tweet").each(function() {
    var elem = $(this),
    // Use current page URL as default link
    url = encodeURIComponent(elem.attr("data-url") || document.location.href),
    // Use page title as default tweet message
    text = elem.attr("data-text") || document.title,
    via = elem.attr("data-via") || "",
    related = encodeURIComponent(elem.attr("data-related")) || "",
    hashtags = encodeURIComponent(elem.attr("data-hashtags")) || "";

    // Set href to tweet page
    elem.attr({
        href: TWEET_URL + "?hashtags=" + hashtags + "&original_referer=" +
                encodeURIComponent(document.location.href) + "&related=" + related +
                "&source=tweetbutton&text=" + text + "&url=" + url + "&via=" + via,
        target: "_blank"
    });

    // Get count and set it as the inner HTML of .count
    $.getJSON(API_URL + "?callback=?&url=" + url, function(data) {
        elem.find(".count").html(data.count);
    });
});

I’ve written the code to be reusable so that anyone can easily copy and paste it into their own sites. The code looks for elements with the class tweet and uses its data attributes to create a tweet intent link with the correct URL parameters. If not set, the URL and text parameters default to the URL and title of the current page, respectively. You can use the the Twitter button builder to generate the different data attributes for your button.

The count is retrieved by sending a GET request to the Twitter count API, with a parameter set to the URL we want to get the tweet count on. AJAX requests are usually restricted by the same origin policy, which means we can’t make requests to services on other domains. There are two solutions to this, CORS (Cross-Origin Resource Sharing) and JSONP (JSON with padding).

The API we’re accessing is not CORS enabled, but it does have support for JSONP. What this means is that when we set the callback parameter to for example callMe, the API will set the return value as an argument to the callback function, like this.

The jQuery getJSON function handles this automatically when given an url with the callback parameter set to “?”. The second argument of the getJSON function gets called when the data is returned, and from there we can easily set the HTML of the .count element to the returned value.

Demo

That’s basically all there is to it, I hope you find some value in what I’ve covered here. I’ve created a demo on JSFiddle for everyone to check out, go ahead and click the button below!

Demo

Post Source: Tutorial — Creating a Custom Tweet Button with a Counter
Site: a Hint of Creative

The script works by calculating the dominant color of the site’s favicon, which usually works pretty well to determine the web page’s signature color. I’m using a canvas object to analyze the pixel data, which restricts the browser suppport to more modern browsers. It would be possible to widen the browser support by parsing the image file data directly, but considering that favicons come in many different formats, this would require too much work and code for such a small visual effect.

CORS is used to connect to getFavicon, a service by Jason Cartwright that retrieves the favicon of any given URL. There is also a PHP proxy file that you can use on your own server as fallback for browsers without CORS support.

I’ve created a pretty demo page for the script, check it out below.

Demo

Post Source: accentColor Script
Site: a Hint of Creative

// We start by checking if the browser supports the
// Clipboard object. If not, we need to create a
// contenteditable element that catches all pasted data
if (!window.Clipboard) {
	var pasteCatcher = document.createElement("div");

	// Firefox allows images to be pasted into contenteditable elements
	pasteCatcher.setAttribute("contenteditable", "");

	// We can hide the element and append it to the body,
	pasteCatcher.style.display = "none";
	document.body.appendChild(pasteCatcher);

	// as long as we make sure it is always in focus
	pasteCatcher.focus();
	document.addEventListener("click", function() { pasteCatcher.focus(); });
}
// Add the paste event listener
window.addEventListener("paste", pasteHandler);

/* Handle paste events */
function pasteHandler(e) {
	// We need to check if event.clipboardData is supported (Chrome)
	if (e.clipboardData) {
		// Get the items from the clipboard
		var items = e.clipboardData.items;
		if (items) {
			// Loop through all items, looking for any kind of image
			for (var i = 0; i < items.length; i++) {
				if (items[i].type.indexOf("image") !== -1) {
					// We need to represent the image as a file,
					var blob = items[i].getAsFile();
					// and use a URL or webkitURL (whichever is available to the browser)
					// to create a temporary URL to the object
					var URLObj = window.URL || window.webkitURL;
					var source = URLObj.createObjectURL(blob);

					// The URL can then be used as the source of an image
					createImage(source);
				}
			}
		}
	// If we can't handle clipboard data directly (Firefox),
	// we need to read what was pasted from the contenteditable element
	} else {
		// This is a cheap trick to make sure we read the data
		// AFTER it has been inserted.
		setTimeout(checkInput, 1);
	}
}

/* Parse the input in the paste catcher element */
function checkInput() {
	// Store the pasted content in a variable
	var child = pasteCatcher.childNodes[0];

	// Clear the inner html to make sure we're always
	// getting the latest inserted content
	pasteCatcher.innerHTML = "";

	if (child) {
		// If the user pastes an image, the src attribute
		// will represent the image as a base64 encoded string.
		if (child.tagName === "IMG") {
			createImage(child.src);
		}
	}
}

/* Creates a new image from a given source */
function createImage(source) {
	var pastedImage = new Image();
	pastedImage.onload = function() {
		// You now have the image!
	}
	pastedImage.src = source;
}

With Chrome we can access the image in the clipboard through the clipboardData object, but this can only be done inside a paste event handler. Inside the event handler, we loop through all items and search for an image. If we find one, we create a Blob of the image, and use the URL of it as the image source.

Firefox on the other hand does not have the clipboardData object, but we can work around this. In Firefox, it’s possible to paste images into elements with the contenteditable attribute set. By creating an invisible contenteditable element which always is focused, we can catch everything that the user pastes. So, everytime the user pastes something, we read through the content in the catcher element and check if it was an image. If it is, we simply take the source of that image and clear the element.

That nasty bit of code you see on line 48, setTimeout(checkInput, 1);, is a way to work around the fact that contenteditable elements don’t trigger oninput events in Firefox. Since the paste event triggers before anything is inserted into the element, we set a 1 ms timeout before we read the element’s content. This is enough time for the pasted content to be inserted.

Once we have the image, we can do anything we want with it, e.g append it to the page, draw it onto a canvas, upload it to a server, etc.

Shameless Self Promotion

I have not created a demo specifically for this, but I’m using this technique on one of my sites: PasteShack. PasteShack is an image uploading site that makes screenshot sharing super duper easy, by using the technique above.

Post Source: Code Snippet — Accessing Clipboard Images with Javascript
Site: a Hint of Creative

I’ve been trying out different things that you can do with the CSS mask property lately. With a CSS mask, you can mask or clip any element to a desired shape. The mask is either a PNG image, or an SVG image.

I coupled this with the CSS transform and transition properties, and came up with a pretty cool concept for an image gallery.

I’ve put together a demo for Chrome and Webkit nightly builds. Firefox also supports the CSS mask property, but doesn’t seem to play well with rotated masked images, so I’ve only used -webkit prefixes for this demo.

I’ll run through all the different steps in making this gallery wheel below, starting with the markup.

The HTML

<div id="gallery">
   <div id="gallery-wheel">
      <img class="active" src="pic1.png" alt="" />
      <img src="pic2.png" alt="" />
      <img src="pic3.png" alt="" />
      <img src="pic4.png" alt="" />
      <img src="pic5.png" alt="" />
      <img src="pic6.png" alt="" />
   </div>
</div>

The structure is pretty straightforward. We have a wrapper element which contains the rotating outer wheel, and the centerpiece which remains still. The images are random shots from Dribbble.

The Mask

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <path d="M150,300 L25,83 A250,250 0 0,1 275,83 z"/>
</svg>

The SVG mask is saved in it’s own .svg file, and is the same size as the images we want to apply it to.

Since we have six images in the wheel, our mask will be a sixth of a circle. We draw this out by using the path svg tag. The shape of the path is defined by the d attribute, which takes a number of options. I’m not going to go into exactly what the parameters mean, just know that this draws a 60° segment of a circle, with a radius of 250 pixels. This article has a good explanation on how to draw pie shapes in SVG images.

Why choose SVG over PNG masking?

You might think that it would be a lot simpler to just draw your desired shape in an image editor, save it as a PNG image, and use that as the CSS mask instead. This might be true, but what if you wanted to quickly change the number of images in the wheel? If we instead wanted to have 12 images, we would have to go back into our image editor and make a new PNG. This could become a lot more cumbersome than just changing some parameters in the SVG.

And what if you would like your gallery to be completely dynamic? There might be cases when you cannot determine beforehand how many pictures the gallery will contain. Our SVG mask could just as easily be generated and put in the DOM by Javascript code that takes into account how many images the gallery contains.

That said, the only browser that at the moment supports embedded/inline SVG images as CSS masks is Firefox which, as I stated earlier, doesn’t seem to rotate masked images correctly.

The CSS

#gallery {
	margin: 0 auto;
	position: relative;
	background: white;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	border: 5px solid white;
}

#gallery-wheel {
	position: relative;
	width: 100%;
	height: 100%;
}

#gallery-wheel img {
	position: absolute;
	-webkit-mask-box-image: url("../mask.svg") round;
	-webkit-transform-origin: 50% 100%;
	padding: 5px;
	top: 0;
	margin-top: -50px;
	left: 50%;
	margin-left: -155px;
	cursor: pointer;
}
#gallery-wheel img:hover { opacity: 0.5; }

#gallery-wheel img:nth-child(2) { -webkit-transform: rotate(60deg); }
#gallery-wheel img:nth-child(3) { -webkit-transform: rotate(120deg); }
#gallery-wheel img:nth-child(4) { -webkit-transform: rotate(180deg); }
#gallery-wheel img:nth-child(5) { -webkit-transform: rotate(240deg); }
#gallery-wheel img:nth-child(6) { -webkit-transform: rotate(300deg); }

#gallery-center {
	position: absolute;
	background-image: url("../pic1.png");
	background-position: center;
	top: 50%;
	left: 50%;
	margin-left: -160px;
	margin-top: -160px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 10px solid white;
}

.fade-overlay {
	position: absolute;
	background-position: center;
	opacity: 0.0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

Most of this is all pretty basic styling, so let’s just look at the CSS mask and transform parts, which I’ve highlighted above.

The -webkit-mask-box-image: url(../mask.svg) round rule on line 19 sets our CSS mask to the SVG that we created, stretching it to cover the whole image.

The next line, -webkit-transform-origin: 50% 100%, puts the pivot point of the rotation to the bottom center of the CSS mask. This will be the exact center of the gallery wheel.

Lines 30 to 34 rotate the 5 other images around the wheel. For every image, we add 60 degrees to the rotation. This fills the entire circle with our pie-slices.

The fade-overlay class is used by the Javascript code, which I’ll explain next.

The Javascript — Making it Rotate

$(document).ready(init);

var galleryWheel;
var galleryCenter;
var galleryItems;
var animating;

function init() {
	galleryWheel = $("#gallery-wheel");
	galleryCenter = $("#gallery-center");
	galleryItems = $("#gallery img");

	galleryItems.click(clickImage);
}

function clickImage(e) {
	var target = $(e.target);
	if (!target.hasClass("active") && !animating) {
		animating = true;
		var activeElement = galleryWheel.find(".active");

		// Calculate the number of elements between the active (top) image and the clicked
      // one, and multiply that by the inner angle that each slice has.
		var rotateBy = -360/galleryItems.length * (target.index() - activeElement.index());

		// Make sure the shortest path is taken, the maximum length the wheel should spin
      // is 180 degrees.
		if (rotateBy >= 180) {
			rotateBy -= 360;
		} else if(rotateBy < -180) {
			rotateBy += 360;
		}

		// Create a temporary overlay element that fades in over the center image.
		// When the opacity is full, change the image of the center element behind,
		// and remove the overlay.
		$('<div class="fade-overlay">')
          .css("backgroundImage", "url(" + target.attr("src") + ")")
              .appendTo(galleryCenter).animate({opacity: 1.0}, 500, function() {
                   galleryCenter.css("backgroundImage", "url(" + target.attr("src") + ")");
                   $(this).remove();
               });

      activeElement.removeClass("active");
      target.addClass("active");

      galleryWheel.animate({rotate: "+=" + rotateBy + 'deg'}, 500, function() { animating = false; } );
   }
}

To get the gallery to rotate on user input, we use jQuery coupled with the jQuery 2D Transformation Plugin by Grady Kuhnline.

When the user clicks on an image in the wheel, we calculate the distance in degrees to that image from the current active image. We can make sure that the wheel always rotates the shortest path to the new position, by limiting the rotation values between -180 and 180 degrees.

While rotating the wheel to the new position, the new image fades in. Since we can’t fade between background images on a single element, we need to overlay a temporary element over the center. This temporary element contains the image we want to display next, and fades in above the center. When the temporary image is at full opacity, we switch the image of the underlying center element and remove the overlay element. This creates the illusion of a seamless transition between background images.

Conclusion

A small annoyance with the final product is that the bounding box of the center image blocks the hover events of the images below. I’m almost certain I’ve seen some CSS property that enables you to hover behind elements, but I just can’t seem to find it now.

UPDATE: The property I was looking for is pointer-events: none;.
Although using that makes hovering over the center more confusing, since the hover areas of the images overlap eachother in weird ways.

This gallery is rather gimmicky, so I doubt there’s any real use for this. My intention has mainly been to show off some cool things you can do with modern CSS properties. I guess you could make some kind of fancy menu using this technique, but with the current lack of browser support, it probably shouldn’t be used on any real world website. Anyhow, I hope someone will be able to learn something new from what I’ve shown today.

Below is a link to the final demo for the gallery wheel. Note that this only works in Chrome and Webkit nightly builds. I might add Firefox support once they fix the rotated masks issue.

Demo

Post Source: CSS Mask Tutorial — Rotating Image Gallery
Site: a Hint of Creative

My name is Joel Besada, I’m a computer science student at the Royal Institute of Technology in Stockholm, Sweden. Roughly one year ago, I took my first steps into web development/design. Since then, I’ve undertaken several personal projects creating websites, plugins and themes. My most notable project thus far is JSManipulate — an open-source Javascript image manipulation library.

I’m starting this blog because I want to write about what I’m working on, share my thoughts about the web, and show some useful web development tricks. Hopefully, I’ll some day have an audience here that finds what I write helpful and/or interesting. Until then, this blog will serve as an archive for myself in which I solidify all the things that go through my head while I’m programming and designing.

As an added bonus, I figured it would be a fun idea to dust off my old Wacom tablet and do some drawings for each blog post. Beware though, I’m not doing this because I’m particularly good at drawing, I’m doing this because I’m not. As the say, practice makes perfect, so here’s a drawing of a whale!

That’s enough of an introduction! Now I’ll start writing on some actual content to kick off this blog with.

Post Source: A Brief Introduction
Site: a Hint of Creative