CodeinWP CodeinWP

Web Design Tutorials

Default CSS Display Values for Different HTML Elements

Default Display Values for Different HTML ElementsEvery element in an HTML document accepts a value for the CSS display property. The possible values you can use for display are many.

The three most commonly used values are none, block, and inline. But what if you don’t define a display value for an element? Well, all elements have an initial or default state for their display value. Let’s consider some of these and see some interesting things you might not have known.

Sass on Windows with Scout App

Sass on Windows with Scout AppThis is a follow-up post to my previous article, posted yesterday, that discussed how to get up and running with Sass on Windows. At the end of that post I introduced an alternative to all the command-line based instructions.

So here I’ll quickly cover that alternative — Scout App, a free Mac and Windows-based native app produced and maintained by developers at Mutually Human.

Setting Up Sass on Windows

Setting Up Sass on WindowsThere’s a ton of information floating around on preprocessors nowadays. Most of that info is geared towards Mac users, so in this post I’m providing a very simple guide to help Windows-based developers get up and running quickly with Sass (my preprocessor of choice).

Overall, Sass is not difficult at all to get set up, even if you’re doing it on the command-line. But if you have no interest in going through all these steps, but still want to use Sass on Windows, well, just skip to the final heading in this post for a reference to an app that lets you start using Sass on Windows with minimal setup.

How Do You Mark Up A Single Link or Button?

How Do You Mark Up A Single Link or Button?On many sites and apps, you’ll often have to mark up and style a button that is not part of a list of links, and that basically stands alone, apart from surrounding content.

How should a single, standalone link or button be marked up? As with many things in web development, there isn’t really a right or wrong way to do this, but here’s a summary of some of the different methods.

Loading a Different jQuery Version for IE6-8

Loading a Different jQuery Version for IE6-8If you haven’t heard yet, last week the jQuery team announced on their blog that jQuery 2.0, which is scheduled for an early 2013 release “removes support for IE 6/7/8 oddities such as borked event model, IE7 ‘attroperties’, HTML5 shims, etc.”

In this post, I’m just briefly showing everyone a simple solution for serving a different version of jQuery (or really, any script) to Internet Explorer versions 6-8.

JavaScript String Methods Reference

JavaScript String Methods ReferenceWhen writing JavaScript, I often find myself Googling for info, or using Mozilla’s reference to find the exact syntax and argument definitions for methods associated with string manipulation.

A lot of references I come across have far too much info, so this post will give examples and brief descriptions of some of the most common and useful string-related methods. I tried to put the most common ones near the top, for quick reference.

The CSS Clip Property

The CSS Clip PropertyYou’ve probably heard of CSS’s clip property. It has some unique features and syntax, and in this post I’ll outline how it’s used.

At the end of the post you’ll find a link to a demo page where some photos are used to animate the clip property, just to visually demonstrate what this property does.

Animating CSS3 Gradients

Animating CSS3 GradientsThe CSS3 Transitions spec maintains a list of properties that are animatable. This list, as far as I know, covers animatable properties for both transitions and keyframe animations.

But that’s a list of properties. And so, since CSS3 gradients are not really properties, but are actually images created by the browser, they aren’t in that list of animatable properties. But that doesn’t mean you can’t animate gradients.

Gradients, just like standard images, are subject to certain background-related properties that are animatable. These include background-size and background-position.

Some Random JavaScript Coding Tidbits

Some Random JavaScript Coding TidbitsAlthough my knowledge of HTML and CSS seems somewhat rounded and complete, I don’t feel the same way about JavaScript. I always seem to be learning something new, or else reminding myself of stuff I might have learned years ago but have forgotten.

So here are a few things I’ve recently learned or read about that might be useful to you.

Fixed Table of Contents Drop-Down Menu (jQuery Plugin)

Fixed Table of Contents Drop-Down Menu (jQuery Plugin)About a week or so ago, I stumbled across the Startups, This Is How Design Works website. It’s a one-page site that uses a fixed drop-down menu at the top of the screen that collapses/expands in a “table of contents” style.

I thought it was kinda cool, so I wrote my own script to create this functionality, and I turned it into a jQuery plugin. Use the button below to view the demo, and read on for a description.