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 likewidth, height, margin, padding, font-size etc.
This is the simple subtraction example on width property.
Browser support– Can 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.
: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..).
::placeholder-shown
::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.
: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;
}
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 usefulCSS3 Filter effects and their examples.
blur
brightness
sepia
contrast
saturate
hue-rotate
grayscale
drop-shadow
CSS filter on image
CSS filter on video
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 withdrop-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;
Browser support– Can I Use
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
Check out my simple experiment. You may know how 3D transform help for showcasing product in a website
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.
Browser support– Can 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
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
Browser support– Can I Use
Want to know more about Flexbox?
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 add three dots at the end of the line.
Browser support– Can I Use
