CSS can mimic other interpreted programming languages by enabling features such as variables. The limitation is here that CSS variables can only be used where needed. They cannot be passed around for computational purposes as expected in other multi-purpose programming language variables. Variables in CSS is declared using two dashes ‘–‘ and a name, such as –someVariable. Note that variable names are case-sensitive. Once declared, CSS variables can be assigned toward other CSS properties in this syntax property: var(–someVariable). Here are some practical examples:

Set variable

.box{
  --skin: #FFD700;
}

Accessing variable

.box1{
  background: var(--skin);
}

Accessing variable with a backup value if variable is not found

.box2{
  background: var(--skin, yellow);
}

Since older browsers such as Internet Explorer (IE) on Grandpa’ PC would not render variables correctly. In fact, those browsers will not understand CSS variables. Notice the .box2 class above already has the “fallback” value being set. The keyword ‘var’ will be ignored by IE7 altogether. Thus, it is necessary to code with backward compatibility in mind. A good practice is to set the same declaration twice in this order: 

.box3{
  background: #FFD700
  background: var(--skin, red);
}

How to declare global variables that can be accessed by any classes?

:root {
    --skin: #FFD700;
}

Override root variable values in subsequent classes

:root {
  --skin: #FFD700;
}

.box4{
  --skin: red;
}

How to make things move:
  Use the declaration label “animation-name” and target that name with @keyframes…

.box5{
	animation-name: wiggle;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 3s;
	transform-origin:0% 0%;
	transform: rotate(130deg);
        z-index: -1;
}

@keyframes wiggle {
    10% {
      transform: rotate(45deg);
    }
    20% {
      transform: rotate(225deg);
    }
    30% {
      transform: rotate(45deg);
    } 
    40% {
      transform: rotate(225deg);
    }  
}

Result:

<style>
:root {
  --skin: #FFD700;
}

.box{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 5%;
  width: 300px;
  height: 300px;
}

.box1{
  background: var(--skin);
      top: 60%;
    left: 2.5%;
    width: 95%;
    height: 100%;
    #border-radius: 120% 120% 100% 100%;
}

.box2{
  background: var(--skin, yellow);
      top: 10%;
    left: 25%;
    width: 50%;
    height: 45%;
    #border-radius: 70% 70% 60% 60%;
}

.box3{
  background: #FFD700
  background: var(--skin, red);
      top: 40%;
    left: 23.5%;
    background: var(--penguin-skin, gray);
    width: 53%;
    height: 45%;
    #border-radius: 70% 70% 100% 100%;
}

.box4{
  --skin: red;
    bottom: 40%;
    right: 23.5%;
    background: var(--penguin-skin, gray);
    width: 53%;
    height: 45%;
}

.box5{
	animation-name: wiggle;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 3s;
	transform-origin:0% 0%;
	transform: rotate(130deg);
	z-index: 1;
      top: 5%;
    left: 25%;
    background: var(--skin, red);
    width: 30%;
    height: 60%;
    #border-radius: 30% 30% 120% 30%;
    transform: rotate(360deg);
}

@keyframes wiggle {
    10% {
      transform: rotate(45deg);
    }
    20% {
      transform: rotate(225deg);
    }
    30% {
      transform: rotate(45deg);
    } 
    40% {
      transform: rotate(225deg);
    }  
}
</style>

<div class="box">
  	<div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</div>

Output:

 

 
 
 
 
 
Categories: