Close

THE MOST USEFUL CSS3 FEATURES

Though HTML is the core of a web, we know we can’t imagine it without CSS. CSS is an extremely powerful style sheet language which is used to control the look and feel of the content written on HTML. So we can just think why CSS is more important in web.

As CSS comes with level 3 standard they make their importance in the web more effectively. Media query, Text effects, Animations, Filter effects, Gradients color, Text properties, Background & Border properties, Multi column, Flexbox, Transform etc. are the wonderful features of CSS3.

 

What are the points to be discussed here?

Here we’ll discuss on some of the most powerful and useful CSS3 features. They are as following:

1- CSS Calc

  • Addition(+)
  • Subtraction (-)
  • Multiplication (*)
  • Division (/)

2- Advanced Selectors

  • :checked
  • :empty
  • ::placeholder-shown
  • :target

3- Filter effects

  • blur
  • brightness
  • sepia
  • contrast
  • saturate
  • hue-rotate
  • grayscale
  • drop-shadow

4- 3D Transforms

5- Flexbox

6- Ellipsis

 

1- Calculating Values With calc()

CSS calc() is a powerful calculation method to do simple maths for the replacement of any number of value. It allows four type of math operators. Those are;

  • Addition(+)
  • Subtraction (-)
  • Multiplication (*)
  • Division (/)

We can use CSS cal() without any preprocessors [ SASS, LESS, STYLUS, etc ] because it’s a native css math function. Preprocessors can only mix units with a fixed relation between them, but CSS cal() can calculate any mix units like percentage and pixels. It will be working at the render time.

As mentioned above, we can use CSS calc() to determine lengths like width, height, margin, padding, font-size etc.

This is the simple subtraction example on width property.

See the Pen CSS calc by Nikhil Toobler (@nikhil-toobler) on CodePen.

Browser supportCan I Use

2- Advanced Selectors

CSS selector is the part of CSS rule, it actually selects the specific HTML element you want to style. Let’s look at all the different kinds of modern selectors available.

:checked
The :checked CSS pseudo-class selector represents any radio, checkbox or option element that is checked or toggled to a state, so :checked selector is only associated with input elements like radio, checkbox and select. The :checked selector will be working when a user selects or checks on the input element, else there will be no matching case detected.

See the Pen Gqvrpd by Nikhil Toobler (@nikhil-toobler) on CodePen.

:empty
The :empty pseudo-class selector will select elements that contain either no content or an HTML comment. It’s useful for hiding empty elements that might cause weird spacing (e.g. they have padding, height, etc..).

See the Pen :empty css example by Nikhil Toobler (@nikhil-toobler) on CodePen.

::placeholder-shown

We everybody know the wonderful ::placeholder pseudo selector. It helps to style the placeholder text from the input fields and textarea element, but it all happens only when the placeholder text is not at the input field. Here ::placeholder-shown helps us to make style the input field also.

See the Pen :placeholder-shown example by Nikhil Toobler (@nikhil-toobler) on CodePen.

:target

The :target pseudo selector provides styling capabilities for an element whose ID matches the window location’s hash. It depends on something called a “fragment identifier.” The :target selector would be helpful in trendy single page website, when the user clicks on the menu, the page will scroll to correspondent element. At that time the selector help us to find which element is focused once the scrolling is completed.

This is the example;

URL is

http://www.toobler.com/#contact

HTML is

<section id=”contact”>
...
</section>

This CSS selector would match

:target{
   border-left: solid 10px orange;
}

See the Pen :target css example by Nikhil Toobler (@nikhil-toobler) on CodePen.

Browser support Can I Use

3- CSS3 Filters

CSS3 filter is one of the most powerful native features of CSS, which is able to achieve varying visual effects on media elements (image, video, etc). The filter applied on the element is rendered. It can be helpful to apply some awesome photoshop filter effects (blur, brightness, sepia, contrast, grayscale, saturate, etc) on the element without using any kind of multimedia software. Also, this feature will be very handy on the dynamic images or videos, which means when a user uploads a new media in the server, CSS3 Filter will automatically apply the existing effects on them, even in a plain media. And it can be a great time saver even for a beginner who has no knowhow on multimedia platform.

Here is the list of some popular and useful CSS3 Filter effects and their examples.

  • blur
  • brightness
  • sepia
  • contrast
  • saturate
  • hue-rotate
  • grayscale
  • drop-shadow

CSS filter on image

See the Pen CSS3 Filter Effects by Nikhil Toobler (@nikhil-toobler) on CodePen.

CSS filter on video

See the Pen CSS3 Filter for Videos by Nikhil Toobler (@nikhil-toobler) on CodePen.

So what’s the differences between box-shadow and drop-shadow?

It’s a common question 🙂 . Most of the developer might be very familiar with  box-shadow Property comparing with drop-shadow. The best benefits using drop-shadow is it will apply a shadow to a PNG image around the edges of the image and not the rectangle boundary, like box-shadow does. You will understand as you check the below example;

See the Pen Difference Between box-shadow & drop-shadow by Nikhil Toobler (@nikhil-toobler) on CodePen.

 

Browser supportCan I Use

4- 3D Transforms

3D Transform feature is one of the delightful features of CSS3. It is used to convert elements to 3D transformation. 3D transforms give us a Z-axis. To fully see the effects of Z-axis transforms, we need to use transform-style in preserve-3d. It’s very similar to 2D CSS transforms. The basic properties are translate3d, scale3d, rotateX, rotateY and rotateZ. translate3d and scale3d take three arguments for x,y and z.

Basic Example

See the Pen 3D rotate Example by Nikhil Toobler (@nikhil-toobler) on CodePen.

Check out my simple experiment. You may know how 3D transform help for showcasing product in a website

See the Pen jAaAwb by Nikhil Toobler (@nikhil-toobler) on CodePen.

Then why Z-axis?

You might be confused why 3D transforms give us a Z-axis. Let’s take an example for 6 faces Cube.

#cube .front { -webkit-transform: rotateY(0deg) translateZ(100px); }

#cube .back { -webkit-transform: rotateX(180deg) translateZ(100px); }

#cube .right { -webkit-transform: rotateY(90deg) translateZ(100px); }

#cube .left { -webkit-transform: rotateY(-90deg) translateZ(100px); }

#cube .top { -webkit-transform: rotateX(90deg) translateZ(100px); }

#cube .bottom { -webkit-transform: rotateX(-90deg) translateZ(100px); }

Note here that the translateZ function comes after the rotate. The order of transform functions is important. Take a moment and soak this up. Each face is first rotated towards its position, then translated outward in a separate vector.

See the Pen 3D cube example by Nikhil Toobler (@nikhil-toobler) on CodePen.

Browser supportCan I Use

5- Flexbox

Flexbox is the short of Flexible box. It’s a new layout mode in CSS3. Using Flexbox, positioning child elements becomes much easier, and complex layouts can be achieved simply with cleaner code.

“Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.”

Some of the most popular flexbox properties are below;

For Flex container

  • display: flex ;
  • flex-direction: row | row-reverse | column | column-reverse ;
  • flex-wrap: nowrap | wrap | wrap-reverse;
  • align-items: flex-start | flex-end | center | baseline | stretch;
  • justify-content: flex-start | flex-end | space-between | center | space-around;
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;

For Flex items

  • align-self: auto | flex-start | flex-end | center | baseline | stretch;
  • flex-grow: number;
  • flex-shrink: number;
  • flex-order: number;

How use Flexbox?

Starting with Flexbox is a simple method. Suppose we have a parent element  and they have some child elements, here we should declare by settings display: flex; in the parent element to working flexbox. This is the basic example of flexbox, the codes seems below;

.flex-parent {
  display: -webkit-flex;
  display: flex;
}
.flex-parent .child-item {
  background-color: #fff;
  color: #000;
  padding: 10px;
  margin: 10px;
  font-size: 13px;
}

The result should be like this (Basic example with display direction is row)

The above example shows three flex items. They are positioned by default: along the horizontal flex line, from left to right (If page direction: ltr;).

Flex-direction example chart

See the Pen Flexbox Example by Nikhil Toobler (@nikhil-toobler) on CodePen.

 

Browser supportCan I Use

6- CSS ellipsis

CSS3 offers a surprising feature for truncating strings with declaration of ellipse. It will help for maintaining perfect grid or layout in the web when coming flash flood texts. And it will allow to avoiding uses of excessive scripting like javascript, php, etc…

Ellipsis result is the combination overflow:hidden; property that can be set to hid the over contents, white-space:nowrap; to determine the way text is laid out and the text-overflow: ellipsis; to truncate the text line and adding three dots at the end of the line.

See the Pen CSS Ellipsis by Nikhil Toobler (@nikhil-toobler) on CodePen.

Browser supportCan I Use

Wrapping Up

CSS3 offers amazing features that will be very helpful to make websites/apps of less coded improving flexibility as well as load speed simultaneously. It also gives awesome features to make webpages more alive.

In my perspective, calc function makes less code and avoids the uses of scripts. Advanced Selectors helps to make clean and less markups. Filter effects gives fewer extraneous images and faster page loading. 3D Transforms allows some basic 3D features to play in web. Flexbox provides us with a powerful and highly useful module for layout configurations. Ellipsis is produced to truncating texts without the use of scripting languages. Each feature definitely sounds good and is highly recommended considering the user experience of respected application. 🙂 Hope you enjoyed the article. If you have any doubt or suggestion, please feel free to comment here.

 

Latest stories

  • Things to Consider Before Hiring the Right Developer

    As the tech talent war continues to rage, it is no wonder that hiring the right developer takes forever. Managers face numerous difficulties not just hiring but retaining the right talent.If we are to go by statistics, the average time-to-hire for tech positions in the USA is 35 days. A realistic expectation is crucial while […]

  • 4 Ways To Reduce your App Development Costs by 50%

    Being multi-channel has become synonyms with the modern digital environment.Brand presence in these channels is critical to reach potential customers making it a vital business challenge of  the digital era.  Mobile apps have become an integral part of modern business. They are an extension of your brand. Considered as the most powerful business tool, apps […]

  • Tips to build a productive startup culture in your development company

    The word Startup paints a picture of tech-savvy professionals driving casual dress codes and sipping coffee from biodegradable cups in a space with enviable interior design, ping pong tables and bean bags. Ouch, the stereotype hurts! There is more to startups than bean bags and beer taps, it is the startup culture that fuels innovation […]

Leave a Reply

Your email address will not be published. Required fields are marked *