Tips for Web Designers, Developers, and Bloggers

Posts tagged ‘CSS’

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.

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

Span

A

A

That is all.

**This post was derived from OTHER sources**

Web Design Trends

Everyone knows that trends are what keeps things alive. Don’t try to make a new trend, unless you are well known. So, here are things that are common, and thus ‘trendy.’ Here are two trends that you should put on your site:

  1. Embossing letters. Here is an excerpt from the Apple menu:

    Apple menu

    The Apple menu.

  2. OK, now there is the matter of transparencies. The new trend: Transparent P.N.G’s! Here is a website:
    Transparency

    This is a speech bubble.

    Of course there is an error with IE. You need the ‘AlphaImageLoader.’ Here is an example: 

  3. <html>
    <head></head>
    <body bgColor="blue">
    <!-- This DIV is the target container for the image.  -->
    <DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
         filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
         src='image.png', sizingMethod='scale');" >
    </DIV>
    </body>
    </html>