While reading up on the CSS3 border-image property, I couldn’t help but think that something is getting left out of CSS3: multiple borders.

One of the W3Cs primary goals is to remove a web designer’s reliance on images in page layout and design. Which will also speed up load time. However, the only way to create multiple borders on one element would be to use the border-image property. Here is an example of border-image:

CSS

	.multiple-border-example-1 {
		border: 20px solid transparent;
		-moz-border-image: url(images/multiple-border.png) 25% round;
		-webkit-border-image: url(images/multiple-borders2.png) 25% round;
		border-image: url(images/multiple-borders2.png) 25% round;
	}

Image

If none of the above CSS syntax makes sense to you (it took me a while to finally wrap my head around), I suggest you check out the links at the bottom of the page for further reading (because frankly, I’ll do a terrible job of trying to explain this). While I find this to be a workable solution, there are two issues that I have with it: 1. It requires an image and 2. I have a hard time working with percentages (its a personal problem, believe me).

Wouldn’t it be cooler if we could use the same syntax that’s used for multiple backgrounds? It could look like this:

Code:

	.multiple-background-example-1 {
		border: 10px solid #77ccff, 10px solid #33bbff, 10px solid #0077ff, ;
	}

For this to work each border would be rendered from the center out. and they would stack with no spacing between each border. I’m pretty sure this would save me time and effort (and who knows, maybe you too!). No image to produce, no messing with percentages to get the border just right, and no extra image for the browser to load.

For more on border-image:

• CSS3 Info – Border-image
• CSS Tricks – Understanding Border-image
• Border Image Demonstration Page (this one is the best I’ve come across so far).

At this point my web design career I have almost completely removed directories from my images folder. This is the result of using content management systems like Joomla, and the fact that I rarely have more than a handful of images in my images folder when I initially develop a site. I stopped because I was noticing that I was taking time to create folders like “header” and “background” to organize images, but only placing one or two images in those directories. Read the rest of this entry »

Internet Explorer 8 came out today. The office was all a buzz, most of the conversations revolved around its lack of CSS3 support and whether or not it should start in “Standards Mode”. While all of these are valid discussions, they fail to recognize that Microsoft finally did it right for once. They built a browser that supports all current standards.

I was in the CSS3 panel at SXSWi on Sunday afternoon, and there were 3 companies on the panel: Mozilla, Opera, and IE. When the IE guy came up to speak, the first thing he said was, “I am not here to talk about IE and CSS3.” He went on to explain how IE8 had passed every test out there and was fully compliant with CSS2.1. And you know what happened? People applauded. They were friggin elated. I was expecting people to boo this poor guy out of the room. His message was really that IE is in the present now, and because of that, we can all move into the future together.

I think Microsoft is tired of being the whipping boy of the internet and is ready to be open with the web developer community at large, not just those that use their products. One of the major factors in the IE’s inability to move forward was being able to support old products that Microsoft had made in 90s, and I think they finally realized the segment of society still using those products has really shrunk. Oh, and their constantly shrinking market share.

While Microsoft may be moving in the right direction, they haven’t forced everyone to upgrade yet. IE8 is only available via download direcly from the IE website. And for those of you reading this right now who can upgrade, please do so (here). Otherwise, you might be seeing this in your browser the next time you come back.

Okay, so I have finally gotten to this post. I guess I took the whole week off. I gotta be more disciplined. Anyway…

One thing that angered me about Safari 3.1 was its @font-face support. This allows developers to load fonts that may not already be on someone’s computer and use them anywhere in the site. This could be a totally awesome tool, however, I thought, “Why the hell is Safari trying to become IE?” Read the rest of this entry »

Recently I have come to the realization that I spend so much time in production that I rarely get to search for things that would be useful, big picture resources/learning for future projects. Basically, I’m bad at keeping up with where CSS and HTML are going. And since I am trying to really push myself to have better skills to contribute to not just my current position, but the world at large, I have found a bunch of great resources. Read the rest of this entry »