• PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • PHP Jobs
  • Advertisement
PHP Lift
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Youtube
    • RSS
Home
CSS 3

Cool CSS3 features

March 15th, 2017 Ivan Dimov CSS 3 0 comments

Facebook Twitter Google+ LinkedIn Pinterest
Cool CSS3 features

The calc function

With CSS3, you can input results of calculations as unit values with the calc function. Here is how you can use it:

width: calc(100% – 30px);

This function is obviously useful when you need specific units as it saves you the time to make calculations on your own and give fixed units.

CSS3 variables

CSS3 variables are incoming. One example is the currentColor variable which allows you to give the current color of the element (the color property) to other properties, it works as an alias, sparing you from writing again the color’s code. It can be used in the following way:

p {

  color: crimson;

  border: 5px solid currentColor;

  box-shadow: 0 0 5px solid currentColor;

}

Background attachment

Background attachment allows you to define whether a background, such as a background image, should scroll as the user scrolls down the container or whether it should stay and look fixed no matter how high the container is and how much the user scrolls. You use it in the following way:

p {

background-image: url("https://cdn.pixabay.com/photo/2015/02/14/10/16/cat-636172_960_720.jpg");

 background-attachment:scroll;

 height:400px;

}

Possible values for the property is scroll and fixed.

Clip path

Clip path allows you to make the element boxes in custom shapes. Here is how it works:

clip-path: circle(900px at 0 100px);

It will make the box circular depending on the values given.

 clip-path:  inset(50px 25px);

It will cut the box depending on the values given:

And the box without inset looks like this:

Using a polygon for the element box looks like this:

 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

For all possible values of the property, you can visit https://developer.mozilla.org/en/docs/Web/CSS/clip-path

Fixed positioning

CSS3 allows for the position: fixed property value. This would make the element static when the user scrolls the page. In other words, the element would be always visible in the corner where you place it with other properties such as top and bottom,

Element’s opacity

With CSS3, you can control the opacity of any element. Values could be units between 0 and 1. Here is an example:

p {

  background-image: url("https://cdn.pixabay.com/photo/2015/02/14/10/16/cat-636172_960_720.jpg");

  background-attachment:local;

  height:200px;

  opacity:0.3;

}

And the effect can be seen in the image below:

CSS3 Transforms

CSS3 offers a few ways to transform elements.

Rotate works with degrees (from 0 to 360).

transform: rotate(9deg);

A rotation of 9 degrees of the cat background looks as shown below:

You can also translate elements (which moves them in the x and y axis), scale elements which makes them expand or shrink in size or skew them.

Below is an example of the skewed cat:

transform: skew(23deg);

For more information on the wonderful possibilities of CSS3 transforms, visit https://www.w3schools.com/cssref/css3_pr_transform.asp

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)

Related

Facebook Twitter Google+ LinkedIn Pinterest
Next article Useful JavaScript globals
Previous article Sanitizing input with PHP and JavaScript

Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Advertisement
Recent Posts
  • Stripe Payment Gateway Charge Credit Card with PHP
  • How to building responsive WordPress theme using Bootstrap
  • 6 Reasons Laravel is the Top PHP Framework in the Web Development Industry
  • 9 Best Programming languages you should learn in 2021
  • 12 Reasons to Choose PHP for Developing Website
Categories
  • API
  • Bootstrap
  • CSS
  • CSS 3
  • Designing
  • Framework
  • Guide
  • HTML
  • HTML 5
  • JavaScript
  • jQuery
  • MySQL
  • Node.js
  • oAuth
  • Payment
  • PHP
  • Python
  • Social
  • Tips
  • WordPress
Weekly Tags
  • PHP
  • api
  • How to
  • PHP Basics
  • Programming Habits
  • HTML5
  • PHP framework
  • Download
  • laravel
  • css
  • About
  • Privacy Policy
  • Back to top
© PHPLift 2020. All rights reserved.