Hi there !

My name is : Lucas Bonomi

What I do : I'm a freelance frontend developer Previously at Sush.io

What I love : The web, UI&UX design, CSS & Frontend technologies

You can find me everywhere as : @LukyVj

Twitter / Dribbble / Github / Instagram / etc...

CSS Zones Mapping

Create interesting & interactive scenes with CSS

What will you need ?

  1. Basic knowledge of CSS (SASS)

  2. Know the sibling tilde (~) operator
  3. A bit of creativity
  4. An empty pen..

We want to :

  1. Create a simple mapping

  2. Avoid Javascript
  3. Have a mapped grid over the background 

We will

<!-- The whole mapping zone -->
<section class="frame">  

  <!-- Our mapping zones -->
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
    
  <!-- The background -->
  <div></div>

</section>
.frame{
    
 div{}
    
 span{
 /* Add your bloc dimensions here */
    
    &:nth-child(1):hover ~ div{}
    &:nth-child(2):hover ~ div{}
    &:nth-child(3):hover ~ div{}
    &:nth-child(4):hover ~ div{}
    &:nth-child(5):hover ~ div{}
    &:nth-child(6):hover ~ div{}
    &:nth-child(7):hover ~ div{}
    &:nth-child(8):hover ~ div{}
    &:nth-child(9):hover ~ div{}
  }
}
  1. Define the parent wrapper style
  2. Style the background zone
  3. Define the mapped zones style
  4. Prepare the mapped zones actions

Finally the action

Now, we just need to trigger a change into the background div when a block is hovered

.frame{
  
 div{
    background: grey;
  }
  
  span{
      /* Add your bloc dimensions here */              
      &:nth-child(1):hover ~ div{ background: red; }
      &:nth-child(2):hover ~ div{ background: orange; }
      &:nth-child(3):hover ~ div{ background: blue; }
      &:nth-child(4):hover ~ div{ background: green; }
      &:nth-child(5):hover ~ div{ background: yellow; }
      &:nth-child(6):hover ~ div{ background: peru; }
      &:nth-child(7):hover ~ div{ background: gold; }
      &:nth-child(8):hover ~ div{ background: teal; }
      &:nth-child(9):hover ~ div{ background: tomato; }
  }
}
                

Result

Demonstration

Demonstration

From @0x04 https://cdpn.io

from @Pixelass http://cdpn.io/

Infos & Resources

CSS Zones mapping template :

https://gist.github.com/LukyVj/1a5200f95a5a3decc093

 

This slides : 

https://slides.com/lukyvj/css-zones-mapping

 

The demo pen :

http://codepen.io/LukyVj/pen/gbRbVy

Thanks for listening.

Any questions ?

The sibling tilde

It allows you to proceed an action between two brother child elements






  <div class="parent">
    <span class="child-1"></span>
    <span class="child-2"></span>
  </div>


 

 .parent{
    .child-1:hover ~ .child-2{
      // If the child 1 is hover
      // Modify the child 2
    }
  }

CSS Zones Mapping

By Lucas Bonomi

CSS Zones Mapping

How to make interesting & interactive scenes with CSS

  • 5,624