An increasingly fragmented marketplace means cross-platform development has ramped up in recent years.

To bridge the growing digital divide, JavaScript, CSS3, and great white hope HTML5 are utilized by developers. These languages sit behind a growing number of HTML templates, web apps, and native mobile apps.

Why HTML5?

While HTML5 is still under development – its complete release and full adoption is penciled in for 2014 – its purpose is to improve the language of the World Wide Web and support the very latest multimedia.

In a nod to the growing mobilization of technology, HTML5 has been built with low-powered devices such as smartphones and tablets in mind. In December 2011, research firm Strategy Analytics predicted sales of HTML5 compatible phones would sail past 1 billion units in 2013.

Which mobile platform does your demographic favor?

Developers struggle to know where to focus their efforts thanks to the myriad of popular mobile platforms.

And then there’s the device types: even iPhone and iPad have different experiences.
As luck would have it, the issue’s being tackled by cross-platform development tools. Here are the pick of the bunch specifically for HTML5.

PhoneGap

PhoneGap is a HTML5 platform that enables developers to build native apps with – you guessed it – HTML5, plus CSS3 and JavaScript.

PhoneGap allows developers to create a full-function mobile web app that then sits within a native wrapper. Its compatibility with native APIs means it can be submitted to the likes of the App Store and Android Market.

New service PhoneGap Build takes the grunt work out of building mobile apps for multiple platforms. The developer receives a polished build that can be submitted to their preferred app market.

MoSync

MoSync is a cross-platform mobile application development SDK. It’s open source and free to use for independent developers.

The framework supports Android, iOS, Windows Mobile, JavaME and other operating systems, producing real native applications, packaged and prepped for distribution in each native installation format.

Unify Project

The Unify Project’s goal is to improve efficiency of app development for smartphones – music to developers’ ears.

And it’s not just mobile platforms like iOS, Android and WebOS that get the Unify treatment; desktop operating systems like Windows or Mac OS are supported too.

Unify claim seamless user experience between apps built using their technology and natively programmed applications.

Or forego native apps altogether…

Mobile developers are increasingly eyeballing HTML5 as an alternative to native apps.

As HTML5 improves, and browser support becomes more robust, the disparity between running a HTML5 app dressed up in a native wrapper and accessing a HTML5 mobile web app will be minimized.

Before you tackle a HTML5 mobile app, isn’t it time you got your HTML website in order?

Thanks to www.wix.com, your new site needn’t come with a hefty price tag or lengthy development cycle. Wix offers hundreds of beautifully-designed free HTML5 website templates suitable for professional categories including eCommerce, showbiz and Facebook pages.

Wix is already an industry leader thanks to its popular Flash website builder. Come March 26, 2012, the company’s adding a free HTML editor to its services, including more than 100 customizable templates.

Related Posts:

1. HTML5 vs. Flash Games [Infographic] Now a days the debate getting popular in the online...
2. Reality of HTML5 [Infographic] Last month i shared an Infographic on HTML5 vs Flash...
3. HTML5 vs. Flash : The Community Has Spoken One of the hottest debates raging through the online design...

There is nothing quite like a grid, is there? Clean, functional and simple to use, it is a basic tool in the designer’s arsenal. That is why there are so many resources available on the web to assist you with creating, using or sharing grids.

Here is a list of 10 brilliant resources to put into your own little grid-based design box.

Boilerplates

If you feel like doing it without having to create your own CSS framework (I can already see a bunch of you nodding your heads with great enthusiasm), you can check out these boilerplates.

HTML5 Boilerplate

HTML5 is fast becoming the No. 1 used, experimented on and recommended format for just about any project. The versatility provided by the update to the old classic is a big reason for that, and there have been some amazing experiments that show what it is really capable of.

Gridless

Compatible with both HTML5 and CSS3, this boilerplate makes it easier to create websites viewable on multiple browsers, with design specifics like layout and typography as a main focus.

Traditional Frameworks

If you want to go with what is affectionately referred to as "old" frameworks – showing how quickly new technology truly is released – you can try out these dinosaurs that are still just as good as the day they were released.

960 Grid System

This is one of the original sites dedicated to existing framework and design. A great deal of new designs originated from this source. You can find a lot here to get you along.

YAML

Standing for "Yet Another Multicolumn Layout," this framework describes its products as "bulletproof and flexible." That is a promise it is able to keep, as it gives you the tools you need for simple and rapid CSS framework development. It has everything you need, so YAML is a must to check out.

Brand Spankin’ New Frames

Sometimes you want something new and cutting edge. These websites offer that, though most of them take bits here and there from the old classics to keep them relevant to the original grid we have all come to know and love.

Columnal

This grid system is a really nice one. It was created by taking a number of CSS layouts and combining their elements. Then, custom coding was thrown in the mix to provide a unique style. Each piece for the new system was taken from both 960GS and CSSGrid, based on their elastic grid design.

Skeleton

If your main concern is having a boilerplate that is mobile friendly, this might be the choice for you. The CSS/JS mixed files are made to allow for development that works at any screen size. The flexibility makes it easy to create one site that will work on mobile screens as well as standard laptop or computer screens.

G5 Framework

For front-end framework compatible with the standard CSS3 – as well as HTML5, jQuery and PHP – your best bet is G5. It is a great starter for any basic website, made specifically for fostering efficiency in web development. It has a great list of features.

Easy Percentage Grid System With HTML5

The name is a bit of a mouthful. But the layout is clean and simple, working on a six-column grid. If you are a beginner who doesn’t know that much coding, you will want to stick with this one. It has a full tutorial on how to change things like the column titles and content. It also shows you how to add or remove columns without disrupting the design.

jQuery Masonry

This is a jQuery-specific plug-in that creates a unique layout with a great image-heavy design. The whole build is based on a grid that is different from many of the standard column designs you see today. It pushes it all into a much more compact and well-organized design than the CSS floats standard.

Less Framework 4

Less Framework is extremely simple. It takes a single grid and gives you four layout options and three typography presets in one package. The idea is that you have a more basic layout, allowing for a more adaptive website without the need for future framework. Whether it is viewed on a PC, laptop, tablet or mobile device, it will fit properly.

Conclusion

Whether you are a fan of frameworks or not, you will find what you need to take advantage of simple grids for web designs on these 10 sites. They give you amazing resources, and they are only a few of what is out there.

Leave your suggestions for other great tools to put into your grid-based design resource box in the comment section below.

Related Posts:

1. The Fundamentals of Minimalist Web Design The Fundamentals of Minimalist Web Design is a brief look...
2. The Design Blog : Extending Your Design Portfolio Over the last few years the design community has been...
3. Newest Design Trends with Popular CSS3 Techniques With so many new details surrounding the CSS3 release it...

jQuery is a powerful development library for JavaScript followers. The functions themselves have been trimmed down and allow for agile development in fast-pace web pages. Some of the best features from jQuery come from Document Object manipulation.

This can include text elements, form fields, headings, images, and so much more. CSS properties can also be easily manipulated using just a few lines of jQuery. In this overview we’ll be going over some of the best features for DOM manipulation.

Much of the code is built around the newest version of jQuery which at the time of writing is 1.3.2. The library is backwards compatible for most functions so primary CSS manipulation shouldn’t cause any errors. If you have any questions check out the release documentation and page wiki.

Getters and Setters

Before jumping into code we should clear up some simple lingo. There are two main types of functionality we’ll be working with in manipulation functions. Getters are used to get any type of data and return some form of result. This can include dynamic data responses or complex algorithms.

Setters are in place to change or update the current value of a page element. DOM objects are often referenced through CSS from an ID or class name. jQuery uses the internal method .attr() to update the value of any element’s list of attributes. However it can also pull data from any element being used to just check the current value – this is both a setter and getter style method.

Among many of these methods are all 3 types. Combination functions are very useful since they provide response information and also hold the ability for document manipulation. CSS properties are some of the easiest to build upon and provide the most delicate environment for practice.

Dynamic Classes

The most popular method .addClass() is commonly seen in jQuery scripts. It can be useful to manipulate a page element and change its class on the fly. As a simple example consider a user removes a friend or deletes a message from their profile. You may then manipulate that entry in the list to change its class to “deleted” or “old”.

This gives the animated effect of applying the action right after the user clicks. This can be done with a jQuery Ajax() call and simply apply an addClass() method towards the end of the return statement.

$('p').addClass('myclass secondclass');

The function can also be used to affect many page elements at once. For example the code above targets all paragraph elements on the page and adds two different classes to them. The individual entries myclass and secondclass are separated by a space and delineated inside the addClass function.

Checking Classes

removeClass() is just the opposite and provides a self-explanatory effect. You are able to chain methods by removing a class from an element and also adding a new class onto the same object. This type of coding is very convoluted and proves to be a bit more distracting than useful.

Also in the same range is the .hasClass() method. This only requires a target parameter and will return a boolean value if the matched element(s) has a class or not. This can be extremely useful when looking to apply a new class onto elements and you’re unsure if they are already in place.

You may also have an interest in .toggleClass() which will add or remove classes based on the element’s current state. For example this could be used on a drop-down menu with an open and closed state. Check out the toggleClass documentation if you want to find out more uses.

Building Directly with CSS

If adding new classes isn’t really your style you may consider directly manipulating page objects with CSS. The .css() method is used to pull any property value from the selected object. This can be done multiple times by separating each query with a comma.

The shorthand writing passage for the CSS method also allows you to apply function code inside the parentheses. This code can parse complex maths and perform loops for data manipulation. Below is an example piece of code applying a few CSS properties to an element under the ID “myFirstElm”.

$('#myFirstElm').css( {width : '30px', height : '10px', color : '#000'} )

You may notice this is not the most elegant solution for CSS styles. It’s often much easier to write out the code in advance and save this as dormant styles in your global stylesheet. In this way you just need to switch classes to bring about the same effect as applying a multitude of properties as shown above.

Much of the manipulation done with the CSS method can also be applied with other jQuery functions. If you’d like to delve into other tutorials a bit deeper check out our list of jQuery tutorials for an exclusive set.

HTML Elements

Each HTML element has internal contents based on its placement in the tree. The Document Object Model can be viewed as a hierarchy tree which shows the root nodes and all of their children.

With the jQuery .html() method you are able to directly pull all internal HTML from a block element. This is similar to each browser’s native innterHTML property with more dynamic features. With the html() method you are able to target any page element and pull/manipulate its contents from any event. This could be a button press, mouse over event, or anything similar.

Attributes

Each HTML element commonly has a few attributes associated with it. Even HTML and body tags are now seeing attributes with useful values added into pages.

With the powerful .attr() method you can both set and get attribute values. After targeting your jQuery element it’s important to realize which functionality you’re going to be using. By targeting just a single attribute name you can check to see if this is set on the current element and what its value is.

Below is sample code for adding an alt attribute to a simple page image. This code will work to either add a new alt tag or overwrite the current value. This is what gives jQuery so much power and shows what you can truly accomplish with a small library of manipulation functions.

$('#pagePhoto').attr('alt', 'Here is my image alt text');

Along with .attr() there are many other sample methods which can pull data about an element. .height() and .width() will pull the exact measurement of an object’s height and width at the time of calling a function. So if you have an expanding box you can create a for loop to output each length/width combo as it grows.

Conclusion

jQuery is an enormous library and it will require some time to scour all the information at hand. Not every function will prove to be useful to you so as a developer it’s important to pick and choose your favorites. Figure out which type(s) of functionality you prefer the most and practice building this through many different means.

The open-source nature of the project shows how quickly plug-ins can be built and added into code repos. Document manipulation has been around for years but has just recently broken into the spotlight with its ease of implementation. Most modern CMS packages will come out-of-the-box running jQuery or a similar JS library. By studying the basic functions ahead of time it will become much easier to adapt as a jQuery dev in the coming years.

Related Posts:

1. 25 Excellent Collection Of jQuery Tutorials According to jQuery dot com, “jQuery is a fast and...
2. 45 Useful jQuery Tutorials And Techniques For Better UI There are lots of jQuery tutorials available on net, if...
3. How To Develop CSS3 Border Radius Tool CSS3 is rocking the web design and web development life....

ActionScript is a very powerful programming language used in numerous Adobe Flash and Flex applications. It provides an object-oriented class level environment with many advantages to the average developer. In this example we’ll be constructing a video wall pulling the top videos from YouTube’s Tech feed.

We will mostly be covering basic ActionScript techniques, thus it is not required to be an exceptional whiz at programming. For this tutorial I’ll be using Adobe Flash CS3 with ActionScript 3.0 as the default language.

Building our .FLA File

Each flash project you create should be saved to disk as .fla inside a root directory. I’ve created a new document 630×575 and saved as YouTube.fla.

Getting familiar with the Flash interface may take a little bit of time. Most of the work we’ll be doing is integrated in the lowermost panels. More specifically we’ll be dealing with properties and actions.

Properties will allow you to update the current document width/height and other advanced settings. Actions is where all the real fun happens and where our code is stored. Each layer as a series of keyframes which store ActionScript to manipulate transitions and effects.

You’ll notice a layers panel towards the top above the project stage. The first layer should be named “Layer1″. Change that to Actions and tick the small lock symbol off to the right side. This sets a single layer in our file dedicated to ActionScript code, which means we don’t need to go searching around for anything. Locking just ensures we don’t accidently place elements in that layer.

Designing Page Views

The next step is to create our physical layout. I’ve created a new layer titled “views” which is going to house 6 MovieClips. These will actually become placeholders for the dynamic thumbnail shot YouTube generates with each video.

To create these check insert->new symbol or simply tap F8. Here a new menu comes up asking what type of symbol you are creating. Movie Clip is perfect set along 120px width and 90px height. Once the symbol is made alter the clip’s instance name to “ytThumb” + 0-5 for each clip. So for example the first would be labeled ytThum0, the next ytThumb1 and so forth.

Now we can move back into our actions panel to start really developing. If you are having trouble with creating each movie clip don’t fret. They are not truly necessary at this point, but it does save time to create each instance beforehand.

Beginning the ActionScript Code

Click back on the first keyframe in the Actions layer. From here check the bottom panel and move from properties into actions. The panel will expand much higher and include a text box – this is where our code will go.

To start off we will define a few variables to hold namespace references. These ensure that when pulling data from Google and YouTube’s servers we can interpret the return properly. Also we include a Security.allowDomain call to let Flash know we can trust data downloaded through YouTube.

Security.allowDomain("youtube.com","http://youtube.com","www.youtube.com");
var atom:Namespace = new Namespace("http://www.w3.org/2005/Atom");
var gd:Namespace = new Namespace("http://schemas.google.com/g/2005");
var yt:Namespace = new Namespace("http://gdata.youtube.com/schemas/2007");

default xml namespace = atom; // very important!!

var vidCount:int = 6;
var dataArray:Array = new Array();

As an example above we have 3 new namespaces defined as atom, gt, and yt. These correspond with atom RSS feeds and two primary namespaces relating to the YouTube API. By the last line we are setting the default namespace for all XML code to atom.

Without these lines ActionScript will try parsing the return XML from YouTube’s API as plain XML instead of an atom feed. This results in bugs and errors flying around, so it’s much easier to clear this up first.

We are also creating two simple variables towards the very end. vidCount is used to define how many videos we will pull from each feed. dataArray is currently set to an empty array. A future function will pull this data and feed instances of videos into an array list.

var xmlUrlReq:String = "http://gdata.youtube.com/feeds/api/videos/-/Tech/";
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();

// loader event listener
xmlLoader.addEventListener(Event.COMPLETE, LoadXml);
xmlLoader.load(new URLRequest(xmlUrlReq));

We now have the defining principles for connecting to an XML page. The XML url we are using is defined outright which contains the standard API call. It is malleable in that you can change Tech to any variable returning video results.

For example http://gdata.youtube.com/feeds/api/videos/-/Gaming/ is a possibility for all gaming-related videos. Our xmlLoader will store the functions needed to load this API URL and xmlData is used to store the returning XML code.

After variables are set we need to call our event listener which checks to see when the API has finished loading. At this point we call a new function LoadXml() which is defined next.

Event Handler Calls

Once the loader eventListener has cleared our LoadXml function is called. This will parse all of the data we need out of the YouTube API response and store simple variables for access later. Below is the entire function code.

function LoadXml(e:Event):void {
	xmlData = XML(e.target.data);
	var media:Namespace = xmlData.namespace("media");
	var gd1:Namespace = xmlData.namespace("gd");
	var elms:XMLList = xmlData.entry;

	for(var i:int = 0; i < vidCount; i++) {
		dataArray.push({});
		dataArray[i]["title"] = elms[i].title;
		dataArray[i]["coreThumb"] = elms[i].media::group.media::thumbnail[0].@url;
		dataArray[i]["vidURL"] = elms[i].media::group.media::player.@url;
		dataArray[i]["duration"] = elms[i].media::group.yt::duration.@seconds;
		dataArray[i]["viewCount"] = elms[i].yt::statistics.@viewCount;
		dataArray[i]["commentCount"] = elms[i].gd::comments.gd::feedLink.@countHint;
		dataArray[i]["favoriteCount"] = elms[i].yt::statistics.@favoriteCount;

		loadThumbs(dataArray[i]["coreThumb"], i);
		loadText(i, dataArray);
	}
}

You can see an initial for loop which pulls out elements from each XML file and stores them into an array. This is referenced with each variable call underneath dataArray.push({}).

Setting dataArray[i] would create 6 individual arrays valued dataArray[0-5]. Within each of these we have sub-arrays containing video information.

This includes the core thumbnail, video URL, duration, number of comments, etc. This function is used to pump through all 6 videos inside a loop and extract bits of data from the response. With this data we then create a new array to house all the values we need and pass these into two more functions to display our finished product.

loadThumbs is the first call which requires two parameters. The first param URL is looking for the external jpg thumbnail file while the second holds the index for which video ID we’re on (valued 0-5).

function loadThumbs(url:String, index:int):void {
	var imgURLRequest:URLRequest = new URLRequest(url);
	var myImgLoader:Loader = new Loader();
	myImgLoader.load(imgURLRequest);

	myImgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);

	function thumbLoaded(e:Event):void {
		var myBitmapData:BitmapData = new BitmapData(myImgLoader.width, myImgLoader.height);
		myBitmapData.draw(myImgLoader);

		var myBitmap:Bitmap = new Bitmap();
		myBitmap.bitmapData = myBitmapData;
		switch(index) {
			case 0:
				ytThumb0.addChild(myBitmap);
				break;
			case 1:
				ytThumb1.addChild(myBitmap);
				break;
			case 2:
				ytThumb2.addChild(myBitmap);
				break;
			case 3:
				ytThumb3.addChild(myBitmap);
				break;
			case 4:
				ytThumb4.addChild(myBitmap);
				break;
			case 5:
				ytThumb5.addChild(myBitmap);
				break;
		}
	}
}

We are pulling in another URL Loader to download each video thumbnail. From here we are actually creating a brand new bitmap file inside of Flash to re-create each image.

The benefit here is we can cache each image and store the contents for another query. This would be useful if you were offering access to multiple YouTube feeds and didn’t want to call a new request every time a new visitor came to the page.

We have another event listener which calls thumbLoaded once the image is finished. Then we create a new bitmap image variable named myBitmap and store the thumbnail data inside. Afterwards there’s a small switch clause breaking down 0-5 for each video ID. The code inside simply targets each Movie Clip and appends addChild() holding each thumbnail image.

Loading Video Text Data

The last step required is pulling video data from our array and adding this onto our stage. For this we’ve written a function loadText which takes the current video ID and also the matching data array.

function loadText(id:int, vidDataArray:Array):void {
	var myFormat:TextFormat = new TextFormat();
	myFormat.size = 13;
	myFormat.font = "Arial";
	myFormat.color = 0x0066FF;
	myFormat.underline = true;	

	var myDescFormat:TextFormat = new TextFormat();
	myDescFormat.size = 11;
	myDescFormat.bold = true;

	var mytext = this['ytTitle'+id];
	var mydesc = this['ytDesc'+id];

	var vidTitle:String = vidDataArray[id]["title"];
	var vidUrl:String = vidDataArray[id]["vidURL"];
	var vidDur:int = vidDataArray[id]["duration"]; // duration in seconds
	var vidDurMin:String = Math.floor(vidDur/60) + ":" + vidDur%60; //duration in minutes
	var vidViews:String = splitNumber(vidDataArray[id]["viewCount"]);
	var vidComms:int = vidDataArray[id]["commentCount"];
	var vidFav:int = vidDataArray[id]["favoriteCount"];

	mytext.wordWrap = true;
	mytext.defaultTextFormat = myFormat;

	mydesc.defaultTextFormat = myDescFormat;
	mydesc.textColor = 0x333333;
	mydesc.text = "Time: " + vidDurMin + "\r";
	mydesc.text += "Views: " + vidViews + "\r";
	mydesc.text += "Comments: " + vidComms + "\r";
	mydesc.text += "Favorites: " + vidFav + "\r";

	var htmlstring:String = '<a href="' + vidUrl + '" target="_blank">' + vidTitle + '</a>';
	mytext.htmlText = htmlstring;

}

The beginning lines use a variable myFormat to create a new text formatting. This is a dynamic way to create text input data and import the settings into a project without physically adding any onto the stage. There is no real benefit of this way other than saving file space. However it is good practice to introduce yourself to both methods and choose whichever works best!

We are creating new variables to hold the video data. More specifically we will be accessing the video’s title, URL, duration (and convert this from seconds to minutes), total views, total comments, and total favorites.

Using myText as a new text area we can append these elements with htmlText. From this each video ID will loop through the XML event handler and add all the images and text onto stage.

With this should complete our code! You can test your movie from control->test movie or ctrl+enter on Windows. If you’d like to reference my project code you can download the archive here. Included are both the .fla file and the .swf finished movie product.

This has been an introduction into developing over YouTube’s API. The project was created for the purpose of writing in many different structures and testing different programming styles. ActionScript is very robust and provides an excellent platform for API data manipulation.

Related Posts:

1. uCoz Offers Free Website Building And Unlimited Web Hosting Developing and maintaining a website for a new business or...
2. The Most Useful Flash Tutorial Resources Flash is the first option to consider, when it comes...
3. 35+ Flash Game Development Tutorials & FLA Files I always wanted to learn game development in Flash but...

CSS3 is revolutionizing Web by introducing a number of totally amazing elements and attributes that push modern web development a little bit forward. Many features are already supported to some extent in latest versions of the modern web browsers such as Chrome, Firefox, Safari, and Opera.

In this article we will talk about CSS3 colour techniques such as RGB / RGBA and HSL / HSLA color models, opacity, linear and radial gradients, box and text shadows as well as show you some examples of excellent implementation of the CSS3 colour techniques in practice. You will get some hints as to the new markup, understand how to incorporate new CSS3 elements, embrace the new creative freedoms of CSS3 and start using powerful and absolutely awesome CSS3 colour techniques today!

You may also be interested in:

Newest Design Trends with Popular CSS3 Techniques
How To Develop CSS3 Border Radius Tool
7 Useful CSS3 Code Generators
Best Examples of CSS3 Navigations and Menu Tutorials

Colors in CSS3

Resources: SlideShare Presentation: Colors in CSS3 by Lea Verou

W3C CSS3 Color Specification

W3C CSS3 Color Specification (working draft, 21 July 2008) describes color values and properties for foreground color and group opacity in CSS3 color module.

W3C: CSS3 Color Modul

CSS3 Color Names

CSS3 supports 147 different colors by name (the 17 standard colors plus 130 more). This lists them all, along with their RGB and hexadecimal values.

CodeNique: CSS3 Color Names

Color Models, Opacity

RGB & RGBA

The RGB declaration sets color/colour using Red (R), Green (G) and Blue (B) color model. Alpha (A) allows us to specify a level of opacity for a color. An element with opacity/alpha value of 1.0 is fully visible (opaque) while an element with opacity value 0.0 is completely invisible.

div.L1 { background:rgb(60, 80, 100); height:20px; }
div.L2 { background:rgb(60, 100, 100); height:20px; }
div.L3 { background:rgb(60, 120, 100); height:20px; }
<br />
div.L4 { background:rgb(25, 50, 100); height:20px; }
div.L5 { background:rgb(25, 50, 150); height:20px; }
div.L6 { background:rgb(25, 50, 200); height:20px; }

div.L1 { background:rgba(153, 134, 117, 0.2); height:20px; }
div.L2 { background:rgba(153, 134, 117, 0.4); height:20px; }
div.L3 { background:rgba(153, 134, 117, 0.6); height:20px; }
div.L4 { background:rgba(153, 134, 117, 0.8); height:20px; }
div.L5 { background:rgba(153, 134, 117, 1.0); height:20px; }

• Zen Elements: CSS3 RGB & RGBA
• CSS3 Info: RGBA Colors
• RGBA – Color with Transparency

HSL & HSLA

The HSL declaration sets color/colour using Hue (H), Saturation (S) and Lightness (L) color model. Alpha (A) allows us to specify a level of opacity for a color. An element with opacity/alpha value of 1.0 is fully visible (opaque) while an element with opacity value 0.0 is completely invisible.

Hue is a degree on the color wheel: 0 & 360 – red, around 120 – green, 240 – blue.
Saturation is a percentage: 0% – grayscale, 100% – full color.
Lightness is a percentage: 0% – dark, 50% – the average, 100% – light.

div.L1 { background:hsl(320, 100%, 25%); height:20px; }
div.L2 { background:hsl(320, 100%, 50%); height:20px; }
div.L3 { background:hsl(320, 100%, 75%); height:20px; }
<br />
div.L4 { background:hsl(202, 100%, 50%); height:20px; }
div.L5 { background:hsl(202, 50%, 50%); height:20px; }
div.L6 { background:hsl(202, 25%, 50%); height:20px; }

div.L1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
div.L2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
div.L3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
div.L4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
div.L5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }

• Zen Elements: CSS3 HSL & HSLA
• CSS3 Info: HSL Colors
• CSS3 Info: HSLA Colors
• HSLA – Color with Transparency

Opacity

CSS3 opacity allows us to control how see-through an element is. The opacity declaration sets the value to how opaque an elements (layer, text, image, etc.) is. An element with opacity value 1.0 is fully opaque (visible) while an element with opacity value 0.0 is completely invisible. Any value in-between determine how opaque the element is.

div.L1 { background:#036; opacity:0.2; height:20px; }
div.L2 { background:#036; opacity:0.4; height:20px; }
div.L3 { background:#036; opacity:0.6; height:20px; }
div.L4 { background:#036; opacity:0.8; height:20px; }
div.L5 { background:#036; opacity:1.0; height:20px; }

• Zen Elements: CSS Opacity
• CSS3 Info: Opacity Preview
• About.com Web Design / HTML: CSS3 Opacity
• Exforsys Tutorials: CSS3 Opacity
• Not As Clear As It Seems: CSS3 Opacity and RGBA

Gradients

There are a whole variety of gradient options available with CSS3. Linear and radial gradients are becoming irreplaceable! They go a long way towards simplifying layouts and allow us to create visually appealing design with saving a huge amount of time and efforts.

To create CSS3 gradient, use background:-moz-linear-gradient(pos, #AAA B, #XXX Y);
pos = the position of the first color, giving direction to the gradient
#AAA = primary color
B = where the fade begins (%)
#XXX = secondary color
Y = where the fade begins (%)

Linear Gradient

.my_CSS3_class {
  height: 100px;
  background: -moz-linear-gradient(top, #35425d 0%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom,
                     from(#35425d), to(#fff));
}

.my_CSS3_class {
  height: 100px;
  background: -moz-linear-gradient(left, #35425d 25%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom,
                  from(#35425d), to(#fff));
}

Radial Gradient

.my_CSS3_class {
  height: 250px;
  background: -moz-radial-gradient(50% 50%, farthest-side, #487a77, #fff);
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350,
                  from(#487a77), to(#fff));
}

• Zen Elements: CSS3 Gradients
• CSS Tricks: Speed Up with CSS3 Gradients
• Quick Tip: Understanding CSS3 Gradients
• CSS3 Gradient Generator
• Westciv: Linear Gradients
• Westciv: Radial Gradients

Shadows

Box Shadow

Shadows can be applied in CSS3 to borders, images, and text as well.

To create CSS3 box shadow, use box-shadow: Apx Bpx Cpx #XXX;
Apx = x-axis
Bpx = y-axis
Cpx = cast length / feathering
#XXX = colour as usual

#my_CSS3_id {
  border: 5px solid #c4c8cc;
  -moz-box-shadow: 5px 5px 7px #888;
  -moz-border-radius-bottomright: 15px;
  -webkit-box-shadow: 5px 5px 7px #888;
  -webkit-border-bottom-right-radius: 15px;
}

• Zen Elements: CSS3 Box Shadows
• Westciv: Box Shadow

Text Shadow

Similar to the box shadow effect, CSS3 shadow technique can be applied to text.

To create CSS3 text shadow, use text-shadow: Apx Bpx Cpx #XXX;
Apx = x-axis
Bpx = y-axis
Cpx = cast length / feathering
#XXX = colour as usual

.my_CSS3_class {
  text-shadow: 2px 2px 7px #111;
  font-size: 3.2em;
  color: #f5f5f5;
}

• Zen Elements: CSS3 Text Shadow
• Westciv: Text Shadow

Excellent implementations of CSS3 Color Techniques

CSS3 Gradient Buttons

Gradient buttons created with just CSS (no image or Javascript) are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values.

“CSS3 Gradient Buttons” Tutorial + Demo

Super Awesome Buttons with CSS3 and RGBA

A tutorial for creating really cool buttons using the RGBA feature of CSS3.

“Super Awesome Buttons with CSS3 and RGBA” Tutorial + Demo

Browser Support

Detailed information about CSS3 color support in most of the modern web browsers (Chrome, Firefox, Opera, Safari).

Web Designer’s Browser Support Checklist

FinMeByIP: Web Designer’s Browser Support Checklist

Web Browser CSS3 Support

Web Devout: Web Browser CSS3 Support

Related Posts:

1. 7 Useful CSS3 Code Generators To write CSS manually is not tough, if you know...
2. 20+ Helpful Color Tools For Designers Tools are always very handy for designers. To get their...
3. 20+ High Quality Color Spectrum and Rainbow Wallpapers You can’t imagine life without colors. Different colors give you...

To write CSS manually is not tough, if you know the properties you can easily write CSS. But what if you are too lazy to write your own code then there are lots of CSS code generators available on net, as in CSS3 lots of new porperties introduced which are very helpful, we focused mainly on CSS3 code generators.

Below we have listed 7 useful CSS3 code generators and you may also be interested in:

Newest Design Trends with Popular CSS3 Techniques
How To Develop CSS3 Border Radius Tool
Everything You Need to Know about CSS3 Color Techniques
Best Examples of CSS3 Navigations and Menu Tutorials

1. CSS3 Generator

Really helpful tool to generate CSS3 of border radius, box shadow, text shadow, RGBA, @font-face, multiple columns, box resize, box sizing and outline.

2. CSS3 Gradient Generator

The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS.

3. CSS3 Sandbox

Helps to generate Linear Gradients, Radial Gradients, Text Shadows, Box Shadows, Transforms and Text Stroke.

4. CSS Border Radius

CSS border radius generator for lazy people.

5. Font-Face Kit Generator

Nice CSS3 @font-face generator from Font Squirrel.

6. Border Image Generator

For those who have not been exposed to this property, it allows a single image to be used to style the borders and background of a particular element.

7. Cross Browser CSS3 Rule Generator

CSS3 Please is simple and effective cross-browser CSS3 rules generator.

Related Posts:

1. 19 Popular CSS Tools For Web Developers and Designers Even if you know CSS very well some tasks take...
2. 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer When a roundup of tutorials is done, they usual focus...
3. Most Useful Ajax Tools And Tutorials According to wikipedia, “Ajax, sometimes written as AJAX (shorthand for...

When I was a trainer for a corporate restaurant chain, one area we would always focus on during the beginning of our training classes was the basic restaurant terminology. The reason being, that after working in an arena for a while we tend to take the terminology that goes along with the task for granted as just widely accepted common knowledge. We think everyone knows what we mean when we talk about div tags, design briefs, and splash pages because in the circles we tend to populate, most do. But when you are just getting started, it can be easy to get a bit lost in the lingo, and beyond that, not being aware of the non-commonality of our terminology can impact our client relationships.

Without this awareness of how much of our speech is ingrained in our industry, we forget when communicating with those outside said industry that they may not be following much of what we are saying. And though you do want your clients to know that you know just what it is you are talking about, you also want them to know just what it is that you are talking about. So be sure that you are familiar with which terms tend to only make sense to those in your field, to keep your client conversations on track and from veering into somewhat job-specific, proprietary directions.

General Design Terms
Typography Design Terms
Color Design Terms
Composition Design Terms
General Developing Terms
Developer Languages
Developer Content Terms
CSS Terms
Typography Developer Terms

Web Design Dictionary

We will begin in the glossary for web designers and I have broken it down into a few different categories to make it easier to swallow, if you will.

General Design Terms

Pixel – In digital imaging, a pixel (or picture element) is a single point in a raster image. The pixel is the smallest addressable screen element, it is the smallest unit of picture which can be controlled.

Resolution – describes the detail an image holds. The term applies to digital images, film images, and other types of images. Higher resolution means more image detail.

Wireframe -is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface.

Typography Design Terms

Baseline – is the line upon which most letters “sit” and below which descenders extend.

Ascender – is the portion of a minuscule letter in a Latin-derived alphabet that extends above the mean line of a font. That is, the part of a lower-case letter that is taller than the font’s x-height.

Descender – is the portion of a letter in a Latin alphabet that extends below the baseline of a font. In most fonts, descenders are reserved for lowercase characters such as g, p, and y. Some fonts, however, also use descenders for some numerals.

Body Height – refers to the distance between the top of the tallest letterform to the bottom of the lowest one.

x-height – or corpus size refers to the distance between the baseline and the mean line in a typeface. Typically, this is the height of the letter x in the font…

Cap height – refers to the height of a capital letter above the baseline for a particular typeface. It specifically refers to the height of capital letters that are flat…

Overshoot – it is the degree to which capital letters go below the baseline or above the cap height, or to which a lowercase letter goes below the baseline or above the x-height.

Glyph – is an element of writing. It is a slightly vague term, but a more precise definition might be an individual mark on paper or another written medium that contributes to the meaning of what is written there. A grapheme is made up of one or more glyphs.

Character – is a unit of information that roughly corresponds to a grapheme, grapheme-like unit, or symbol, such as in an alphabet or syllabary in the written form of a natural language, such as letters, numerical digits, and common punctuation marks.

Font – (also fount) is traditionally defined as a complete character set of a single size and style of a particular typeface. For example, the set of all characters for 9-point Bulmer italic is a font, and the 10-point size would be a separate font, as would the 9-point upright.

Typeface – is a set of one or more fonts, in one or more sizes, designed with stylistic unity, each comprising a coordinated set of glyphs. A typeface usually comprises an alphabet of letters, numerals, and punctuation marks; it may also include ideograms and symbols, or consist entirely of them.

Italic – is a cursive typeface based on a stylized form of calligraphic handwriting. Due to the influence from calligraphy, such typefaces often slant slightly to the right.

Oblique – is a form of type that slants slightly to the right, used in the same manner as italic type. Unlike italic type, however, it does not use different glyph shapes; it uses the same glyphs as roman type, except distorted.

Kerning – is the process of adjusting white spacing in a proportional font. In a well-kerned font, the two-dimensional blank spaces between each pair of letters all have similar area.

Kern – is a part of a type letter that overhangs the edge of the type block.

Leading – refers to the amount of added vertical spacing between lines of type. In consumer-oriented word processing software, this concept is usually referred to as line spacing.

Ligature – occurs where two or more graphemes are joined as a single glyph. Ligatures usually replace consecutive characters sharing common components and are part of a more general class of glyphs called contextual forms…

Serif – is a typeface that contain serifs, or semi-structural details on the ends of some of the strokes that make up letters and symbols.

Sans-Serif – is a typeface that does not have the small features called “serifs” at the end of strokes.

Script – typefaces that are based upon the varied and often fluid stroke created by handwriting.

Monospaced Font – is a font whose letters each occupy the same amount of space. This contrasts to variable-width fonts, where the letters differ in size to one another.

Subscript & Superscript – is a number, figure, symbol, or indicator that appears smaller than the normal line of type and is set slightly below or above it – subscripts appear at or below the baseline, while superscripts are above.

Alignment – is the setting of text flow or image placement relative to a page, column (measure), table cell or tab. The type alignment setting is sometimes referred to as text alignment, text justification or type justification.

• Flush Left – the text is aligned along the left margin or gutter, also known as ragged right.
• Flush Right – the text is aligned along the right margin or gutter, also known as ragged left.
• Centered – text is aligned to neither the left nor right margin; there is an even gap at the end of each line
• Justified – ext is aligned along the left margin, and letter- and word-spacing is adjusted so that the text falls flush with both margins, also known as full justification.

em – is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font.

em-dash – often demarcates a parenthetical thought or some similar interpolation.

en – is a typographic unit, half of the width of an em. By definition, it is equivalent to half of the height of the font.

en-dash – is usually half the width of an em dash and is commonly used to indicate a closed range (a range with clearly defined and non-infinite upper and lower boundaries) of values.

Color Design Terms

CMYK – is a subtractive color model, used in color printing, and is also used to describe the printing process itself. CMYK refers to the four inks used in some color printing: cyan, magenta, yellow, and key black.

RGB – additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.

Spectrum – is the portion of the electromagnetic spectrum that is visible to (can be detected by) the human eye.

Hue – is one of the main properties of a color, defined technically (in the CIECAM02 model), as “the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, and yellow,”.

Lightness & Tone – a property of a color, or a dimension of a color space, that is defined in a way to reflect the subjective brightness perception of a color for humans along a lightness–darkness axis. A color’s lightness also corresponds to its amplitude.

Tint & Shade – the mixture of a color with white, which increases lightness, and a shade is the mixture of a color with black, which reduces lightness. Mixing with any neutral color, including black and white, reduces chroma or colorfulness, while the hue remains unchanged.

Composition Design Terms

Composition – the placement or arrangement of visual elements or ingredients in a work of art, as distinct from the subject of a work. It can also be thought of as the organization of the elements of art according to the principles of art.

• Line – the visual path that enables the eye to move within the piece
• Shape – areas defined by edges within the piece, whether geometric or organic
• Color – hues with their various values and intensities
• Texture – surface qualities which translate into tactile illusions
• Form – 3-D length, width, or depth
• Value – Shading used to emphasize form
• Space – the space taken up by (positive) or in between (negative) objects

Perspective – an approximate representation, on a flat surface (such as paper), of an image as it is seen by the eye. The two most characteristic features of perspective are that objects are drawn are smaller as their distance from the observer increases and foreshortened: the size of an object’s dimensions along the line of sight are relatively shorter than dimensions across the line of sight (see later).

Contrast – the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background.

Symmetry – an imprecise sense of harmonious or aesthetically pleasing proportionality and balance such that it reflects beauty or perfection.

Whitespace – often referred to as negative space, it is that portion of a page left unmarked: the space between graphics, margins, gutters, space between columns, space between lines of type or figures and objects drawn or depicted. The term arises from graphic design practice, where printing processes generally use white paper.

Web Developer Dictionary

Now we come to the Developer’s section of this massive web term glossary. Below are a plethora of definitions that should be a part of your vocabulary if you develop for the web.

General Developing Terms

CMS – A content management system (CMS) is a collection of procedures used to manage work flow in a collaborative environment. In a CMS, data can be defined as almost anything – documents, movies, pictures, phone numbers, scientific data, etc. CMSs are frequently used for storing, controlling, revising, semantically enriching, and publishing documentation.

Client Side – refers to operations that are performed by the client in a client-server relationship in a computer network. Typically, a client is a computer application, such as a web browser, that runs on a user’s local computer or workstation and connects to a server as necessary.

Server Side – refers to operations that are performed by the server in a client-server relationship in computer networking. Typically, a server is a software program, such as a web server, that runs on a remote server, reachable from a user’s local computer or workstation.

Frontend/Backend – generalized terms that refer to the initial and the end stages of a process. The front-end is responsible for collecting input in various forms from the user and processing it to conform to a specification the back-end can use. The front-end is a kind of interface between the user and the back-end.

DNS – The Domain Name System (DNS) is a hierarchical naming system for computers, services, or any resource connected to the Internet or a private network. It associates various information with domain names assigned to each of the participants. Most importantly, it translates domain names meaningful to humans into the numerical (binary) identifiers associated with networking equipment for the purpose of locating and addressing these devices worldwide.

FTP – File Transfer Protocol (FTP) is a standard network protocol used to exchange and manipulate files over a TCP/IP-based network, such as the Internet. FTP is built on a client-server architecture and utilizes separate control and data connections between the client and server applications. FTP is used with user-based password authentication or with anonymous user access.

Sitemap – a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, typically organized in hierarchical fashion. This helps visitors and search engine bots find pages on the site.

UI – the system by which people (users) interact with a machine. The user interface includes hardware (physical) and software (logical) components. User interfaces exist for various systems, and provide a means of input, allowing the users to manipulate a system, and/or output, allowing the system to indicate the effects of the users’ manipulation.

Markup Language – a system for annotating a text in a way which is syntactically distinguishable from that text. Examples include revision instructions by editors, traditionally written with a blue pencil on authors’ manuscripts, typesetting instructions such those found in troff and LaTeX, and structural markers such as XML tags.

MySQL – a relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases. The MySQL development project has made its source code available under the terms of the GNU General Public License, as well as under a variety of proprietary agreements.

PageRank – a link analysis algorithm, named after Larry Page, used by the Google Internet search engine that assigns a numerical weighting to each element of a hyperlinked set of documents, such as the World Wide Web, with the purpose of “measuring” its relative importance within the set.

RSS – RSS (most commonly expanded as “Really Simple Syndication”) is a family of web feed formats used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format. An RSS document (usually called a “feed”) includes full or summarized text, plus metadata such as publishing dates and authorship.

Root Directory – the first or top-most directory in a hierarchy. It can be likened to the root of a tree – the starting point where all branches originate.

SEO – Search engine optimization (SEO) is the process of improving the volume or quality of traffic to a web site from search engines via “natural” or un-paid (“organic” or “algorithmic”) search results as opposed to search engine marketing (SEM) which deals with paid inclusion. Typically, the earlier (or higher) a site appears in the search results list, the more visitors it will receive from the search engine. SEO may target different kinds of search, including image search, local search, video search and industry-specific vertical search engines. This gives a web site web presence.

Web Standards – a general term for the formal standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.

Web 2.0 – commonly associated with web applications that facilitate interactive information sharing, interoperability, user-centered design, and collaboration on the World Wide Web. Examples of Web 2.0 include web-based communities, hosted services, web applications, social-networking sites, video-sharing sites, wikis, blogs, mashups, and folksonomies. A Web 2.0 site allows its users to interact with other users or to change website content, in contrast to non-interactive websites where users are limited to the passive viewing of information that is provided to them.

Database – a collection of data for one or more multiple uses. One way of classifying databases involves the type of content, for example: bibliographic, full-text, numeric, image. Other classification methods start from examining database models or database architectures: see below. Software organizes the data in a database according to a database model. As of 2010[update] the relational model occurs most commonly. Other models such as the hierarchical model and the network model use a more explicit representation of relationships.

Developer Languages

CSS – Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.

HTML – HyperText Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items. It allows images and objects to be embedded and can be used to create interactive forms.

XML – XML (Extensible Markup Language) is a set of rules for encoding documents electronically. It is defined in the XML 1.0 Specification produced by the W3C and several other related specifications; all are fee-free open standards.[3]

XML’s design goals emphasize simplicity, generality, and usability over the Internet. It is a textual data format, with strong support via Unicode for the languages of the world. Although XML’s design focuses on documents, it is widely used for the representation of arbitrary data structures, for example in web services.

XHTML – XHTML (Extensible Hypertext Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written. While HTML (prior to HTML5) was defined as an application of Standard Generalized Markup Language (SGML), a very flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML. Because XHTML documents need to be well-formed, they can be parsed using standard XML parsers—unlike HTML, which requires a lenient HTML-specific parser.

PHP – PHP: Hypertext Preprocessor is a widely used, general-purpose scripting language that was originally designed for web development to produce dynamic web pages. For this purpose, PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page document.

JavaScript – an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser, allowing the development of enhanced user interfaces and dynamic websites.

ASP.NET – a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.

Ajax – (shorthand for asynchronous JavaScript and XML[1]) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.

jQuery – a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. Providing this option, developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets.

Developer Content Terms

Doctype – A Document Type Declaration is an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD) (for example, the formal definition of a particular version of HTML). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

Favicon – short for favorites icon is a 16×16 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks.

Form – allows a user to enter data that is sent to a server for processing. Webforms resemble paper forms because internet users fill out the forms using checkboxes, radio buttons, or text fields. For example, webforms can be used to enter shipping or credit card data to order a product or can be used to retrieve data (e.g., searching on a search engine).

Hyperlink – a reference to a document that the reader can directly follow, or that is followed automatically. The reference points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. Such text is usually viewed with a computer. A software system for viewing and creating hypertext is a hypertext system. To hyperlink (or simply to link) is to create a hyperlink. A user following hyperlinks is said to navigate or browse the hypertext.

robots.txt – The Robot Exclusion Standard, also known as the Robots Exclusion Protocol or robots.txt protocol, is a convention to prevent cooperating web spiders and other web robots from accessing all or part of a website which is otherwise publicly viewable. Robots are often used by search engines to categorize and archive web sites, or by webmasters to proofread source code. The standard is unrelated to, but can be used in conjunction with, Sitemaps, a robot inclusion standard for websites.

.htaccess – the default name of a directory-level configuration file that allows for decentralized management of web server configuration. The .htaccess file is placed inside the web tree, and is able to override a subset of the server’s global configuration; the extent of this subset is defined by the web server administrator.[1] The original purpose of .htaccess was to allow per-directory access control (e.g. requiring a password to access the content), hence the name.

Flash – a multimedia platform that is popular for adding animation and interactivity to web pages. Originally acquired by Macromedia, Flash was introduced in 1996, and is currently developed and distributed by Adobe Systems. Flash is commonly used to create animation, advertisements, and various web page Flash components, to integrate video into web pages, and more recently, to develop rich Internet applications. Flash can manipulate vector and raster graphics, and supports bidirectional streaming of audio and video.

CSS Terms

Span & Div – elements used where parts of a document cannot be semantically described by other HTML elements. Most HTML elements carry semantic meaning – i.e. the element describes, and can be made to function according to, the type of data contained within. For example, a p element should contain a paragraph of text, while an h1 element should contain the highest-level header of the page; user agents should distinguish them accordingly. However, as span and div have no innate semantic meaning besides the logical grouping of the content, they can be used to specify non-standard presentation or behaviour without superfluous semantic meaning.

ID & Class – The id selector is used to specify a style for a single, unique element. The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

Float – Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. If an image is floated to the right, a following text flows around it, to the left.

Box Model – All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements.

Margin – The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

padding – The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

border – The CSS border properties allow you to specify the style and color of an element’s border.

Positioning – The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element’s content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

Overflow – The overflow property specifies what happens if content overflows an element’s box. (visible, hidden, scroll, auto)

Z-Index – The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Typography Developer Terms

Text

• Letter-Spacing – increase or decrease the space between characters
• Line-Height – sets the distance between lines
• Text-Align – aligns the text in an element
• Text-Decoration – adds decoration to text (underline, line-through, overline)
• Text-Indent – Indents the first line of text in an element
• Text-Transform – controls the letters in an element (capitalize, uppercase, lowercase)
• Word-Spacing – increase or decrease the space between words

Font

• Font-Family – specifies the font family for the text
• font-size – sepcifies the size of the text
• font-style – specifies the style for the text (normal, italic, oblique)
• font-varient – specifies whether a text will be displayed in small caps
• font-weight – specifies the weight of a font (light, bold)

Font Stack – The font-family property specifies the font for an element. The font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font. Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Blockquote – used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form.

Related Posts:

1. A Guide To Typography On The Web The web is alive and growing more active with each...