Archive for the ‘Tutorials’ Category

One design/css trend that is popular among many blogs, is “fancy Quotes” or should I say giant talk bubble comment-like creatures. You know the kind every blog and it’s mother have in the comment area. We have implemented this design style on our new site re-design under the “Testimonial” section, of course in a sleek Sharpdot fashion, with a drop shadow, small file size and even smaller mark up.

Well to start off here is the image and html we will use:

(Note the white background of the image. We will be overlaying this image over the blue color talk-bubble background to cancel the blue out. Then blend in to the white page background.)

HTML:

    <blockquote>
        "We've worked with Sharpdot for years and are consistently amazed
        with the quality of work and response time that they have provided."
        <span>
            <strong>Rob Dietz</strong><br />
            Principal and Creative Director - <a href="http://www.picadesign.com/">Pica Design, LLC</a>
        </span>
    </blockquote>

The first thing you should notice is there is not a lot of mark up here, no div’s and no id’s or classes junking it up. Just a good old <blockquote> tag, a <span> and <strong> tag to boot. (Note: If you view the source code of our live site you will see a div with a class added, for styling the link arrows with in the quote.) This is one for the semantics crowd. Now let’s take a look at the css for the quotes.

CSS:

	blockquote {
            background-color:#e1e8f2;
            border:1px solid #a6a6a6;
            width:258px;
            padding:10px;
            margin-bottom:20px;
       }
	blockquote span {
            background:#fff url(images/bkg_talkBubble-bot.jpg) no-repeat;
            display:block;
            width:220px;
            padding:12px 0 0 60px;
           margin:10px 0 -11px -11px;
        }
	blockquote span strong { font:bold 1.4em 'Tahoma', Verdana, Arial, Helvetica, sans-serif; }

OK, first off in our blockquote style we have styled a generic type of box with a light blue background, light Grey border, some padding for breathing room, a width for the image to line up with, and some margin on the bottom so the next quote doesn’t get caught up in it’s knickers.

Now the fun part…the span tag. We set the background image, set it to be a block element. Then the magical part. In order for this “cap” to display properly we use negative margin to “pull” it in to place. Kind of like Google’s css grid system “Blueprint” uses the .push and .pull classes to make things do your bidding, regardless of the structural bindings. The width and padding values are all set to add up properly.

This tequnique can be used in making content boxes as well. Sometimes I set the container element to display: relative; and set the inner caps to position: absolute; then use top and left negitive values to postion them into place. It really comes down to how all the different browsers display your mark up…meaning does Internet Explorer 6 (evil, bad, go away) display it properly..or can a hack be acheived period.

Recently, I designed a website and I decided to do a unique style on the search field. I added a background image to the input field and then a background image to the submit button. Everything looked great until I viewed it in Internet Destroyer (Internet Explorer). That’s when the sky fell on my head…as usual.

The Issue:

I was not able to hide the text from the button, letting the underlying image to show it’s text. Normally my preferred image replacement technique is to have text in the background image and then use a negative text-indent at a high number like this:

background-image: url('my-picture-with-text.jpg');
text-indent: -9999px;

This works fine with submit buttons on most browsers, except IE.

The fix:

Add 2 extra lines to your css file:

color: transparent;
text-transform: capitalize;

For some reason the text indent dosn’t work by itself in IE, so after adding these 2 lines it works. It is a hack within a hack though, the color:transparent property should work by itself, but it doesn’t. For some odd reason setting the text-transform to anything (in this case I chose capitalize because I don’t use it very often) makes it magicly work. Anyhow if anyone finds this useful please leave a comment below.

I found a neat JavaScript tutorial about how to use type-casting and arrays instead of conditional statements.

In a nutshell it takes a basic conditional statement and does it in another way.

Same old boring conditional statement:

function doSomethingGreat(myVar) {
    switch(myVar) {
        case 'AmberTaylor':
            alert('Amber is smart as heck!');
            break;
        case 'Sharpdot':
            alert('Amber works for the best company in the world!');
            break;
    }
}

The new way:

function doSomethingGreat(myVar) {     //This Creates the function and passes in the condition to test against
    theEgoFunction = new Array();      //This turns the function into an Array
    theEgoFunction['AmberTaylor'] = theAmberTaylor;     // Selects a function for one choice to run
    theEgoFunction['Sharpdot'] = theSharpdot;      // Selects a function for the other choice to run
    theEgoFunction[myVar]();    //Now finally the fuction to execute
}

function theAmberTaylor() {     //The functions to run
    alert('Amber is smart as heck!');
}

function theSharpdot() {    //The other function to run
    alert('Amber works for the best company in the world!');
}

This code looks almost identical to Actionscript (except for the built-in JavaScript functions, and some nuances). I have been working more with Actionscript recently, but as a result you can’t help to learn JavaScript along the way.

Anyhow I didn’t write this tidbit originally,  however I found it neat enough to share.  It originally comes from the Webmonkey blog, check it out:

View it here: http://www.webmonkey.com/tutorial/Free_Yourself_from_Conditions_in_JavaScript?oldid=31505