Skip to content

Inset Text With CSS

image of text inlay

I know this post will seem like a tribute to the man behind the curtain, but I can assure you it is not. I am making this post because I have seen this styling used in many ways and really like the effect. The text inlay is a simple way to create styling that is not seen everywhere else. The subtle design is clean and catches more eyes. And please do not think that you are limited the grey schema, check out Show and Tell’s logo. The demo and instructions on making inset objects can be found here.

jQuery Zoom with Zoomy

zoomy jquery plugin

Zoomy is a great jQuery plugin for the zoom lens effect you get on an iOS product. With a click, the cursor changes to a round or square lens that tracks with the mouse. The plugin does a great job, especially with the configuration page, where you can change some properties without digging through code. The one thing I am going to change is the activation of the script. I would much rather have the lens pop up on mouse hover than the click. All in all, great work jacoblwe20.

jsFiddle Developer Playground

jsfiddle website image

My usual workflow consists of folders, editors with multiple tabs, and hopefully one browser for testing. Things get a little hectic if I’m trying to make a simple rotating logo. JSFiddle is a neat little browser editor that simplifies workflow on smaller projects. The workspace has resizable editing areas for your HTML, CSS, JavaScript, and final product. You can also select different JavaScript libraries to load. If I’m ever making simple scripts, this is the place to do it.

Modernizr

modernizr.com website image

With all of the browser changes and differences, it would be nice if a JavaScript library kept all of that information for you. Well there is one. Modernizr is a small library that takes the burden of browser implementation off of your hands. The script sets up a Modernizr object that has boolean properties. With simple yep and nope statements, you can easily set any JavaScript to run if the browser supports HTML5 canvas, or geolocation, or even CSS properties.

Although this makes the implementation task much easier, keep in mind you have to make sure you update the library. I do wish to see the library hosted. Regardless, it is does make things much easier. You can find it here.

Slick CSS Buttons

CSS buttons demo image

Guess what? This post is about button styles. And yes, it is important. Because there is a clear advertising goal for many websites, styling is very important for the whole site, as well as the commitment action from your visitor. The 3D effect is much more appealing for a person to press, because they already have an idea in their head what the button will do after they press it. Enter CSS3.

This demo includes a few styles you can use. I did have to fiddle with the gradient CSS properties to work in all of the browsers by the way. If you see an increase in presses on your website’s special button, you can thank me later.

jQuery Image Preview

We all know the acronym K.I.S.S. Kode Is Simple Sometimes… I’m not sure why code is spelled with a K. This jQuery simple image hover tutorial is incredibly simple with jQuery. In under 30 lines of code, adding dynamic images is a great asset to your site.

It seems most of the online demos are created by designers who add too much styling and code. I can do all of that later. I need a functional, light, script I can go through and understand for that oddball case I need to change the fadeIn speed, CSS, or other functionality. Alen Grakalic did just that with this demo.

The ‘tricks’ given by Alen contain code for text and image hover states. You can find the short demo here.

Pingdom.net’s Load Tester

pingdom.net load test tool

Well, I wish I could say I’m posing this because I didn’t need it. After some website testing at a friends, I found that one of my sites had an unusually long load time. My head was spinning with possibilities of the fault. Could I be getting too many visitors for my bandwidth? Are too many bots crawling the site? Are all of my images too large? Shortly after, I found pingdom.net’s load test tool. The site offers services for monitoring your websites, which I do not have a review on. I did use their load tester tool, which solved my problem. I found that the long load time was due to the server… bummer.

The tool shows the size of the loaded page, time it takes to load, and other very useful information. My favorite is the breakdown of what loads when. On a list, the tool shows the entire load process, files and images included. They are displayed on a colorized graph. Even if you are not having problems with load time, this is a great tool to keep a check on your hosting company.

jQuery Sliding Captions

sliding captions with jQuery image

Will all of the demos out there, I try to find the best of the best. I look for maximum result with minimal effort. This sliding boxes tutorial is one of my favorite effects. Image captions slide off and on of the static image with a rollover. Clean, and lightweight, this is a great way to add that extra styling to the website without adding content clutter. The tutorial includes script for different ways of animating the captions. You can find the demo here and the tutorial here.

jQuery Horizontal Accordion

jquery horizontal slider image

Content organization can make or break a website. I have found that using an interface that engages the visitor holds much more retention. jQuery has a build in accordion widget that helps organize content into attractive, and space saving areas. Using this widget, Orman Clark has created a gorgeous themed slider, liteAccordion. I do not mention this for the pure design factor, Orman has put some serious work into custom properties and even a web demo suite to customize the widget and get the code snippet. If you are looking for a good content accordion, this is the one.

CSS Layer Styles Builder

layerstyles.org website image

Designing pages and styles from the back end can be difficult. Layerstyles.org is a tool to help create those attractive styles without much effort at all. The website mocks the Adobe styles box, letting you customize the properties and shadows. A dialogue box at the bottom of the page writes the CSS for you. The styles are created browser specific too.