Opacity in CSS

Today we learn about opacity in CSS! I made an example here and here you have the files.

Information about opacity in CSS:

The opacity property takes a value of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent – anything below that element will show completely through. 1.0 is 100% opaque – nothing below the element will show through.

So to set an element to 50% transparent, you would write: opacity:0.5;

Neither IE 6 nor 7 support the CSS 3 opacity property. But you’re not out of luck. Instead, IE supports a Microsoft-only property “alpha filter”. Alpha filters in IE accept values from 0 (completely transparent) to 100 (completely opaque). So, to get your transparency in IE, you should multiply your opacity by 100 and add an alpha filter to your styles:

Alpha filter for IE: filter: alpha(opacity=50);
Alpha filter for Mozilla: -moz-opacity:0.5;

More info on About.com . Now let’s to see my example…

1. Open Notepad and type this.

Transparent DIV

body
{
background-image: url(“picture.jpg”);
background-repeat: no-repeat;
color: white;
font-size: 20px;
}
div
{
width: 200px;
height: 500px;
margin-left: 15em;
background-color: black;
opacity: 0.70;
}
p { padding-top: 20px;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed cursus. Sed sagittis. Nullam imperdiet enim nec quam. Fusce consequat, nunc lacinia interdum fermentum, tortor ante cursus quam, sit amet eleifend risus nunc suscipit risus.

 

In this example i create an html page with css very simple. I put a background image and a div with the background color black. At this div I low the Opacity at 70%! In the next picture you have the div without opacity… is ugly!

image 1

Saw what you need to do is to write this code at the div opacity: 0.70;

Opacity in CSS Tutorial: Final Result

That’s it! Is very simple… here is the final result and here is an Lorem Ipsum Generator! Thank you!

Author’s URL: http://www.piticstyle.com

10 Usability Principles to guide you through the

1. Motivate 
   Design your site to meet specific user needs and goals. Use motivators to draw different user “personae” into specific parts of your site.
2. User task flow 
   Who are your users? What are their tasks and online environment? For a site to be usable, page flow must match workflow.
3. Architecture – it’s 80% of usability 
   Build an efficient navigational structure. Remember – if they can’t find it in 3 clicks, they’re gone.
4. Affordance means obvious 
   Make controls understandable. Avoid confusion between emblems, banners, and buttons.
5. Replicate 
   Why reinvent the wheel? Use ergonomically designed templates for the most common 8-12 pages.
6. Usability test along the way 
   Test early in design using low-fidelity prototypes. Don’t wait until the end when it’s too late.Know the technology limitations Identify and optimize for target browsers and user hardware. Test HTML, JavaScript, etc. for compatibility.
7. Know the technology limitations
   Identify and optimize for target browsers and user hardware.Test HTML, JavaScript, etc for compatibility.
8. Know user tolerances 
   Users are impatient. Design for a 2-10 second maximum download. Reuse header graphics so they can load from cache. Avoid excessive scrolling.
9. Multimedia – be discriminating 
   Good animation attracts attention to specific information, then stops. Too much movement distracts, slowing reading and comprehension.
10. Use a stats package 
    Monitor traffic through your site. Which pages pique user interest? Which pages make users leave? Adjust your site accordingly.

50 Web Usability Tips that Help You Attract and Retain Visitors to Your Website

Web usability has a direct correlation to your potential to effectively make money online. This is largely because the usability of your website very strongly affects the number of return visits you will see from search and referral visitors, as well as your ability to sell any product or service.

Visitor loyalty and the overall size of your audience base determines how much money you will make from contextual advertising, affiliate marketing or subscription-based monetization strategies.

Ideally, you want to capture every individual that stumbles upon your website and entice them towards a specific action, such as visiting an affiliate website, buying a product, registering as a user and subscribing to your blog feed or company newsletter.

Web usability guru Jakob Nielsen is an authority on the topic of user-friendly websites and has written extensively about the importance of Usability for online businesses.

Here is a quote from his seminal Introduction to Usability:

On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave. If the homepage fails to clearly state what a company offers and what users can do on the site, people leave.

If users get lost on a website, they leave. If a website’s information is hard to read or doesn’t answer users’ key questions, they leave. Note a pattern here?

There’s no such thing as a user reading a website manual or otherwise spending much time trying to figure out an interface. There are plenty of other websites available; leaving is the first line of defense when users encounter a difficulty.

I’ve recently been on a Nielsen rampage and have been reading voluminously about web usability. His articles are really interesting to me because they offer some excellent tips on how to improve your website or blog in order to attract and add value for site visitors.

 

0 Web Usability Tips to Attract and Retain Web Visitors

This list was developed as a result of personal notes which I’ve recorded while reading Jakob Nielsen’s articles as well as several interviews with him on the topic of usability. They are rephrased in my own words so that they make sense outside of each article’s context.

I’ve categorized them according to topics and have listed them in digestible point formats so you can easily scan through and pick out the ones which are suitable for your own websites.

References for these tips are listed at the bottom of this post and should you have the time or interest, do you visit these articles to learn more about usability. I’ve found them to be very helpful indeed.
Web Design and Usability Tips

1. Response or load time for a website is fairly important. If your site is slow, visitors are likely to go away and it will also be difficult for them to learn new or foreign concepts.

 

2. Remove the ‘homepage‘ link on the homepage because it can increase navigational confusion. This will make the user doubt that the homepage is indeed the actual homepage.

 

3. Follow conventions for web design (”blue for hypertext links“) This will allow site visitors to mainly focus on your content instead of using their mental power to learn how to use your website.

 

4. Fluffy flash designs that do not support real user needs are not recommended because they weaken usability.

 

5. Splash screens are not useful because it gives the first impression that a website is more concerned with its own image than other user’s problems. Websites need to communicate respect for the user’s time.

 

6. Website usability tests can be easily performed by getting users to interact with your design while they think out loud. Record their comments and filter it into your quality improvements.

 

7. Simplicity is Rule #1 for usability. The less features there are available in a design, the less there will be to compete for the user’s attention.

 

8. Try to mainly rely on typography instead of bloated designs and graphics. The goal is to enhance appearance without delaying the response time. The blandest sites can get the most page views and users.

 

9. Serve senior web users by making making your website more readable and clickable. Use large text for hypertext links and minimize usage of pull-down menus and moving interface elements.

 

10. Change the color of visited links. This will allow users to decide where to go next on your website. Links that don’t change color can cause navigational disorientation in users.

 

Copywriting and Usability Tips

1. Large amounts of text on one webpage do not work well because it makes it difficult for users to extract useful information. “The more you say, the more people tune out your message.”

 

2. Good copywriting style should be to the point and should not be dominated by internal niche jargon and ‘marketese‘ or marketing sales speak.

 

3. Write so that lower-literacy users can understand and appreciate your content. Sites which target broad audiences must make lower literacy users a priority.

 

4. State the most important information in the first two paragraphs because most users will read this material and scan the rest of the article.

 

5. Split your content into subheadings and use bullet points. Also highlight keywords or important phrases by making them bold.

 

6. Use brief headlines with strong information-conveying words. People scan headlines and content blurbs in feed readers faster than email newsletters.

 

7. Do not use tiny font sizes or small text because of it will not work for a large part of the web audience (Teenagers and People in their 40s onwards).

 

8. A website’s tagline must explain what the company does and what makes it unique among competitors. Your tagline should communicate your site purpose within the crucial first 10 seconds.

 

9. Use old and familiar words when writing to be found by search engines. Supplement unique words or madeup phrases with known or legacy words because they are used the most by customers and visitors to your website.

 

10. The headline must make sense when it is detached from the rest of the content. This is important because online headlines are often used in a list of articles or email programs, which sets it out of context.

 

11. Make the first word of the headline an information carrying word that will help with scanning. Examples to be used include the name of the concept or company discussed.

 

12. Do not start your page titles with the same word all the time because it will cause difficulty when scanning a list. Move common terms to the end of the list and place it in brackets.

 

13. Show numbers as numerals. Numerals will catch the attention of users better because numerals represent facts. “It’s better to use “23″ than “twenty-three” to catch users’ eyes when they scan Web pages for facts, according to eyetracking data.”

 

14. Blog links should say where they go. This information can be provided in the anchor text or surrounding words. “Life is too short to click on an unknown. Tell people where they’re going and what they’ll find at the other end of the link.”

 

Content Infrastructure and Usability

1. Do not have a list of links on your sidebar without providing explanations on why each of them are recommended.

 

2. Navigation and user-interface elements need to be simple so as to allow users to find their way around the website.

 

3. Online content should be short and includes the use of bulleted lists and highlighted keywords. Write for scannability because users scan, rather than read.

 

4. Include a editorial focus and direct your visitors to specific material, i.e. Top stories on CNN or Top posts on a blog.

 

5. Information architectures should not mirror the organization chart and do not use bloated graphics or jargon.

 

6. Discover the reasons why users visit your website and build your site as a fast and obvious response to these reasons or queries.

 

7. Local navigation (”see these related products”) should be given more importance than global navigation. A minimalist navigation system should be used to match the user’s model of the information space.

 

8. Don’t make webpages stand-alone units. They need to connect to related information.

 

9. Provide interactive content features which allow visitors to do instead or just read. This includes online voting, games, message boards, forums, user submitted content and feedback forms etc. This especially appeals to teenagers.

 

10. Do not use PDF files because they break reader flow and attention. Only use PDF files for distributing manuals and large documents or reserve it for printing purposes.

 

11. Optimize your Page titles by using different Page Titles for each page. Page titles are used in taskbars and when users bookmark a site. “Don’t start with words like “The” or “Welcome to” unless you want to be alphabetized under “T” or “W.”

 

12. Indicate link destination when using within-page links or mailto links. “For example, add a short statement that says something like: “Clicking a link will scroll the page to the relevant section.”

 

13. Use Breadcrumb navigation. Breadcrumbs offer one-click access to higher site levels, take up very little space and show users their current location as well.

 

14. Author Biographies should be included for blogs. Users want to know who they are reading and biographies are a simple way to build trust.

 

15. Highlight Popular Posts. Integrate them in your navigational system or link to your previous articles in newer postings. This is important because you need to provide them with some useful background on the topic or your opinion.

 

16. Keep your content focused. The more focused your content, the more loyal your readers will be. Building a specialized website allows you to be an authority in your niche.

 

17. Provide new or follow-up information at the same location of the original information or transaction. For example, if you have a cornerstone and heavily linked article on social voting platforms, you should return to this article to update it with new links to current and future articles on the same topic.

Usability, Monetization and Online Businesses

1. Websites can differentiate themselves from competitors by focusing on visitor needs and figuring out how they access or use data. Differentiation is about being valuable and useful to site visitors.

 

2. Do not run pop-ups, such as in-content ads or pop-up or pop-in squares because they can often feel intrusive and overwhelming.

 

3. Good usability will positively translate into profit and will even lead to a very high ROI or Returns on Investment. Nielsen estimates ROI to be around 1000%.

 

4. Building visitor trust is a big problem that all websites face. Important to affirm the credibility of a website and its respect for user’s rights.

 

5. Corporate policies which promote usability and user-centered design standards should be essential to all businesses.

 

6. Have a decent error message that ensures that you don’t lose your user due to programming or server malfunctions.

 

7. When replying to visitor emails, edit and use subject lines which relate specifically to their query. A good subject line is vital for building stronger relationships with customers or site users.

 

8. Use confirmation emails and automated messages to close the loop in E-Commerce and other transactions. Tell customers what they need to know. This builds trust by customers for online businesses.

 

9. To achieve high survey response rates, keep them short and clear. Ensure that the process is quick and painless for users or customers by asking fewer questions and using different surveys for different users.

Usability References

• Copywriting and Usability – Papers and Essays by Nielson.
• Usability and Online Businesses – Interviews listed on Nielson’s Bio page
• Web Design, Content Infrastructure and Usability – Nielson’s AlertBox columns

If you’re interesting in reading more about web usability, a good article to start with would be Nielson’s rant on the Top Ten Mistakes in Web Design as well as his article on Weblog Usability.

Efficient CSS with shorthand properties

I get a lot of questions about CSS from people who aren’t crazy enough to have spent the thousands of hours working with CSS that I have. Sometimes I’m asked to take a look at something they’re working on to see if I can figure out why it doesn’t work as expected. When I look at their CSS I often find that it’s both bloated and unorganised.

One of the reasons for using CSS to layout websites is to reduce the amount of HTML sent to site visitors. To avoid just moving the bloat from HTML to CSS, you should try to keep the size of your CSS files down as well, and I thought I’d explain my favourite CSS efficiency trick: shorthand properties. Most people know about and use some shorthand, but many don’t make full use of these space saving properties.

Some background

Shorthand properties can be used to set several properties at once, in a single declaration, instead of using a separate declaration for each individual property. As you’ll see, this can save a lot of space in your CSS file.

Quite a few shorthand properties are available – for details I suggest the W3C CSS specifications of the background, border, border-color, border-style, border sides (border-top, border-right, border-bottom, border-left), border-width, font,list-style, margin, outline, and padding properties.

Colours

The most common way of specifying a colour in CSS is to use hexadecimal notation: an octothorpe (#) followed by six digits. You can also use keywords and RBG notation, but I always use hexadecimal. One great shortcut that many don’t know about is that when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:

#000000 becomes #000, #336699 becomes #369.

Box dimensions

The properties that affect box dimensions share the same syntax: the shorthand property followed by one to four space separated values:

• property:value1;
• property:value1 value2;
• property:value1 value2 value3;
• property:value1 value2 value3 value4;

Which sides of the box the values affect depends on how many values you specify. Here’s how it works:

• One value: all sides
• Two values: top and bottom, right and left
• Three values: top, right and left, bottom
• Four values: top, right, bottom, left

Thinking of the face of a clock is an easy way of remembering which side each value affects. Start at 12 o’clock (top), then 3 (right), 6 (bottom), and 9 (left). You can also think of the TRouBLe you’ll be in if you don’t remember the correct order – I first saw this in Eric Meyer’s excellent book Eric Meyer on CSS.

Margin and padding

Using shorthand for these properties can save a lot of space. For example, to specify different margins for all sides of a box, you could use this:

1. margin-top:1em;
2. margin-right:0;
3. margin-bottom:2em;
4. margin-left:0.5em;

But this is much more efficient:

1. margin:1em 0 2em 0.5em;

The same syntax is used for the padding property.

Borders

Borders are slightly more complicated since they can also have a style and a colour. To give an element a one pixel solid black border on all sides, you could use the following CSS:

1. border-width:1px;
2. border-style:solid;
3. border-color:#000;

A more compact way would be to use the border shorthand:

1. border:1px solid #000;

I always specify border values in that order:

1. border:width style color;

Most browsers don’t care about the order, and according to the specification they shouldn’t, but I don’t see a reason for not using the same order as the W3C does in the specification. There’s always the chance of a browser being very strict about the order of shorthand values.

The same syntax can be used with the border-top, border-right, border-bottom, and border-left shorthand properties to define the border of any single side of a box.

You don’t have to specify all three values. Any omitted values are set to their initial values. The initial values are medium for width, none for style, and the value of the element’s color property for color.

How wide a medium border is depends on the user agent.

Note that since the initial value for style is none you do need to specify a style if you want the border to be visible.

The border-width, border-style, and border-color properties used in the first border example above are themselves shorthand properties. Their longhand alternatives are very rarely used, but they do exist:

1. border-width:1px 2px 3px 4px;

is shorthand for

1. border-top-width:1px;
2. border-right-width:2px;
3. border-bottom-width:3px;
4. border-left-width:4px;

The border-style and border-color shorthands use the same syntax as border-width: the box dimensions syntax described above.

Using the various border shorthands can also save some typing when you want to give an element’s border different properties on different sides. These declarations will make an element’s right and bottom borders solid, black, and one pixel wide:

1. border-right:1px solid #000;
2. border-bottom:1px solid #000;

And so will these:

1. border:1px solid #000;
2. border-width:0 1px 1px 0;

First the borders on all sides are styled identically, and then the different widths are specified.

Backgrounds

Another very useful shorthand property is background. Instead of usingbackground-color, background-image, background-repeat, background-attachment, and background-position to specify an element’s background, you can use justbackground:

1. background-color:#f00;
2. background-image:url(background.gif);
3. background-repeat:no-repeat;
4. background-attachment:fixed;
5. background-position:0 0;

can be condensed to

1. background:#f00 url(background.gif) no-repeat fixed 0 0;

Like with the border shorthands the order of the values isn’t supposed to matter, but I’ve seen reports of early versions of Safari having problems when the values aren’t listed in the order used in the W3C specification, which is this:

1. background:color image repeat attachment position;

Remember that when you give two values for position, they have to appear together. When using length or percentage values, put the horizontal value first.

As with the border and border sides properties, you don’t have to specify all values. If a value is omitted, its initial value is used. The initial values for the individual background properties are as follows:

• color: transparent
• image: none
• repeat: repeat
• attachment: scroll
• position: 0% 0%

This means that it’s pointless to use the background shorthand without giving a value for either color or image – doing so would make the background transparent.

I almost always use the background shorthand to specify background colours for elements, since background:#f00; is the same as background-color:#f00;.

Remember that this will remove any background image specified by a previous rule. Consider these rules:

1. p {
2. background:#f00 url(image.gif) no-repeat;
3. }
4. div p {
5. background:#0f0;
6. }

All paragraphs not in a div element will have a background image and be red where the image doesn’t cover the background. Any paragraph that is in a div will have a green background, and no background image.

Fonts

As with the background property, font can be used to combine several individual properties:

1. font-style:italic;
2. font-variant:small-caps;
3. font-weight:bold;
4. font-size:1em;
5. line-height:140%;
6. font-family:"Lucida Grande",sans-serif;

Can be combined into

1. font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

Again, when it comes to the order of the values, I see no reason not to use the order given by the W3C. Better safe than sorry.

When using the font shorthand you can omit any values except font-size andfont-family – you always need to give values for those, and in that order. The initial values for the individual font properties are these:

• font-style: normal
• font-variant: normal
• font-weight: normal
• font-size: medium
• line-height: normal
• font-family: depends on the user agent

Lists

The shorthand property for ordered and unordered lists is list-style. I personally only use it to set the list-style-type property to none, which removes any bullets or numbering from the list:

1. list-style:none;

instead of

1. list-style-type:none;

You can also use it to set the list-style-position and list-style-imageproperties, so to specify that unordered lists should render their list item markers inside each list item, use an image for the list item markers, and use squares if that image is not available, the following two rules would do the same thing:

1. list-style:square inside url(image.gif);

is shorthand for

1. list-style-type:square;
2. list-style-position:inside;
3. list-style-image:url(image.gif);

Outlines

The outline property is very rarely used, mainly because of its current poor browser support – as far as I know only Safari, OmniWeb and Opera currently support it. Anyway, using the individual properties you can define an outline like this:

1. outline-color:#f00;
2. outline-style:solid;
3. outline-width:2px;

or like this:

1. outline:#f00 solid 2px;

Outlines have some interesting characteristics that make them useful: unlike borders, they do not take up any space and are always drawn on top of a box. This means that hiding or showing outlines doesn’t cause reflow, and they don’t influence the position or size of the element they are applied to or that of any other boxes. Outlines may also be non-rectangular.

Reduced file size and easier maintenance

Those are the shorthand properties available in CSS 2. If you were to take the CSS file of a fairly large site and make one version that uses no shorthand properties and another version that uses shorthand efficiently, you would see a huge difference in file size. That’s one reason for using shorthand. Another is that doing so makes your CSS files easier to maintain – at least that’s my experience.

Got any other tips related to CSS shorthand? Let us know.

Translations

This article has been translated into the following languages: