Resize Images Using CSS

This is an older CSS trick that is worth repeating. Back in the days, resizing images was done via HTML height and width options. Here’s an example below. We will resize the image to 100 x 100 pixels.

HTML

<img src="example.jpg" width="100" height="100" alt="example" />

The problem with this approach is, first, we will lose image quality when resizing regardless of which direction we go, either up or down. The resized image is never going to be as good as the original. Second, there’s a good chance the image will NOT be proportioned. We have to be constantly be aware of image ratios when resizing images.

CSS

So, here comes CSS to the rescue. We will assign a class called “image” to our image.

<img class="image" src="example.jpg" alt="example" />

Next, we will apply CSS to our “image” class.

.image { width: 400px;height : auto; }
.image { width: auto;height : 600px; }

The result is, a well-porportioned image that is never going to be wider than 400px or taller than 600px. In addition, we maintain the standard dimension for all images using the “image” class.

A Background Image That Scales

I recently fixed an issue with my theme design. The dark wood background image that you see on this blog, was not big enough to fit most large monitors, where resolutions are higher than 1080px. Hat tip goes to Daniel Ritchie for pointing it out to me. So, I searched the web and found several possible solutions.

I found Chris Coyier’s at CSS-Tricks solution the most attractive, because it was by far the easiest one to implement. It not only adheres to CSS 3 standards, but it also works across most modern browsers. The result is a background image that fills up the entire page, scales to any size screen when needed, retains its aspect ratio, and centers the image properly.

What more can you ask for? Well, maybe something that loads a tiny bit faster than usual. So, I took the liberty to reduce the file size of my background image from 744kb to 128kb using my beloved Gimp. I use a little bit of image compression, without suffering too much in image quality. So, not only is the background image displaying properly on any size monitor, it also loads much, much faster. That’s a win-win situation.

If you like to know how I implemented a background image that scales to any screen resolution, just head on over to CSS-Tricks and check out Chris Coyier’s CSS3 solution. I hope you’ll find this article very helpful. I tested the new background with a HP w2207h monitor that rotates to landscape mode. Works great. If you find this to be otherwise, any input is appreciated.

HTML5 Basic Template

If you are going to be creating websites, you might as well be using HTML5 now. There is no point of using the older, antiquated, and sometimes verbose HTML 4 markup. A case in point, take a look at the HTML4 header markup below. It’s long, cryptic and hard to remember.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Compare that to the HTML 5 header markup below which is much, much simpler.

<!DOCTYPE html>
Let's take a look at the basic HTML5 template.
The HTML5 Basic Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
</body>
</html>

This template is perfect for creating quick websites, displaying example pages, or for testing purposes. If you want to create professional websites, then you should check out HMTL5 Boilerplate template which I highly recommend. It’s an excellent website to get you started with your HTML5 projects.

Indent Entire Paragraph Using CSS

One of the easiest ways to indent an entire paragraph in HTML is to use a class and some padding. Let me show an example. In this tutorial, I will indent a paragraph by 40px. I will use a class called “indent” and apply “padding-left” to it. I’m using inline styles in this example, but you can easily apply the same CSS styles to an external stylesheet if you want. First, a normal paragraph.

Normal Paragraph

A normal paragraph would look like this. There is no indentation. The entire paragraph is lined up with the rest of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

A Paragraph With CSS Styling

<div class=”indent” style=”padding-left:40px;”>

In this div class, I am simply applying padding-left of 40 pixels to the entire class called “indent.” This will indent the entire paragraph as you can see in the results below. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

</div>

The Result

As you can see, the entire paragraph is indented by 40px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

How To Truncate Text In CSS

Let’s say you have a tiny section on your website with a list of bullet points, but the text is too long. You would like to be able to truncate or cut off the extra characters to prevent the text from wrapping around to the next line. You can apply CSS to prevent your bullet points from wrapping around to the next line. Here’s what you will need to do. Assuming your div is a class called “bullets.”

.bullets {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

The ellipsis will add three little dots at the end telling your readers the text has been truncated. Simple enough.

Vintage Wine

It’s 2011. It’s time for a change. What are the hot colors of 2011? Vintage Wine. The deep burgundy color is back after two decades. It’s popular in fashion runways, store racks and on sidewalks. Makeup, accessories and magazine typesettings have all used the deep burgundy color.

So, I decided to use it for my blog as well. Here are the main colors on this site. The main background color is #1CC007. The active links are #4C0007. The hover links are #12244A. The text is #222222. The background color for the page is white or #FFFFFF.

There you have it, the new colors of my blog.

Dynamic CSS Buttons

I was searching for buttons the other day that I could use for a project. I wanted something flexible, something that could easily be customized for any project. The buttons have to be dynamic and they need to be generated fairly quickly.

This means no buttons that contain text images, no buttons that contain color images. The text needs to be supplied from the source (HTML) as well as the background color from CSS.

This dynamic button needs to be generated on fly, with the flexibility to use it multiple times within a page or the whole website. This sounds like a tall order to me.

Enter a tutorial by Soh Tanaka, a web designer from Los Angeles that I found while searching online. He wrote “Liquid & Color Adjustable CSS Buttons.” The tutorial is actually quite good. He shares how a button can be quickly generated using the supplied anchor text and as well any CSS background color.

A couple of examples.

I love the buttons,  but I found a couple of issues. The buttons doesn’t really work as a Submit button. You’re going to have to use Javascript to send your form if you use this example. The other issues is you can’t really resize the button, since it’s constrained to single supplied image that’s generated for every button.

These buttons are definitely useful tools for creating sites, but it does have its limitations. One more thing, I want to try if this works with HTML4′s button tag as opposed to just using the input tag.

Password and Text Boxes Are Not Of Equal Length

Why is the password field smaller than the input field in Internet Explorer 8? It’s the same in previous versions of the browser? I was recently working on a project that required authentication. I styled the login page. Everything looked wonderful. Perfect as a matter of fact, until I opened IE8. Wicked ugly. My main gripe really is, why is the password field smaller than the input fields?

I did a quick search online and found a solution.

You can style the input field to a certain width, like in this example.

input { width:12em; }

I’m using em instead px, because it’s probably more accurate.

But, styling the input field, like the one above, will make changes to every input field on the site. So, the quick and dirty way to style a login page, is to use inline CSS. In this example, we will use two input fields of text and passwords with inline styling.

<form>
<input type=’text’ name=’username’ style=’width:12em’ />
<input type=’password’ name=’password’ style=’width:12em’ />
</form>

So, there you have it. A quick and dirty solution to the uneven password and text input fields in Internet Explorer 8. If you have any other solutions, please let me know. I’ll be happy to hear about it.

Color Schemer

For web designers, choosing a color scheme for a website can be a daunting task. Choosing the right colors for a website sometimes can be the difference. One of my favorite website to get some color inspiration is Color Schemer Online.

Color Schemer Online provides a palette of colors that will complement your base color. It will lay out a color grid of 16 colors in a 4 x4 grid. The online tool can also lighten or darken your base color, a feature which I find extremely useful.

There is PC and Mac version of this tool and its called ColorSchemer Studio 2, which give you ways to find matching colors from a color wheel, or from thousands of color schemes available online. The software costs about $49, a steal in my opinion.

The software also comes with a Photo Schemer where you can drop an existing photo and create your own color scheme based on that photo image. Finally, there’s a QuickPreview which allows you to test the colors you’ve selected on predetermined layouts.

In this layout, I am using a blog layout with a left-handed sidebar. I’m using a color scheme that was previously generated from the previous color wheel.

I use the online tool primarily, but the software is a great. Definitely worth a try.

CSS Text Shadow

If you are a frequent visitor to the site, you may have noticed a couple of subtle changes to my blog the last couple of days. I’ve added text shadows on the titles and I also removed the text underline from the links. Today, this article will focus on how to add text shadows to your blog using CSS.

CSS Text Shadows give coders and web developers a tool to create text effects such as 3 dimensional effects, glowing effects and stencils. Text Shadows was originally proposed in CSS2, but really took off with CSS3.

Text Shadows is supported in most major browsers: Firefox, Safari, Chrome, Opera. The one major browser that’s missing in the list is Microsoft’s Internet Explorer. Text shadows is possible in Internet Explorer using JQuery. See link below.

Adding Text Shadows to your website, blog or page is quite easy. All it takes is adding a line of code to your existing CSS file. Consider the title above called “CSS Text Shadow” styled using <h2>. To make a text shadow, just add the following to your CSS file.

h2 { text-shadow: 2px 2px 2px #aaa; }

Text Shadows

The text shadow element contains 4 attributes. The first attribute is the x-coordinate. The second is y-coordinate. The third is the blur. The fourth is the color of the shadow. Negative values can be placed to simulate a light source that’s coming from the bottom.

h2 { text-shadow: 2px 3px 3px #aaa; }

Text Shadows

Here’s a couple of excellent articles about CSS text shadows:

CSS text shadows is a great tool for creating cool effects on your site. Just one advice. Don’t overdue it. Use it sparingly.