css3 features

Even though CSS3 is not fully supported yet, many web developers are starting to use many of the new techniques introduced. CSS3 has taken a very large step forward in helping web developers get away from importing mass amounts of images/JavaScript and making it possible to do this only by using pure CSS. I am going to go over 10 CSS3 features you will love to start using!

Border Radius

The ability to have rounded corners without images and JavaScript is one of the most sought after features of CSS3. Having to make images for each corner or importing a new library just to get the nice round edge will be a thing of the past with CSS3 Border Radius. With CSS3, we can do this with only a few lines of code:

1

#my_id {

2	height: 100px;

3	width: 100px;

4	border: 1px solid #FFF;

5	/* For Mozilla: */

6	-moz-border-radius: 15px;

7	/* For WebKit: */

8	-webkit-border-radius: 15px;

9

}

Border Images

This is one of my favorite upcoming features, having border images will allow developers and designers to take there site to the next level. You can be as creative as you want and be able to apply it as a border without extra elements. Quite simple code really:

1

#my_id {

2	/* url, top image, right image, bottom image, left image */

3	border-image: url(border.png) 30 30 30 30 round round;

4

}

Box Shadow

Before CSS3, we had to either use a shadow image or JavaScript to apply a shadow or create the shadow directly in the image. Neither of those are fun to do in any way. With CSS3 Box Shadow we can apply shadows to almost every element of our website. Here is how:

1

#my_id {

2	background: #FFF;

3	border: 1px solid #000;

4	/* For Mozilla: */

5	-moz-box-shadow: 5px #999;

6	/* For WebKit: */

7	-webkit-box-shadow: 5px #999;

8

}

Multi-Column Layout

Another CSS3 feature that developers, including myself are very eager to start using is the Multi-Column Layout. It offers a new way to arrange text in more of a “news paper” type way. You have the choice to pick the amount of columns, the column width, column gap width, and column separator. A feature like this was not possible before CSS3. Here is how you do it:

01

#my_id {

02	text-size: 12px;

03	/* For Mozilla: */

04	-moz-column-gap: 1em;

05	-moz-column-rule: 1px solid #000;

06	-moz-column-count: 3;

07	/* For WebKit: */

08	-webkit-column-gap: 1em;

09	-webkitcolumn-rule: 1px solid #000;

10	-webkit-column-count: 3;

11

}

*Note: column-space-distribution is not implemented yet, this feature is to describe how to distribute leftover space.

Multiple Backgrounds

In the past, having layered backgrounds required you to create more than one element. But now, with CSS3 you can have multiple backgrounds on a single element. This will eliminate a huge annoyance that we have had to deal with in the past. Here’s how it works:

1

#my_id {

2	background:

3	url(topbg.jpg) top left no-repeat,

4	url(middlebg.jpg)center left no-repeat,

5	url(bottombg.jpg) bottom left no-repeat;

6

}

@font-face

Now, this feature is not entirely new to CSS3, it is supported in CSS2 and has been in implemented in IE since version 5, however that implementation relied on Embedded Open Type. The new CSS3 implementation will allow developers and designers to use any licensed TrueType “.tff” or OpenType “.otf” ” in their web designs. Here is how to use the custom fonts:

1	@font-face {

2	font-family: “my-font”;

3	src: url(my-font.tff) format(“truetype”);

4

}

1

#my_id {

2	font-family: “my-font”, sans-serif;

3

}

Attribute Selectors

In CSS3, three additional attribute selections are available for matching substrings of the attribute value. Here are a few examples on how to use them.

Select elements with title prefix of “t”:

1	p[title^=t] {

2	/* Attributes to give them. */

3

}

Select elements with title suffix of “t”:

1	p[title$=t] {

2	/* Attributes to give them. */

3

}

Select elements with title contain at least one instance of “t”:

1	p[title*=t] {

2	/* Attributes to give them. */

3

}

:nth-child() and :nth-of-type()

The new :nth-child() pseudo-classes is a way to select elements using a formula. The syntax for both is :nth-child(an+b), almost like a linear equation just different variables. The only difference between :nth-child() and :nth-of-type () is that nth-of-type() only considers elements of the given type.

1	/* First, Fourth, Seventh, etc..

2	/* Any type of element */

3	p:nth-child(3n+1) {

4	background: #F00;

5

}

1	/* First, Fourth, Seventh, etc..

2	/* Only li elements */

3	p li:nth-of-type(3n+1) {

4	background: #F00;

5

}

Opacity

Probably the favorite feature to come in CSS3 is opacity. It is also probably the most already used CSS3 feature as well. There have been ways to use opacity in the past with IE hacks and other methods but the new CSS3 property will allow it to me done much easier. Here’s the code:

1

#my_id {

2	background: #F00;

3	opacity: 0.5;

4

}

RGBA Colors

This new feature ties in with opacity, with CSS3 there is RGB and also RGBA. Now hopefully you know that RGB stands for “red, green, blue”. The “a” in RGBA stands for alpha (also known as opacity). This will make a lot of code shortened by tying in that extra property into an existing one.

1

#my_id {

2	background: rgba(255, 212, 45, 0.5);

3

}

Wrapping Up

It will still take a while before CSS3 is complete, even longer till every browser supports it (IE). But, we can start using them in are designs for browsers that do support them and just not have the extra features for the older browsers. All in all, just get excited, CSS3 will move the web development world in a good direction.

We’ve set up a demo section for you, click on the Live Demo button and play around or just Download the source files.

Become expert in web designing/development with our online training course.

Why the business “flakes out” by websolutioncentre best website designing company in delhi

Why the business “flakes out”

In the website design industry there are 2 problems:

The designer will flake out – This probably doesn’t occur as often as a customer flaking out but it sure does happen. There are 3 reasons why a website designer will quit a job or lose a job…

Don’t know what they are doing – Yes, they don’t know what they are doing. Just because they say they know how to design a website doesn’t mean they know how to do every part of it. There is too much to learn in designing websites. Many web designers are not honest about what they can do so they get stuck when doing the website because they are not honest from the beginning and that’s why they fail.

Bad Communication – Bad communication is a big part of why web designers lose a job. A web designer will try to merge his ideas with the customer and when the customer strictly knows what he/she wants then it becomes a problem. Websolutioncentre believes that if a customer comes and knows exactly what they want, then that is exactly what they shall get. When we design websites we don’t force anything but we make suggestions instead. Many designers think they know what you want but that is a lie. If you have ever gone on a website design website and seen the quote “We know what you want” please don’t believe them. This is all but a scheme to make you feel better. No designer knows what a customer wants because they don’t have their brain. It’s quite simple!

The customer won’t tell them what they actually want – This happens very often and is somewhat very similar to bad communication. Many customers that come to us will say “just build it” so we start building it and the customer is not happy with the website design. They said to just build the website without any specifics, so as a designer we build it to the best of our abilities. After we build the website the customer wants all sorts of changes or just wants it redone. Customers have no idea how frustrating it is to establish a beautiful piece of work and then have it remodify it all over again especially when the customer did not tell you the specifics. This is why Websolutioncentre uses a questionnaire that will determine the look and feel of your website design. Our san diego website design company uses methods to get rid of the fluff and make sure the project gets done. Without having a questionnaire filled out by clients there is no way a client can interpret their idea of their own business image. Another problem is that the customer will think they told you what they want but didn’t. Many times when designing a website for our clients they had told us they wanted a slideshow with this amount of pictures. So we do the slideshow and later on the customer says they want them in this order and this size. We just created a wonderful slideshow and have to re-do the slideshow all over again. A lot of designers will complain because the customer isn’t doing their part and we don’t blame them. Sometimes projects of websites are dead for a while because the customer hasn’t had the time to give us the stuff we need.

The customer will flake out -This probably happens more than the designer flaking out. A man does what a man does and that is to provide unlimited wants with limited resources.

Not Serious - The customer flaking out 95% of the time is because they weren’t serious about designing a website from the start. As a website designer we know that 75% of our clients we get aren’t serious buyers because lets face it many humans are impulsive when it comes to wants and needs. Our website design process prevents any type of customer ripping off our time by having a 50% payment at the beginning and a questionnaire that is mandatory to fill out.

Busy - Every website designer has run into an extremely busy business man. This person is always doing things related to his/her business that she forgets all about the person who is waiting to complete their job. A website design person will typically wait to get called back after a certain period.

Not enough money - If business people don’t have money then certainly us website design people in the industry don’t! Websolutioncentre often runs into people who run out of money and can’t receive final payment. Typically what happens in this situation is the customer drops the project because their business has failed or their wallet. This hardly ever happens ,but Websolutioncentre hopes this economy gets better so that it doesn’t increase!

Website Designing Company in Delhi

Javascript Pros and cons

Javascript Pros and Cons

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML It was released in January 2006 at BarCamp NYC by John Resig. Used by over 41% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today

jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2.[4] jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. Using these facilities, developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. This contributes to the creation of powerful and dynamic web pages.

Microsoft and Nokia have announced plans to bundle jQuery on their platforms,[5] Microsoft adopting it initially within Visual Studio[6] for use within Microsoft’s ASP.NET AJAX framework and ASP.NET MVC Framework while Nokia has integrated it into their Web Run-Time widget development platform.[7] jQuery has also been used in MediaWiki since version 1.16

Until the availability of Javascript libraries such as jQuery and Mootools adding animation and interactive features that don’t require reloading a web page were out of reach for many web designers/developers unless they used Flash.

This was largely due to Javascript implementations not being consistent in major browsers. Without using a Javascript library you need extensive knowledge about the inconsistencies between the browsers and extensive knowledge about Javascript in order to work around them.

jQuery and MooTools offer a library of routines that are cross browser compatible which greatly reduces the learning curve. These libraries also offer functions to handle many routine tasks making Javascript programming faster and easier to learn.

Pros

• Small size
• Using jQuery or other libraries reduces the learning curve
• Hundreds of free professional quality programs
• Can add interactivity to web page elements and tags
• Skinnable Form Components UI
• Compatible with more browsers than Flash including iPhone, cell phones, PS3, PSP

Cons

• Features not as extensive as Flash
• Complex features may not perform as quickly as flash
• 3D features are limited
• Users can disable Javascript support
• Source Code Not Protected

WEB SOLUTION CENTRE
WEBSOLUTIONCENTRE.COM