はてなブックマーク

This version of Supersized has themes, direct slide links, dynamic preloading, and an API. Introducing Supersized 3.2 Features Resizes images to fill browser while maintaining image dimension ratio Cycles backgrounds via slideshow with transitions and dynamic preloading Core version is available for those that just want background resizing. Navigation controls with keyboard support Integration wit

Totem is our latest jQuery plugin release. It makes animated tickers easy. A New Release We’re very excited to launch our next jQuery plugin since the widely popular Supersized. Totem makes implementing animated vertical tickers with navigation easy. It is the result of a few recent client projects which required finely controlled tickers plus navigation. This is certainly not the first vertical t

Supersized 3.0 – Full Screen Background & Slideshow jQuery Plugin Supersized has been one of the most popular posts on Build Internet since the original came out in February 2009. We thought it was time for an update. This is an outdated version! Supersized has been moved and updated to a more permanent home at the official Supersized project page. Check there for the latest release notes and feat

Brian Muse Brian is the CTO at One Mighty Roar, based out of Boston, MA. Good software enables us to take a lot of niceties for granted. Intelligent interfaces handle all the simple tasks so that we don’t need to worry about them. For example, when I type “www.desktopped.com” into an email or an instant message, I expect that it will be clickable on the other end without having to manually add in

The gradient has become a universal crutch. Hypocrisy, we know, considering parts of this blog’s current design. Gradients have a habit of decorating since the design trends introduced by Web 2.0 gloss. The starburst badges and text reflections may have faded into obscurity, but the brash gradient stuck it out. Please don’t read this as a “you’re doing it wrong” post, because there have been far t

This will be an experiment in transparency. CSS has come a long way over the years, and one of the biggest advancements is the integrated use of transparency. A few years back, transparency in web design was a compatibility nightmare, and involved a messy combination of images and alignment. We’re spoiled today with the introduction and adoption of the CSS3 spec and widespread PNG compatibility. T

If there’s one thing that never seems to go out of style, it’s a good jQuery slideshow. Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well. In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between sli

We haven’t gone back to basics in a while. Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It’s a simple, but elegant solution for most websites. This was one of the design strategies that first helped me to start using smarter markup. For those of you just getting introduced to this technique today, hopefully you’ll have some similar r

Give Your Website a Custom iPhone Bookmark Icon This tutorial will show you how to get your own custom icon to appear when someone bookmarks your website on their iPhone home screen. Whether or not you own an iPhone, it takes under five minutes to do and makes your site look that much more professional, so let’s get rolling. Design Considerations Here is an excerpt from the iPhone Dev Center’s off

This is a roundup of that identifies the fonts used in the logos of some of the top sites on the internet. This is the second addition to Fonts used in Logos of Popular Websites. With that said, let’s get to know these logos a little better. (Spoiler Alert) There is no Times New Roman. Newgrounds – Tekuteku VIRB – Proxima Nova Extrabold Myspace – Arial Rounded Bold Wikipedia – Hoefler Text eBay –

A few years back, rounded corners became one of the signature design elements of the Web 2.0 trend. Even though they started as a fad, rounded corners are more than simple eye candy. They also have a role in separating or grouping the sections of a page. As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading

I got in touch with a good number of design blogs with one question – What font do you use in your logo? I got back a hefty amount of responses and found out the rest through some top notch detective work (a special thanks goes out to all those who replied back). We’ve got quite a diverse amount of fonts to keep you interested, so have at it soldier! Woork Up – FFF Forward Outlaw Design Blog – Ble

Sadly, min-margin is nonexistent in the CSS world. I was okay with that – until recently, when I realized I needed it. After a fair share of general thought and Google usage, I arrived upon a solution, which I invite you to check out below. So what situation would you need min-margin in? Take a second to look at the demo to see a before and after. If you just realized that this might be something

In an ongoing attempt to offer alternative methods to spruce up menus, I’ve pieced together an elastic thumbnail menu. What does it do exactly? Magnifies menu items when they are hovered over. Menu items expand upwards. View the demo to see it in action. Hopefully you know what you’re getting into, let’s make this thing happen. The HTML Quick and easy, the general framework we’ll be using goes as

A Bundle of Free Icons For Web Designers Dusk iPhone Style Icons PixelMixer Basic Set Colorstroked_Freehand Icon Set Lovely Website Icons Pack 1 VisualPharm Financial Icon Set Money [Vista] Icons Social Media Icons Social Media Bookmark Pack Social Charms Social Media Post-its Polaroid Social Media Icons Miscellaneous (But Still Cool To Look At) Pioneer Camp Heaphone Propper Icon Shirt’n Tie Super

It’s a Rainbow! – Color Changing Text and Backgrounds w/ jQuery Here’s a quick and easy way to cycle between multiple colors smoothly. Normally you would define the (background) color in the CSS and that would be the end of it. In this case we want to be able to adjust colors after the page has loaded, and not just once either – we’re aiming for continuous adjustments. The lovely part about this w

Nicely illustrated banners are…nice. But why not add a little pizazz by using animation like Flash websites do? Through Javascript web pages are becoming increasingly less static and all sorts of creative possibilities are opening up. In this tutorial we will learn the basics of setting up a continuous animation which can be applied pretty much anywhere. Take a peek below to see an outline of what

How Is This Useful? In fluid layouts it is easy to format the text to adjust nicely when the window is resized, but the images are not as fluid-friendly. This Quick Tip shows you how to swap between two image sizes based on the current size of the browser, div, or whatever you decide to make the deciding factor. For those looking for a real life example, Last.fm uses this technique on their artist

This is a quick and easy approach that tackles a pretty common technique. By the end of this tutorial you will be able to add pop up message boxes complete with dimmed background to your existing site. Feel free to take a look at the demo to scope out exactly what we’ll be creating here today. You may already be familiar with Lightbox – which does a number of the things we are aiming to accomplish