articles

Home / DeveloperSection / Articles / CSS-3 And CSS-4

CSS-3 And CSS-4

Anonymous User8567 23-Aug-2014

In this article I’m explaining about CSS 3 and CSS 4.

CSS 3:

CSS3 contains several new important features to enhance your designs, it has completely opened new possibilities for designers. With CSS3 and HTML5, one can now create extremely modern and very stylish web designs, loaded with effects and animations. But CSS3 selectors are relatively new and are not supported in older browser. CSS3 is an update to CSS2 that maintains compatibility with all of CSS's features -- CSS3 doesn't deprecate any of the CSS code. The CSS3 code is designed to make Web pages look better and load faster as well as reduce development time to build pages in a user's browser. CSS3 makes Web design less reliant on image files for page design elements and reduces file transfer requests and download time by using fewer images. CSS1 focused on appearance formatting, whereas CSS2 added positioning capabilities for text and objects. Older browser versions like IE 9 and prior do not widely support CSS3's added features, which can require extra development time to maintain CSS code.

CSS 3 Added Rounded Corner and Gradients

Creating gradients and rounded corners for your divs can be done without using images – all you need to do is add a few lines of code with CSS. These are the commands that we will use for modern browsers, such as Firefox, Safari and Chrome. CSS3 includes comparable features that can be added with a few lines of code.

background: -moz-linear-gradient(top, #ae0 0%, #999 35%, #efe 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efe),

color-stop(35%,#b5b5b5), color-stop(100%,#f60));

CSS:

.circle1 {
    height: 150px;
    width: 200px;
    border-radius:50%;
    background: -webkit-radial-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(red, yellow, green); /* For Fx 3.6 to 15 */
    background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
}
 
.circle2 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(circle, red, yellow, green); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(circle, red, yellow, green); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(circle, red, yellow, green); /* For Fx 3.6 to 15 */
    background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */
}

Html:
<div class="circle1"></div> 
 
<div class="circle2"></div>
Output

CSS-3 And CSS-4

CSS3 Adds Animation Features and Text Effects

CSS3 has a handful of features not present in CSS to improve how your page elements look. With CSS3, Web developers can add a text-shadow to text to make it easier to read or add visual flair and can force line breaks within longer words to make them fit inside columns with word wrap. Before CSS3, Web developers needed to code animation in scripting languages like JavaScript and jQuery; CSS3 adds several animation features to the design layer. The W3C is still working on a Web animations standard to work out compatibility issues between the different animation techniques.

Animation

CSS:

.animation-container{
       width: 300px;
       height:300px;
       margin: 0 auto;
       position:relative;
       overflow:hidden;
}
 
.earth{
       position:absolute;
       top:0;
       left:0;
       width:100%;
       height:100%;
       background:url(img/planet.png) no-repeat center center;
}
 
.earth-4-rocket{
       position:absolute;
       top:0;
       left:0;
       width:100%;
       height:100%;
       background:url(img/rocket.png) no-repeat 50px center;
       -webkit-animation:orbit 2s linear infinite;
       animation:orbit 2s linear infinite;
 
       transition:background-position 0.8s;
}
 
.container:hover .earth-4-rocket{
       background-position:80px center;
}
 
@-webkit-keyframes orbit {
       from {
              -webkit-transform:rotate(0deg);}
       to {
              -webkit-transform:rotate(360deg);
       }
}
 
@keyframes orbit {
       from {
              transform:rotate(0deg);
 
              -webkit-transform:rotate(0deg);}
       to {
              transform:rotate(360deg);
              -webkit-transform:rotate(360deg);
       }
}

Html:
<div style="width: 30%; margin: 30px auto;">
    <div class="animation-container">
        <div class="earth"></div>
        <div class="earth-4-rocket"></div>
    </div>
</div>

 

Output

Text Effects


CSS:

h1 {
    text-shadow: 5px 10px 5px #19E4E4;
}
Html:
<div style="width: 50%; margin: 30px auto;">
    <h1>MindStick Software PVT. LTD.</h1>

</div>

Output

CSS-3 And CSS-4

CSS 4

CSS4 come out of now here, just as we were getting used to the fact that CSS3 is here and will stick around for some time. Browser vendors are working hard to implement the latest features, and front-end developers are creating more and more tools to be able to work with the style sheets more effectively. But now, on hearing about CSS4, We’ve been working hard to spread the goodness of CSS3, and now it’s obsolete? In fact, nothing’s wrong. It’s just natural evolution — a process that will help CSS.

Pseudo Class

In CSS3, the negation pseudo-class: not can be applied only to simple selectors, pseudo classes, tags, identifiers, classes and class selector’s parameters. Pseudo elements and such combinations like UL LI or UL > LI was not supported, also we could not include the negation pseudo-class: not in itself. In Level 4, however, not ( ) can now be applied to a list of selectors and complex selectors. Now, no longer will selector lists have to be divided into separated blocks of code for each selector.

CSS:
a:link {
    color:#0ae;
}
a:visited {
    color:#0000FF;
}
a:hover {
    color:#000;
}
a:active {
    color:#ffd800;
}

Html:
<div style="width: 30%; margin: 30px auto;">
    <a href="http://www.mindstick.com">MIndstick Software PVT. LTD.</a>
</div>

 

Grid-Structural Selectors

In CSS3, columns are possible, but it is very difficult to isolate them for styling. CSS4 allows us to do this an easy method for working with individual columns. Firstly, this is the column combinatory ‘||’ which allows for selection of a column that has a specified set of features. The: nth-column (n) allows for styling of certain columns, starting the count from the beginning. In contrary, the: nth-last-column (n) starts the count from the end. Pay attention, that both: nth-column and: nth-last-column can include ‘odd’ and ‘even’ values. Have a look to the following example.

Example


col.selected || td {
    background: gray;
    color: white;
    font-weight: bold;
}
td:nth-column(1) {
    text-align: center;
}
 

 


Updated 07-Sep-2019
I am a content writter !

Leave Comment

Comments

Liked By