CSS 3 was developed to make webpages development easier most powerful in functionality. The new features that are used to change the way of designers who used CSS2 for developing websites.
- CSS 3 selectors: The selectors that were available in CSS 2, CSS 3 are including new the things selectors. By using these feature of selector designers can choose DOM elements that are based on their attributes. Designers don’t needs to create classes and IDs for every elements Instead you can utilize the attribute field to style them.
- CSS Rounded corners: This feature of CSS 3 can spruce up a website, it gives the developers the similar rounded corner effects and developers don’t need to write all cod for these effects.
=>CSS is <diveclass=”code”.Box{border:4pxsolidorang;borderradius:35px;width:80px;padding:20px</div>
- CSS 3 Border image: This feature of CSS3 is use to swap out a border with an image. The element border-image also able you to set an image to display instead of a plain solid-colored border on page
- CSS Box shadow: box shadow able the developers to create a drop shadow for an element. Usually this effect is performed by using a repeated image around the element .but using this property box shadow can be performed by writing single and simple line of CSS code.
- CSS text shadow. This new text shadow that is use to add drop shadows to the text on a webpage, it is done by either using an image or duplicating text and positioning it.
- CSS RGBA: CSS 3 introduced a modification and added opacity manipulation in old CSS RGB property. Which simplifies how you control and handle the opacity
CSS is <divclass=”cod”>p{background:RGBA(287,115,190,4)</div>
- CSS 3 Transform: this feature of CSS3 enables rotating web elements on a webpage. As of now if developers want to rotate of an element he uses JavaScript. There some JavaScript extension/plugins are available online for this task.
CSS is <divclass=”code”>p{moztransform:rotate(90deg);webkittransform:rotate(90deg);}</div>
- CSS 3 Multicolumn layout: The webpages today are dividing into column or section, and adjusting this section therefore they display exactly on different types of browsers takes a toll on web developers. CSS 3 solve this problem with multicolumn layout property.
CSS is <div class=”code”>#col{-moz-column-count:2;webkit-column-count:2;</div>
- CSS 3 Web fonts: CSS 3 are provided embedding custom font on a webpage. Fonts are depending on the web pages can use only fonts that are supported by the browser. By using the @font-face, you can set the font form a remote location and can then use it.
CSS is<div class=”code”>@font-face{src:URL(font.ttf”);font-f:”font_bold;}</div>
- CSS 3 Gradient: Gradient effect is a sleek web design tool, it can be a drain on resources if not used correctly using CSS method. Some developers use an image and put in the background for the gradient effects, which increases the page load time on webpage. There are some linear gradient property in CSS3. To date is supported only two browsers safari 4 and chrome and Firefox

Blogger Comment
Facebook Comment