Skip to content

Keeping up with Modern Languages

July 9, 2013

Don’t worry everyone, this isn’t a post talking about languages spoken in France or Spain, this is about internet language; more specifically HTML5 and CSS3. HTML is short for Hypertext Markup Language, and is the language that most websites are written in. Obviously there are other languages too (PHP, ASP, etc.) but HTML5 along with CSS3 (Cascading Style Sheets) are the newest releases of the internet languages. Not much has changed in either, but there are a few new and interesting things that have been introduced that can really make a website jump off the screen.

One of the first new Properties of CSS3 that I have used that I absolutely love is the Border-Image property. The way that it was done before to get that cool looking border was to create an image the size of the area you want it around and make a background image. For the sake of example, let’ use the main content area of the webpage; as it is usually the largest area on a website. One way to create the border was to first determine how large this area was going to be, then create your image and hope that you made it large enough to fit all of the content and large enough to fit all of the future content barring creating a whole new image to compensate. Another way to do this was to create a smaller image and have it repeat itself all the way down the content area, this alleviates the content size change problem, but it creates a new one when the content only need x+1/2 of the image, making it cut off in an awkward position on the bottom (usually where it happens when using this method). Both of these methods work well, but the Border-Image Property has made things much easier, at least I think it does. The way it works:  first you create a small square image, you give the property the distance to be used from the left, right, top, and bottom. Then you need to tell the property whether to stretch, or repeat the image for the border. If done right you have a border around your content that looks great and can change dynamically. It takes some (or rather a lot) of trial and error to get it just right, but it is a wonderful tool to help your border design consistent without a ton of changes being made if the size of the content changes.

Another great new CSS3 property is the drop-shadow property. Just as you would imagine it create a drop shadow around the content box. This is another property that allows designers to take the drop shadow off of the image and allow it be rendered in the browser as part of the CSS, making the page run faster and without as many images in your library. It also looks better than any drop shadow I have ever created in Photoshop.

One of the biggest notable changes in HTML5 (since pretty much everything here has been all about CSS3) is the added tags to include video and audio. The new tags are used just as you would an image tag, include the source, title, alt text and whatever else you have for your images. This is great because now you can optimize those videos and audio clips you want include on your website with additional keywords for your SEO. I have not had the chance to implement this into any of my new designs (linking to YouTube.com still works great) but it will help me in some of my future ventures.

I obviously can’t go over everything that is new in CSS3 and HTML5, but this is just a few of my newest favorites that I have found.

If you have any questions, comments, or have something you want us to talk about, Let us know. Some of the best comments and Questions will be posted on the News page at www.upstatedesignstudio.com and answered!

Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: