10 POWERFUL THINGS YOU DIDN’T KNOW ABOUT CSS3, CSS3 Training in 2015

Unknown

02:39

0

CSS3 Tips

CSS3 Tips in 2015: - 

Cascading Style Sheets, the next level. CSS3. With an array of increased creative opportunities, CSS3 is much better than its predecessor CSS2, and gives developers that much-desired control on a web page’s look and feel.

We took a closer look at CSS3 and want to show you 10 things you might not know about CSS3.

What’s new with CSS3?

There’s a huge amount of improvements over the last version, like the ability to easily add video and 3D objects to your webpage. But then, all this obvious flashiness is merely the tip of the iceberg.

In fact there’s much more that can be done on this platform. With an ocean of possibilities out there, this post is about the top eleven. Here are some things you can do with CSS3 that you probably overlooked. And if you have your own experience, don’t forget to add a comment in the comments section below.

Backwards compatible

This is actually pretty well known, but I thought I’d put it in here as well. So, before you start wondering whether you’ll have to ditch all that work you did in the previous versions, here’s some good news.

CSS3 is completely backwards compatible with earlier CSS versions. That old site running on a previous CSS version can be reworked with CSS3.
Also, with browsers already compatible to CSS2 and other versions, changes with CSS3 are reflected perfectly as well. And if you just want to add to it and not rework the entire site, that’s ok, it’s all possible!

PS: Keep in mind though, you won’t be getting the added speed benefits everywhere if only a part of your site is built with CSS3.

Independent modules, simplified working

Unlike CSS2 which was comprised of a single document, CSS3 is broken up into many individual modules, improving both functionality and ease of working.

The advantage?

Well, it makes CSS3 a whole lot easier to handle given its complexity.  Doing this the CSS2 way, would’ve made things very difficult to manage.

The most important modules include Selectors, Color, Box Model, Backgrounds and Borders, Text Effects, 2D/3D Transformations and user interface.

The old CSS specifications are present too, though they have been split into small functional pieces. This makes handling them much easier. Also, keep in mind that these modules are currently under varied stages of recommendation through the W3C.

Easy to change, easier to view

With the modular structure and new functionalities, CSS3 makes it much easier to make changes.  This is possible because individual modules can be easily changed and integrated into the main system.

Finally, this allows independent individual module testing as well, which makes it easier to pin-point issues and make corrections where required.

A major concern of all web designers is on how to easily make the site available on different media and devices. CSS3 improves that adaptability making it easier to view your site on mobile devices or even take an e-reader-friendly approach.

Faster development speed

CSS3 has also managed to set new benchmarks in development speed. Many parts of its functionality now include what used to require a CSS – Javascript combo. This way, time is saved during production, during loading and finally towards the end product. In addition the improved flexibility that comes with the modules reduces turnaround times as well.

The Smashing Magazine compared the speed of website built with CSS to the same one with CSS3. The results are interesting, as CSS3 really pays off when it comes to production and load times.

Cross browser compatibility and platform independence

Today’s end users have plenty of browser options to choose from. This makes browser compatibility a major challenge for all web developers.

CSS3 enjoys a wider range of browser support, which was not possible before. Moreover, despite CSS3 not being included in the W3C standards, many browsers are offering support to its new features.

Also tools like the CSS3 Generator, provide designers a hassle free design process. Developers are provided with code that is automatically generated with vendor specific prefixes. CSS3 offers a level of platform independence not seen before and is supported by new versions of all the important web browsers.

Better backgrounds

Backgrounds no longer need to be static and boring. What previously needed additional scripting and programming, can now be done easily with CSS3.

Multiple Backgrounds

While CSS3 retains its box model, many new style properties have become a part of the parcel. Multiple background images can be included on a page and layered.

CSS3 Background size

The CSS3 background-size property allows to specify the size of these background images. The background image can easily be clipped and sized according to the vision of the designer. Most importantly though, all this can happen dynamically.

There’s no reason to have all those different backgrounds for different situations anymore. This is a good thing, because with today’s variety of screens sizes, shapes and resolutions, doing things the old way would’ve been a real mess.

borders and text effects

If you’re bored with the standard border variants of solid, double and dashed, CSS3 brings a host of options. An overlooked added feature is the ability to use an image as a border. The CSS3 border-image property allows you to define an image which can be used as a border.

The border-image property takes the image and slices it into 9 sections. The middle section can be stretched or repeated. See example below:

(source: http://www.w3schools.com/css/css3_border_images.asp)

Moreover, you can also create rounded corners, something that wasn’t possible before. Does this add a lot of flexibility? Check this out if you’re in doubt: https://css-tricks.com/examples/ShapesOfCSS/

---

#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: “”;
top: 30px;
left: -50px;
}

---

CSS3 opens doors to a whole range of text effects too. This is possible with the new cross border tool. Another new feature is the drop shadow effect that used to be a real pain to accomplish.

And then there’s the CSS3 multi column module. This is an important feature that allows for content to flow in columns, thus saving users from too much of vertical or horizontal scrolling for content, all done dynamically. Yum!

Playing with images and animation

Before the content catches a reader’s attention, the page layout, quality of images and animation make the first impact. These used to be elements where CSS had limited capabilities and needed Javascript to achieve anything. But things have changed on that front too. Want to make an image look brighter or tone it down?

Well, image filters are available on CSS and you can do that right here, without having to work with any other software. Transitions, gradients and animations often required JavaScript libraries as well, but not anymore.

CSS3 transitions

CSS3 transitions makes it possible to change property values over a given duration quite smoothly. To make use of a transition effect, you must define two things. First the CSS property you want to add an effect to. And the duration of the effect.

The following example shows a red <div> element. The <div> element has also specified a transition effect for the width property, with a duration of 2 seconds:

If we now specify a new value for the width property when a user mouses over the <div> element:

Feature testing

CSS3 lends to improved feature testing thanks to its modular structure. Earlier versions needed plenty of testing time as it would be a mammoth task to identify what was causing a certain issue. However, with the new structural break-up, it is now much faster and more efficient.

Testing for individual modules can be carried out and they can then be integrated into the complete system. This in turn would lead to better systems, easy maintenance, low turnaround times and of course, happier clients! Need a new style to match that new trend? No problem!