Top CSS3 Benefits

CSS3 came out a seemingly long time ago, but still many people don’t use it or they are not as comfortable with using it. This article will show you the top benefits of CSS3 and  maybe interest you into using CSS3 in your next project.

1. Borders: Being able to create rounded corners on a box is a really cool feature on CSS3. There is now a simple way to create rounded corners on boxes without stressing out. Before you might have spent countless amounts of time arranging everything into tables and then adding in images and whatnot to create a box with rounded edges, but now you can do all of that with only a few lines of CSS, making this a great time-saver.
2. Text Effects: Another great time-saver in CSS3 is the ability to create fancy text effects with (again) only a few lines of CSS. This means that, whereas before you might have to create the text in Photoshop and add effects and then export it and add text as an image, you only need to type in those few lines of CSS and you’re all done with your text-affects.
3. Multi-Column Layouts: Though it is not supported in Safari and Mozilla based browsers, this feature is really nifty. With a couple of lines of code, like this:

    -moz-column-width: 15em; -webkit-column-width: 15em; -moz-column-gap: 2em; -webkit-column-gap: 2em;

   you can create a great multi-column layout. This kind of a layout would be ideal for people creating magazine websites or newspaper sites that will need more than the regular single-column outlook.

4. CSS3 Transitions:This feature is probably the coolest thing I ever saw in CSS3. With the use of code as such:

   #box {
   width: 580px;
   padding: 9px 15px;
   background-color: #ED8029;
   color: white;
   border-radius: 5px;
   -webkit-transition: background-color 5s;
   -moz-transition: background-color 5s;
   -o-transition: background-color 5s;
   -ms-transition: background-color 5s;
   transition: background-color 5s;
   }
   #box:hover {
   background-color: #A7B526;
   }

   you can create a nifty hover action that will look great and save you time.

These are all great features and are also widely accepted in browsers, saving you both time and effort whenever you are working on something.

Trends in Links: A Few Ways to Improve Your Links

Links are an important way to link your blog to the outside world. It’s like the cell phone you use to txt and keep contact with the rest of the world. Now, when you make a website, you’ll want to customize your links, so that you have links that look like they were made for your site. And, in truth, they will be made for your site.

Links are a basic thing, that’s function is to whisk away visitors to another site or another portion of your website. How the links look are an important aspect in webdesign. The best thing to do is a basic link styled in CSS, but that’s not always the case here. Sometimes, websites need a little bit more, maybe a touch of Javascript. This can be easily achieved. Some people have plugins to do this.

http://davidwalsh.name/jquery-link-nudging, this article really helps. It was written by a dude called David Walsh.

http://davidwalsh.name/dw-content/jquery-link-nudging.php, demo of the previous link.

The same person also wrote an article on how to do the same with MooTools, which he actually wrote first.

http://davidwalsh.name/mootools-link-nudging (link to the MooTools link nudging).

Of course, for those of you who want a fading link, just to fade from one color to another, you can visit this link:

http://davidwalsh.name/mootools-link-fading

The same code can be translated into jQuery easily, but you can just stick with MooTools.

“Just because you have code, doesn’t mean you should use it.”

The quote is especially true here. If you design a really snazzy link with jQuery or MooTools, you might as well run a link showcase instead of a website (no joke intended). If you just keep on adding functions, then you probably have too much. Knowing when to stop adding is a necessary skill in design, some people just cram so much into a website, something I strongly discourage. If you run a minimalist design, then fading links with no underline may be the way to go. Fading links work well in Minimalism because it looks elegant when everything else is black and white. If you want a website that looks full, fading doesn’t really work well, just use basic CSS so it doesn’t look like too much.

6 More Tutorials for Design

I admit that I’m really not posting stuff like: “100+ tutorials for design”, but, I’m trying. Here are 6:

1. http://abduzeedo.com/reader-tutorial-arcadia-80s-vhs-style — retro ’80s Arcadia VHS style tutorial by Abduzeedo.
   

   Arcadia

2. http://fontfabric.com/tutorial-multi-colored-effect/ — multicolored effect with the Duplex font by Font Fabric.
3. http://abduzeedo.com/clouds-text-effect-pixelmator — clouds text effect tutorial by Abduzeedo.
4. http://www.blenderguru.com/create-a-glowing-neon-sign/ — the past few days, I’ve been trying to learn Blender. This really got me started on letters, title intro graphics, etc.
5. http://troy-sobotka.blogspot.com/2008/04/inkscape-tutorial-2-text-and-simple.html — simple, basic, text styling for beginners in Inkscape.
6. http://troy-sobotka.blogspot.com/2007/11/inkscape-tutorial-1-chrome-effect.html — the simple “chrome” effect in Inkscape.

5 Tutorial Websites Every Designer SHOULD Bookmark

I get very pissed when there is a nice tutorial but I forget the website. Perhaps you have heard about this website but have forgotten to bookmark it. Ta-Da! The lonely, 12-year-old designer making his crap has gathered these sites just so you don’t piss your self off! Am I not nice? (sorry, “amn’t” isn’t a word).

1. http://vector.tutsplus.com/ – A very nice collection of tutorials

2. http://vectips.com/ – A collection of tips, tricks, interviews, and inspiration (almost like my site).

3. http://tucson-labs.com/ – A) You can call them to design for you. B) Head over to the articles section and check out the groovy tutorials!

4. http://inkscapetutorials.wordpress.com/ – A site dedicated to bringing you Inkscape (free) tutorials.

5. http://screencasters.heathenx.org/ – A collection of over 100 Inkscape screencasts!

Sexy CSS buttons

Here are the next generation of CSS buttons. Derived from:

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

Now, here is the CSS:

.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}

a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}

a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}

a.button:active {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}

*Keep in mind: I HAD NOTHING TO DO WITH THE DEVELOPMENT OF THIS.

With the extra measure for everyone’s most hated browser (IE), the HTML would look like this:

<a href="#" onclick="this.blur();"><span>Launch Crap...</span></a>

Don’t forget to put the images in the file that you have the code:

Span

A

That is all.

**This post was derived from OTHER sources**