Baylus.com » Tutorials

Custom Rounded CSS Corners with Alpha

admin — Sun, 18 Oct 2009 19:08:56 +0000

Creating rounded corners boxes proves a fairly difficult challenge. While there are numerous elegant solutions to this problem for the purposes of the design proposed for ACS.org Release 2, none of these solutions was ideal.

Both spiffy corners and nifty corners are great solutions. However, I needed to consider what might happen when user added alot of boxes to a page. How would these JavaScript heavy solutions perform? Also there is the issue of users who have disabled JavaScript in their browsers. I wanted a solution which could swing both ways. A solution which could be created using CSS only or be applied with JavaScript. Finally, I want rounded corners for a designer. I wanted a solution which could be custom themed one in which the corners could all be different, so of course this means using images for the borders and the corners.
Custom Corners Demonstration

A few notes…

First I’ll be updating this post soon with some graphics and instruction, but for now just go here
Custom Corners Demonstration.

Also, I ran across this post from 465 Berea St Transparent custom corners and borders, version 2

Anyhow, that technique seems very close to my own. I’ll update this post with the differences once I’ve had a chance to see how my technique differs from Roger’s.

Selecting Checkboxes with jQuery

admin — Sun, 03 May 2009 20:37:21 +0000

This video demonstrates using jQuery to select checkboxes and mark them checked. Also covered is selecting a group of related checkboxes using jQuery’s filter.

During this presentation I referenced the excellent tutorial covering filter vs find at jQuery for Designers

Modifying CSS with Firebug

admin — Sun, 03 May 2009 00:03:08 +0000

This video tutorial demonstrates how to modify CSS using Firebug for Firefox. I will explain how to use firebugs inspect feature to review your websites CSS and then how to update the CSS and see the changes in realtime. Finally the video demonstrates getting the new CSS you develop in Firebug, back into you code editor.

I’m a long time DW CS4 user but I’ve worked firebug into my workflow over the past year. This is a great tool, you shouldn’t miss it.

Be sure to download Firebug from http://www.getfirebug.com.

Toggling and Effects with jQuery

admin — Sat, 02 May 2009 18:24:35 +0000

The following tutorial demonstrates how to use a toggle button to animate and fade some text in and out with jQuery.

Getting Started with jQuery.

admin — Sat, 02 May 2009 18:04:58 +0000

Watch a video tutorial to get started with jQuery. I will cover a few of the basics in this video.

I was pretty hesitant to get started with AJAX. I uderstood that it was used to make refresh free pages and transfer data, so it seemed a bit outside my comfort zone. Even the acronymn is difficult for designers to grasp, Asynchronous JavaScript and XML. Much of the code seems pretty arcane to those of us who are unfamiliar with OOP techniques.

Here’s the thing. AJAX make JavaScript easier to work with and in the case of jQuery, it’s much easier. Of course AJAX is still able to transfer data XML, JSON etc, but for me it’s all about creating nifty user interfaces. Using AJAX means that I don’t have to spend an inordinate about of time worrying about browser specific JavaScript syntax, browser detection and can focus on getting UI’s to work well and look good.

While there are numerous libraries to pick from I use jQuery and highly reccomend it. I also reccomend Remmy Sharp’s blog jQuery for Designers it’s a fantastic resource for tutorials on jQuery.

Getting started with jQuery is pretty easy. Im going to cover the following in this tutorial.

loading jQuery into your webpage using Google’s Ajax Libraries
creating a “Hello World!” sample
Listening for a click