CSS3 Proprietary and Emerging Features

CSS3 Proprietary and Emerging Features Reference

Before CSS3, web designers wanted:

Rounded corners

Shadows

Gradients

Animations

Transformations

But CSS couldn't do these easily.

To create a rounded button, developers often used:

Images

JavaScript

Complex HTML

CSS3 solved this problem.

What is CSS3?

CSS3 is the newer version of CSS that introduced:

Better visual effects

Animations

Transitions

Rounded corners

Gradients

Transformations

Responsive design features

What Does "Proprietary" Mean?

When CSS3 was new:

Different browsers implemented features differently

Example:

Google Chrome Mozilla Firefox Safari Opera Internet Explorer

Each browser created its own version.

Vendor Prefixes

To support experimental CSS3 features, browsers used prefixes.

Example:

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;

Around 2009–2013, CSS3 was still experimental.

Browsers implemented features differently:

-webkit-border-radius:10px;   /* Chrome, Safari */
-moz-border-radius:10px;      /* Firefox */
-ms-transform:rotate(20deg);  /* Internet Explorer */
-o-transform:rotate(20deg);   /* Opera */

After CSS3 standards stabilized, browsers adopted the standard property.

Do we ever use prefixes today?

Rarely, but yes.

Some newer or less common features may still need prefixes for older browser support.

Present-Day Practice

Most common CSS3 features now work without prefixes:

1. Rounded Corners (border-radius)

Problem Before CSS3

Developers used images to make it rounded.

CSS3 Solution

<button>Submit</button>
button{
    border-radius:20px;
}

Real Example

Used in:

Login buttons 

Registration forms

Bootstrap buttons

<button>Submit</button>
<style>
button{border-radius:20px;padding:10px 20px;background:#1976d2;color:white;border:none;}
</style>

2. Shadow

Box Shadow (box-shadow)

Without Shadow looks flat

With Shadow

div{
    box-shadow:5px 5px 10px gray; 
}
Text Shadow (text-shadow)
<h1>ANITS</h1>
h1{
    text-shadow:3px 3px 5px gray;
}

Usage

Website logos

Titles

Banners

Opacity (Transparency)

Fully Visible

img{
    opacity:1;
}

Output

100% visible.

Half Transparent

img{
    opacity:0.5;
}

Output

50% visible.

Real Example

Advertisement banners.

Background images.

Watermarks.

Gradients Problem

If we need a background image for any text then we need to use background-image with image.

CSS3 Solution

div{
background: linear-gradient(red,yellow);
}

Smooth color change.

Real Example

Login pages.

Navigation bars.

Buttons.

Transformations

Transform means changing an object's appearance.

Rotate

img{ 
transform:rotate(335deg);
}

Before

□

After

◇

Scale

img{
transform:scale(2);
}

Makes image twice as large.

Translate

div{
transform:
translate(100px,50px);
}

Moves element.

Transitions

Without transition:

Mouse hover

↓

Instant Color Change

Example:

button{              
background:red;
transition:2s;      RED  T R A N S I T I O N 2 Seconds GREENYELLOW     
}
button:hover{
background:green;
}

Smooth change.

Real Example

Buttons.

Menus.

Animations

CSS animations allow elements to change their style gradually over time without using JavaScript.

Syntax

@keyframes animation-name {
    from {
        /* Initial style */
    }
    to {
        /* Final style */
    }
}

selector {
    animation: animation-name duration timing-function delay iteration-count direction;
}
@keyframes move{
from{
left:0px;
}
to{
left:300px;
}
}
div{

position:relative;

animation:move 3s;
}

□

□

□

□

Moves across screen.

Real Example

Loading bars.

Notifications.

Advertisements.

Media Queries

A media query is a CSS feature that allows you to apply different styles based on the screen size, device type, or screen orientation. It is the foundation of responsive web design, enabling web pages to adapt to desktops, tablets, and mobile phones.

Syntax

@media media-type and (condition) {
    /* CSS rules */
}

<div class='card'>Card</div>
<style>.card{padding:20px;box-shadow:5px 5px 10px gray;}</style>

Common Media Query Breakpoints

Most important CSS3 feature.

Problem

Website looks good on desktop.

Bad on mobile.

Solution

@media screen and
(max-width:600px)
{
body{
background:yellow;
}
}

Meaning:

Screen width < 600px Apply these styles

Real Example

Open Amazon on:

Mobile

Tablet

Laptop 
Layout changes automatically.

That is media query.

@media screen and (max-width:600px){body{background:yellow;}}