サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
buildinternet.com
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
Sloppy Art - A Mess of Inspiration via the Nonsense Society (image credit: Florian I Am Not Human - Unique Self Portraits via the Nonsense Society (photo credit: Dan Deroches)
The most popular tutorial on Build Internet is now a jQuery plugin. Welcome aboard, Mosaic. Sliding Boxes Revisited The original sliding boxes tutorial is undoubtedly our most popular tutorial, with about 660,000 views as of this post. Given our recent surge in releasing plugins, we decided to add sliding boxes to the roster – say hello to the Mosaic jQuery plugin. Features Automatically generates
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
Even though CSS3 has brought a lot to the table in regards to drop shadow effects, there are still plenty of reasons to use image alternatives. The drop shadows generated by CSS3 are relatively uniform, and don’t deviate much past size and transparency. In some cases, you might want to give a page some extra depth. I ran into a similar situation in a recent client project, and decided to use a rec
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
In this tutorial I will be showing you how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. This can be useful for showing off a particular aspect of a photo (ie items or people). The original inspiration for this tutorial came from the IKEA website, which uses Flash to accomplish something similar, although admittedly with a few extra features. Tutor
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
This is just the demo page! Head back to the tutorial for the full explanation.
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
Getting a design to click can take time. In many cases, it takes several rounds of revisions to even get to an effective starting point. What can you do to give yourself a better chance at designing something great sooner? In this article, we’ll take a look at a pre-design process known as wireframing. It’s used by designers to help define a website’s essence before working on the time consuming d
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
In this tutorial you’ll learn how to increase pageviews by adding thumbnails to related posts using the popular YARPP plugin and WordPress custom fields. The Goal Before we start, let’s take a look at the result of what we’re building: The sample above comes from the theme of a new One Mighty Roar blog launching next Monday. As you can see, WordPress will place a thumbnail and title for each relat
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
次のページ
このページを最初にブックマークしてみませんか?
『Build Internet』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く