CSS3 Borders

With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.

In this chapter you will learn about the following border properties:

• border-radius
• box-shadow
• border-image

CSS3 Rounded Corners

Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.

In CSS3, creating rounded corners is easy.

In CSS3, the border-radius property is used to create rounded corners:

This box has rounded corners!

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}

CSS3 Box Shadow

In CSS3, the box-shadow property is used to add shadow to boxes:

div
{
box-shadow: 10px 10px 5px #888888;}

CSS3 INTRODUCTION

CSS3 Tutorials

Cascading Style Sheets (CSS) is a style sheet format, endorsed by the World Wide Web Consortium (W3C) that works with HTML documents using simple syntax and various style properties denoted by English language keywords.

CSS1 (Version 1.0) incorporated innumerable layout settings suitable for downloadable HTML pages. CSS2 (Version 2.0) provides additional XML support, downloadable fonts and audio presentations for visually impaired users. CSS3 (Version 3.0) continues in development and its improved highlights include: vertical text, extensive backgrounds and borders, speech recognition and user interaction.

Most web browsers support CSS3 as it becomes more popular and more web designers implement the use of CSS3 in their layout design. Web designers and web developers CSS3 can find valuable employment all over the world.

Informative online training articles based on CSS3 including tutorials on Selectors, multi column features, advantages, opacity, wrapping and link usage and creation are covered in this section. CSS3 is modularized, providing greater flexibility and capability for the developer or programmer. Maintenance of the system is improved from earlier versions and allows for individual modules to be tested and integrated with ease. CSS3 has become popular with developers due to faster completion time, more flexibility and easier maintenance of web pages.

Training Index

1. CSS3 Links Creation and Usage

   CSS3  Links Creation and Usage Links are very vital for any web page to navigate through the site and so is also with CSS3. In CSS3 it is possible to handle links even more powerful and effectively as it is possible to handle various states of links which are link visited hover and active states. Also it is possible to create buttons and boundaries

2. CSS3 Wrapping

   CSS3 Wrapping Wrapping is a vital property for proper display of contents in web pages for if wrapping is disabled then the user could not display and view long lines that goes outside the window boundary and thus becomes useless. Thus in this context it becomes necessary to handle preformatted text on web pages which can be done in CSS3 in several

3. CSS3 Opacity

   CSS3 Opacity Need for Handling Transparency Before the introduction of features in CSS3 for handling transparency of images the web design though took over in various aspects had a great limitation embedded in it. That is the print design can handle overlaying of text on a background which could either be an image or color background. This overlaying

4. CSS3 Advantages

   CSS3  Advantages Having got a detailed idea of CSS3 and its features with some of the vital attributes of CSS3 let us see the advantages or uses of CSS3 in brief in this section. There are numerous and variety of areas in which CSS3 makes it mark and thus users finds it one of the comfortable and powerful tools for usage thus making it a reason

5. CSS3 Multi Column Feature

   CSS3 Multi-Column Feature CSS3 Multi-Column Module is a vital feature present in CSS3.This feature enables users to flow the content of an element into multiple columns. The CSS3 Multi-Column Module is a important feature because it gives users the following features or advantages there is no need to for users to scroll up and down while reading the

6. CSS3 Selectors

   CSS3  Selectors The main usage of Cascading Style Sheets selectors is that it is used for binding style properties to elements in the document. The Cascading Style Sheets Level 3 selectors are compatible with many modern browsers thus making its usage more powerful and popular. In general a CSS selector is made up of a pattern that is matched against

7. CSS3 Introduction

   CSS3 - An Introduction Cascading Style Sheets Level 3 is known as CSS3 for short. Cascading Style Sheets level 3 is the most recent approach of CSS which has a modularized approach which helps to differentiate the connections between the different parts of the specification and also helps in attaining a systematic approach with more flexibility. The

Starting With CSS3

10 Tips on designing a fast loading web site

1. Minimize the use of images - The key to a fast loading web site is to minimize the use of images. Images do enhance a page but don't make 80% of your web site only images. Instead break it down as much as possible to simple HTML. Notice the popular sites like Yahoo, Google, Ebay, Amazon etc., they have very few images because the load time is more important. Very often simple designs are the best.
2. Optimize images for the web - Once you have decided on the images that you need on your site, make sure that it is optimized for the web. They should be in the gif or jpeg format. You can also minimize the size of the image by choosing the number of colors you need, from the color palette. The less the colors you choose, the less the size of the image. You can also use online tools like Gif Wizard to optimize your images or to get a recommendation on how to cut down the size of an image.
3. Use Tables creatively - You can get some great looking designs by using tables creatively . Tables load very fast because it is just HTML code. Tables can be used in the homepage, menus or anywhere you like. Check out our homepage and our menus to see how we have used tables in our site.
    Read more on Using HTML Tables Creatively
4. Cut down the use of animated gifs - Don't use animated gifs unless it is necessary. Animated gifs take a long time to load and can also be very irritating. But since they catch your attention you could use small animated gifs to draw a visitor's attention to a particular section of your site.
5. Design simple icons - Instead of using big, bulky images use simple and small icons that add a little color and draw the attention of a visitor. We have used small icons in our homepage to highlight the main sections of our site.
6. Use background images instead of big images whenever possible - Use background images whenever possible. This is usually a very useful tip for headers and footers. Instead of using an image of width 580 which is a uniform design you can use just a part of that as a background fill. This reduces the size of the web page as the image is small. The code will look like this : <tr background="/images/header_backgroud.gif" width="100%"> 
7. Try out CSS Styles - Have fun with CSS styles to get some cool text effects. Again, a CSS Style is simple HTML code so it loads very fast. You can create cool rollovers using CSS Styles.
   Rollover the text on the right menu to see how we have used CSS Styles to get a simple but nice text effect.
    Check out our CSS Styles tutorial for more cool tips on CSS Styles
8. Use Flash sparingly - There seems to be a lot of hype about Flash but I recommend that you minimize the use of Flash on a site. Don't make entire sites using Flash. It may look great but it takes hours to load and can really put off visitors. If you do want to use Flash use it within an HTML site and make sure it loads fast.
9. Design most of your site in HTML - As much as possible try to design your site using HTML. You can create great designs by just using HTML code. Use tables, CSS Styles and simple fonts to design your site. Minimize the use of animated gifs, Flash, bulky images etc.
10. Keep checking your load time - Last but not least, before you decide on the final design of your web site, check its load time on NetMechanic. This site gives you a free analysis of your web site which is extremely useful. We kept using it to improve our site till we got a report that said good loading time!

We learnt these tips while building our web site. We've enjoyed sharing them with you and hope that you found them useful.

Useful Tips for Effective Web Design

Here are some essential web design tips that every web site should follow. Design your web site by following these tips and I guarantee that visitors will have a great first impression of your site.

1. Fast Loading web site designs - This is the number 1 tip that every web designer should follow. You might design a web site that looks fantastic but few people are going to see it if it takes a long time to load. Your designs should be optimized for the web and should not take more than 15 seconds to load. Remember, you might have a great design but very few people are going to see it if it takes a long time to load. Click here to for 10 tips to fast-loading web pages.
   
2. Clear Navigation - Once a visitor has come to your site you need to make them go through your site. To do this you need to have clear navigation. Make sure all your important links are at prominent places. Preferably right on top - that's usually where a visitor first looks. Make use of menus on the right and the left. Try to link to as many pages of your site. Let your information be accessible from all parts of the site. You never know what a visitor may be interested in. Try to also use the footer for your important links. Click here for navigation tips.
   
3. All Resolutions - Today, there are computers with all kinds of resolution. They range from 640 x 480 to 1024 x 768 and go even higher. Your job is to design your site for all these resolutions. The best way to do this is to design your site in terms of percentage and not pixels. Click here to learn how to design websites for all screen resolutions.
   
4. Browser Compatibility - Make sure your site is browser compatible. Your web site should look good in Netscape as well as in Internet Explorer. Don't stop designing your site as soon as you find that it looks great on IE. Usually Netscape gives some problems, especially when you try doing complicated HTML designs. But don't give up too soon, usually with patience these problems can be easily fixed.
   
5. Readable and professional looking fonts - Don't ask me how many times I've clicked out of a site just because the font is in Comic Sans and the color is a bright pink or green. Just by looking at the font you feel that the site is not a professional site. Don't use Comic Sans and other fancy fonts that may not be available on most computers. If the font you use is not available in a visitors computer the web site will use the default font of your computer which is much worse. So try to keep to common and professional web fonts. The fonts that I always stick to are Arial and Verdana.
   
6. Minimize the use of images - I believe that sometimes simple designs are the most effective for the web. Keep your site simple but neat. Don't clutter your page with big, bulky images that take ages to load. Instead use tables creatively and design eye - catching icons that will draw a visitor's attention to a particular section of your site. Tip - Visitors are usually more interested in content than in design.
   
7. Use of white space - Try not to clutter up your page with too many images, backgrounds and colorful fonts. Again use the Keep It Simple principle by minimizing the use of graphics and using a lot of white space. White space gives a sense of spaciousness and overall neatness to a site. Notice the white space in our site.
   
8. Check for broken links - Always check for broken links within a site before uploading it to your web server. In Dreamweaver you can check for broken links by right clicking on any file in the Site Files Window and then clicking on Check links - Entire Site. If you don't have this facility you need to upload your site and then check it using online tools like Net Mechanic.

6 steps to take if your jQuery is not working

1. The file is not there or does not exist

People tend to become upset and/or frustrated (Including me) when something simple doesn’t work, such as jQuery not working. Before you do anything, navigate to your jQuery file and check that it is exactly where it should be.

Also make sure that you have the correct html file open – I have actually tried to load files using the incorrect html, so the path would have been correct if I had the correct html file open. Don’t ever be too proud to check the absolute basics.

2. Incorrect File Path

This is a common problem and it is the first thing I check when I’m having a javascript problem (I actually do step 1 and 2 with my style.css as well). After checking that the file path is correct, I double check by viewing the page source using Firefox, I then click on the .js link. If it opens up the jQuery file (Double check it is opening the correct file) then the destination is correct. If it does not, or it opens a page-not-found, then I know I have a problem with my file path.

3. Script load order

Help! jQuery not working, however it is loading perfectly!!!

Make sure that it is the first script loaded on your page. This is very easy to overlook. The problem exists because browsers understand javascript and not stand alone jQuery snippets. jQuery turns our code into normal javascript code, so that the browsers can interpret what we are saying. Javascript libraries are shortcuts.
If you were to load a library plugin before the library itself has been loaded, the plugin would be seen as bunch of mumbo-jumbo by the browser. This snippet of code means absolute nothing before the library has been loaded.

4. Plugin not working

Plugins malfunction sometimes, for whatever reason; And people sometimes tend to think that jQuery is not working, which isn’t always the case. When it gets this far I think to myself, “Lets get out the big guns”.
Note: Step 1 and 2 can also be applied to CSS problems.
Even though I have tried step 1, step 2 and step 3, I do ANOTHER test to make 100% sure that it is loading properly. 99.999% of the time this is the final test.
Firstly, I make sure there are absolutely NO plugins, other libraries or anything javascript related on my page, except for the jQuery library and a little script I write beneath it.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){ 

 $("div").css("border", "3px solid red");

});
</script>

This adds a 3px red border to every single div on the page.

If this works, which it really should, the library is loading correctly. You then know that there is something wrong with the plugin(s) and that it is time for more troubleshooting. If you have more than one plugin, try switching the plugin order (This has worked for me on a few occasions), if it is still unsuccessful then remove each plugin and test until something works. Once you find the problem plugin, download it’s latest available version and see if it works.

If the 3px red border does not show up, then it’s time to jump to the next step.

5. Javascript library issues

Do not use multiple javascript libraries simultaneously! There are a few reasons to avoid this even besides the conflicts that could occur. More .js libraries means more html requests and more things to load. It doesn’t matter what .js library you use, use which ever you prefer more but stick with it throughout your project. There are thousands of jQuery plugins, I would say that 99% of the time there is no need for multiple libraries anyway.

6. Javascript disabled/not supported by browser

Make sure you are using a modern browser, and not IE 5.5 or something old and outdated.
It is possible to turn off the javascript support within a browser, and I have had this problem before (I actually turned off javascript support and forgot to turn it back on).
jQuery not working by this point? Try viewing the page with a different modern browser and see if there is any difference or make sure that javascript is enabled within the browser. This is a last resort.

Tips

• Don’t load two different javascript library versions, only one is ever needed.
• I have started loading jquery through Google at all times:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>

The only downside to doing this that I can think of is if you are working offline (Obviously it won’t load) or if Google goes down for whatever reason.

• Step 1, 2 and 3 can be applied to CSS files too. The Step 3 load order could refer to the IE specific stylesheets loading before the main one.
• jQuery not working? Then follow the 6 steps again 
• Feel free to comment and ask for help if any is needed.

About Sindhusoft Technologies

Sindhusoft in an India based premier web design firm. We have been providing solutions to clients across the world for over 3years and boast of extensive experience on website designing and website development projects. Our processes insure that each project is developed with best practices and quality is not compromised while keeping your financial goals in sight. Sindhusoft  is web design firm which is ideally positioned to provide low cost, high, end quality web development and design work for the virtue of being based in India and having at its disposal, highly skilled web developers.