CSS Juice

Cheat Sheets

Derald — Thu, 11 Sep 2008 15:19:00 +0000

Are cheat sheets beneficial to you designers? So people will say no, while others may say yes. As a designer should you use cheat sheets?

After finding an article about cheat sheets, I got to thinking, are there any negative effects of using cheat sheets? Of course the first one that I thought of was that as a designer you should really learn the syntax of the language you are designing/coding with. Cheat sheets can become a crutch which in the long run may hurt you as a designer. Another negative effect of using a cheat sheet is security issues. When using languages such as PHP, ASP, and other web based languages a cheat sheet does not provide any information on how secure the syntax is list is. It can provide information on how secure it is via a ranking system, but that does not show you how much damage can happen if exploited.

Using a cheat sheet is does have it’s benefits. There are parts of languages that are not used a lot, for example opacity in CSS. This can be a very useful attribute if you need to use it. For attributes that you don’t use a whole lot cheat sheets can be very beneficial. They can help you save time when you are looking for a solution to an issue you may have. Other times, it helps to have cheat sheets that will tell you what browsers support what elements of languages. Not all browsers are alike, and knowing that Firefox does not support transitions like Internet Explorer does will save you a lot of headaches trying to get it to work. Another benefit to cheat sheets is that you don’t have to remember how to remember a lot of stuff, which is why cheat sheets are around in the first place. Remember all of the HTML code for characters such as a greater than symbol is useful if you them a lot, but if you don’t it is simpler to just use a cheat sheet.

Over all cheat sheets have their benefits and their negative effects on any designer. For things that you use everyday you should not use cheat sheets, but for those uncommon attributes that are not used, then a cheat sheet can be beneficial, as long as it does not provide a security exploit.

Basic Select Menus Modifications

Derald — Fri, 05 Sep 2008 12:56:05 +0000

Select menus, also known as drop down menus, are one of the elements in HTML that most people don’t modify at all. I know that some select menus can be confusing as they get longer. One of the things that I like to do is to alternate the colors of the selections. This gives the select element a little bit of style especially when you have more then one choice showing, and can be use as color combination to blend into your site’s theme.

This modification is very simple, and can be very effective. We are going to apply this to a select element that has more then one option showing to take advantage of the effect. If you only have one option showing, as in a true drop down menu, then the change is not as effective. If you don’t remember how to show more then one option in a select element, just add a size attribute inside the select element’s opening tags. Here is how the select element should appear.

The code should look similar to you if you have used the select tag before, only thing that we have done to this HTML code is to add a class attribute to each of the options, and set a size of five to the select menu. We see that the classes alternate as either odd or even. Now all we need to do is create the CSS to apply to the classes.

The CSS will be basic, just like the HTML. For the even class we are going to have a gray background with a white foreground color, and the opposite for the odd classes.

So far we have uses the pseudo-class :hover, and applied the effect to any a tag with in the menu class. What we did with the :hover is invert the colors of the text and background, everything else says the same. If the other attributes did not stay the same the rollover effect would not look proper. We also make all the li elements display in a row with the inline attribute.

Now for the HTML code

As you see the HTML code is just an unordered list that has the class menu applied to it. In each list element, we have a link for our menu.

Back to Basics: A Beginners guide to starting a CSS Document

Rafael — Thu, 24 Apr 2008 15:54:09 +0000

Here’s a tip for you. Never let the browser to decide what your site will look like. What we’ll go over today is a quick and easy way of defining styles for common html tags that should dramatically cut down on the amount of guess work a browser will have to do to interpret your website. As you all know some of our more popular browsers **cough** IE **cough** tend not to display things as well as we want on their own.

The good news is that it’s really simple to fix. The bad news is that it’ll take a little bit of typing to get it down to the way you want. I hope you’ve warmed your fingers up a bit so that you don’t get a cramp. Let’s get started…

Now, I like to start with the tag when I’m creating my style sheet. It really doesn’t matter what order you go in, but I generally go down the list of what’s first presented on the page.

body {

}

First up let’s define the margins and the padding of the body so that we’ll get a nice even border across all browsers.

body {
margin: 0px;
padding: 0px;
}

What the above does is tell the browser to make all margins and all padding zero pixels across the entire body (meaning our website can go full screen all the way out to the edges).

Next we’ll go ahead and define our fonts and background color that we want the browser to use.

body {
   margin: 0px;
   padding: 0px;
   background-color: #FFFFFF;
   font: normal 0.92em Arial, Helvetica, sans-serif;
}

With the font, I’ve used a little bit of short hand just to keep things compact and simple. If you aren’t familiar with this, it’s perfectly ok to do what’s comfortable for you.

With that out of the way, let’s move on to our next set of tags. For me this is either a

tag with

tags within it or a

, depending on what type of site I’m doing. Now is a good time to go ahead and define what we need for these two.

td {
font: normal 0.92em Arial, Helvectica, sans-serif;
}

div {
   margin: 0px;
   padding: 0px;
   font: normal 0.92em Arial, Helvectica, sans-serif;
}

You’ll notice that I’ve zeroed out the margin and padding on all

tags. Why would I do this? Simple, not all browsers use the same settings to display these. Doing this we bend the browsers to our will. I prefer zero when doing all CSS layouts, but you can set them to whatever works best for you.

Next on the list will be our handy dandy links, but before we jump into these I’d like to say a few things. Links are a little different animal when it comes to redefining them. You could just make a standard “a” class in your CSS, but that doesn’t cover all aspects of the link itself. Instead we’ll use what’s called “pseudo-classes” for our linking.

a:link {
color: #0000CC;
text-decoration: underline;
}

a:hover {
color: #0000CC;
text-decoration: none;
}

a:visited {
color: #551A8B;
}

What this basically means is that we’ll be able to control various states of a link like it’s normal state (a:link), it’s mouse over effect (a:hover), and it’s state after it’s been clicked (a:visited). I set all my links to default blue with an underline. Then when you put your mouse over them they stay blue, but the underline disappears. Once it’s been clicked, just so you know you’ve clicked it before, I chose to use a dark purple. Like always you are free to use whatever effects/colors you’d like. This is just to give you a starting block to build upon.

Now we’ll move onto the next tag we’ll redefine, to make appear standard across all the browsers, the *lt;p> paragraph tag. For some reason there is a huge difference in the margins created by the

in FireFox and Internet Explorer. We’re going to fix that.

p {
margin: 10px 0px;
}

Finally we’ll move out to our head tags . The “x” would be replaced by a number to suit your needs of course. These aren’t really used as often as they used to e, but they still hold some value SEO wise. So, just to be sure, we’ll go ahead and include how we want them to look instead of the greatly oversized bold black text they normally default to.

h1, h2, h3 {
margin: 0px;
padding: 0px;
}

h1 {
font-size: 1.5em;
}

h2 {
font-size: 1.3em;
}

h3 {
font-size: 1.1em;
}

For the sake of time, and a lot of reading we’ll end it here. What you should end up with is a very basic CSS document that addresses a few issues that you may encounter when browser checking your new website.

body {
   margin: 0px;
   padding: 0px;
   background-color: #FFFFFF;
   font: normal 0.92em Arial, Helvetica, sans-serif;
}
td {
   font: normal 0.92em Arial, Helvectica, sans-serif;
}
div {
   margin: 0px;
   padding: 0px;
   font: normal 0.92em Arial, Helvectica, sans-serif;
}
a:link {
   color: #0000CC;
   text-decoration: underline;
}
a:hover {
   color: #0000CC;
   text-decoration: none;
}
a:visited {
   color: #551A8B;
}
p {
   margin: 10px 0px;
}
h1, h2, h3 {
   margin: 0px;
   padding: 0px;
}
h1 {
   font-size: 1.5em;
}
h2 {
   font-size: 1.3em;
}
h3 {
   font-size: 1.1em;
}

There are a lot more HTML tags that we could redefine, but I find that the above is a great first step towards creating a browser friendly site using CSS. I hope this helps all of you out there who are just now getting your feet wet.

Framing your images using CSS

Rafael — Mon, 31 Mar 2008 16:20:08 +0000

So you have this awesome autographed picture of Carrot Top that you got after months of waiting from his fan website, and you’d like to put it up on your website to prove your fanhood. The problem is you don’t have Photoshop or Fireworks handy to put a nice frame around it, and you’d like to have something to do the job. Well don’t sweat it my friends, I’ll show you a simple yet effective CSS trick that you can use to mimic a frame on a picture and all you’ll need is Notepad to do it.

First up, we’ll need our picture. Since my autographed picture is locked away in a security vault for safekeeping, we’ll use a picture of my co-worker, Chris Crum, instead.

Umm, yeah… Moving on.

Now that we have our picture, it’s time to add a class to the image source so that we can begin.

“Chris URL” alt=“Chris Crum” class=”chris-pic”>

With that exhausting bit of prep work out of the way it’s time to move on to the magic.
What you’ll need to do now is open up your CSS file so we can add a new class. In this case it’s called “chris-pic.”

.chris-pic {}

With our newly created class, it’s time to fill it in with the appropriate code.

.chris-pic {
padding: 5px;
border-right: solid 1px #CCCCCC;
border-bottom: solid 1px #BEBEBE;
}

Before we go any further, I’d like to give a brief explanation of what the text above means.

The first line sets the padding around the picture to five pixels on all sides. The second line places a light gray border on the right side with a width of just one pixel. Finally, the third line places a slightly darker gray border on the bottom of the picture also with a width of just one pixel.

You’ll end up with something like below which has a border only on two sides but gives the effect of a frame.

That’s it! Now get out there and have some fun.

How to make Buttons with Hover Load Faster

Blues — Thu, 13 Mar 2008 16:49:55 +0000

With CSS we can target the ‘:hover’ child class for links and update their background properties.

Example
.nav a:link, .nav a:visited {
width: 160px ; height: 30px ; display: block; overflow:hidden;
background: url(’images/nav1.gif’) 0px 0px no-repeat;
}
.nav a:hover, .nav a:active{
background-position: 0px -30px;
}

The Image itself contains both the normal and hover state. This is called a sprite, using this technique the image needs only be loaded once.

Custom Textfield Background

Blues — Thu, 06 Mar 2008 18:05:07 +0000

The benefits to designing your own custom html text fields for use within your site can give you a completely personal look and feel that is totally your own. There are however, also some key disadvantages to this process. You can create any type of design, then use CSS to replace the actual text field background and have your own designed textfield. It’s easier then most would think. It’s the simple things that make or break your site.
Now lets look at the code.

HTML:

You want to give your text field a class so the CSS can format the field the way you want it to look. If you do not do this the custom image will not show.

Now for the CSS control information

CSS:

.one {
width: 180px;
height: 20px;
background: url(../images/custom-textfielddesign/one.gif) no-repeat;
border: none;
padding: 2px 0 0 5px;
}

Simple as that. Now let’s talk about the advantages. With this CSS code you can give your site it own feel and personality. The site will still be SEO compliant. There are some disadvantages as well. Your design is only as good as your skill and you don’t want to make the text so hard to read that no visitor wants to return.

Good luck and I hope this helps with making your site exactly what you want.

Image Rollovers With CSS

Blues — Mon, 25 Feb 2008 19:57:44 +0000

In this tutorial you will learn how to make an CSS rollover effect.

Most of you saw how this effect looks like. When you pass over a, in this case graphic button,

it changes shape,color,text…

It’s not necessary to use a graphic object in this effect, but for purpose of this tutorial I will use a graphic button.

First, you need to create a graphic object which you will use for this effect. You can even use mine if you want to.

This graphic object contains 2 buttons which we will use as a normal state and mouse over state.

They are saved in one file.

Dimensions 80×50 pixels

Why do we use one graphic file instead of two?

Well, if you use two graphic files, one for each state (mouse over, normal), this effect gets a bit slower because one graphic, which shows as a normal state

loads at the first page loading, while the other graphic (mouse over state) loads when we pass with our mouse over our button.

This is not so practical.

But, if we use one graphic file with both states, it loads at the first page loading for both states. That’s why this is quicker and hence better.

Ok. Now lets start coding.

Insert this into your CSS file

#button a {   

display: block;   

background:  url(rollovergraphic.gif) top;   



width: 80px;   



height: 25px;   



}

#button a:hover {   

background:  url(rollovergraphic.gif) no-repeat bottom;   

}

Insert this where you want display the rollover button:

  

Highlighted Menu in CSS

Blues — Wed, 06 Feb 2008 19:33:27 +0000

Here is a quick and easy way to make menus with highlighted sub-links. Minimal code for maximum effect.

CSS Code

#css-target-menu { background: #000;

padding: 5px; width: 300px; }

#css-target-menu ul { font: 11px "Trebuchet MS", Verdana, Arial;

list-style: none;margin: 0;

padding: 0;width: 300px; }

#css-target-menu li {background: #000;

padding: 2px; }#css-target-menu li:hover

{ background: #333; }#css-target-menu li ul

{ width: 224px; }#css-target-menu li ul li a

{ color: #999; }#css-target-menu li a

{ color: #cae001; text-decoration: none; 

outline: none; display: block; }#css-target-menu li#css-tutorials, #css-target-menu

li#html-tutorials {background: #000;

margin: 0;padding: 2px 6px; display: none; }

#css-target-menuli#css-tutorials:target,

#css-target-menuli#html-tutorials:target {

display: block; }

HTML Code


 CSS Tutorials


Advanced Concepts


Box Model Theory

Cross-Browser Development





(X)HTML Tutorials




Color Theory


Document Structure

Layouts

As you can see the li ul will be activated when it’s target is active.
So any link to #sub-menu would activate li#sub-menu.
Simple CSS for an impressive menu display.

Basic Concepts using CSS

Blues — Fri, 25 Jan 2008 14:27:29 +0000

CSS is simple enough to control a few page elements. CSS is a very powerful tool. Stretch your imagination, with CSS you can create what you really want your page, layout, or site to look like is only limited to the amount of time you want to spend designing.

In CSS there is many tricks that will spare you and others some time. Using these tricks will also clean up your code making the code look better and it will save you some time. For instance:

#poor_example{

background-image: url(image);

background-color: #00000;

background-repeat: repeat-x;

background-position: top left;}

#great_example { background: #000 url(image) repeat-x top left; }

So if we look at the both examples we can see that the #great_example looks much better and needs only 1 line. The background properties works like this:

background: [color] [image] [repeat] [position] [attachment];

There is many other shortcuts so i won’t show everyone, but here’s how margin/padding works:

#poor_example{

margin-top: 1px;

margin-right: 2x;

margin-bottom: 3px;

margin-left: 4px;}

#great_exmple { margin: 1px 2px 3px 4px; }

If we look at this one, we can see that the margin/padding works like this:

margin: [top] [right] [bottom] [left];

With all off the margin quadrants the same size you will only need to write margin: [pixels]. But there’s some other tips you could use with margin:

#margin { margin: 2px 5px; } /* [Top/Bottom] [Right/Left] */#margin { margin: 2px 5px 1px; } /* [Top] [Right/Left] [Bottom] */

Structured coding

The importances of writing nice looking and structured codes, will make the design simpler to see and edit plus the structed coed is easy on your eyes. A good tip is to block your styles, wich means that you’re nesting the child of an element, like this:

#menu li { /* some neat code here */ }

   #menu li a { /* this is the child of #menu li }

This way you can see your corresponding codes better and it will make it easier to edit your code.

htaccessEditor - Online .htaccess Files Creator

Wallace — Mon, 19 Nov 2007 04:40:31 +0000

.htaccess is a text file containing commands that instruct web servers how to behave in certain situations, providing a way for you to make configuration changes on a per-directory basis.

.htaccess Editor enables you to easily create .htaccess files online without having to learn complex .htaccess rules. With the .htaccess editor, you can generate .htaccess code includes:

Basic authentication - used to specify the security restrictions for the particular directory.
Custom error pages - redirect visitors to pages that match your site design instead of the standard server error pages.
Password protection - restrict access to certain directories by requiring a password to view the contents.
Default pages - set default pages on a directory-by-directory basis.
Redirect directives - redirect requests for a specific file or directory to a new destination.
Access restrictions - allowed or denied certain addresses.

Creating .htaccess files has never been easier with .htaccess Editor.

Fresh RSS Button Set

Wallace — Sun, 18 Nov 2007 05:25:23 +0000

If you want to get more RSS readers, besides the content and web design, an attractive RSS button is necessary. Bloggers Journey offered a totally 51 Web 2.0 stylish RSS icons for free to download. Moreover, JackBook has already collected a large list of free beautiful RSS feed icons on the web, of course you will find the best one for your blogs.

FancyForm - Fancy Checkbox Replacement Script

Wallace — Sat, 17 Nov 2007 10:31:11 +0000

FancyForm is a fancy checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older web browsers. All you need to setup is markup the fancy scripts to header section and add style class to your current CSS style file. The script supports checkboxes, radio buttons and numerous advanced customization options. Check out the full featured Fancy Form demo page or go straight download the file.

Quickly Share Files with Drop.io

Wallace — Sat, 17 Nov 2007 03:05:04 +0000

If you have a file such as photos, video, audio, notes or docs you need to share online and keep it private truely, try Drop.io! It’s a new simple web-based AJAX supported file sharing and free online storage service that lets you store files quickly and privately even without sign up an account. You can use Drop.io for:

Store and share files private
Create as many as storage drops as you want
Add password to any of your drops
Shared drops on “View Only”, “View & Add Notes”, or “View, Add Notes & Files” basis
Use drop_name@drop.io email address to add files (nice idea!)
Supports all major file formats
Automatically deleted drops from 1 day up to 1 year
Add related notes and links to any file

Drop.io also have no any mess, clutter advertisements and easy to use, it’s definitely my alternative choice after the end of Filelime.