A Pen by ffoodd.

index.html

<ul class="boxes">
  
  <li class="box  box-alpha">
    <section class="box-content">
      <header class="box-header"></header>
      <footer class="box-footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae pulvinar ante.</footer>
    </section>
  </li>
  
  <li class="box  box-beta">
    <section class="box-content">
      <header class="box-header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae pulvinar ante.</header>
      <footer class="box-footer"></footer>
    </section>
  </li>
  
  <li class="box  box-gamma">
    <section class="box-content">
      <header class="box-header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae pulvinar ante.</header>
      <footer class="box-footer"></footer>
    </section>
  </li>
  
  <li class="box  box-delta">
    <section class="box-content">
      <header class="box-header"></header>
      <footer class="box-footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae pulvinar ante.</footer>
    </section>
  </li>
  
</ul>

<svg>
  <defs>
    <clipPath id="circle">
      <circle cx="400" cy="12em" r="80" />
    </clipPath>
  </defs>
</svg>

Le-cercle-magique-—-№1.markdown

Le cercle magique — №1

Pour le petit défi de Hugo Giraudel :D

A Pen by ffoodd on CodePen.

License.

style.css

*, 
:after,
:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

section,
header,
footer { display: block; }

/* Références :
 * http://codepen.io/iamvdo/pen/EIjLa
 * http://codepen.io/iamvdo/pen/hasAm
 * http://www.24joursdeweb.fr/2013/les-masques-css/
 * http://www.html5rocks.com/en/tutorials/masking/adobe/
 * http://docs.webplatform.org/wiki/css/properties/clip-path
 * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking
 * http://www.w3.org/TR/SVG/masking.html#ClippingPaths
*/

/**
 * 1. Position is everything — and very useful to place the ::before pseudo-element :)
 * 2. Giving background. 
 * 3. Used to position SVG shape used as a fallback for clip-path: <basic-shape>.
 * 4. Useful for IE8.
 */
.boxes {
  list-style: none;
  padding: 0;
  margin: 2em auto 0;
  overflow: hidden;
  position: relative; /* 1 */
  background-image : url(http://lorempixel.com/output/nature-q-c-800-400-10.jpg); /* 2 */
  max-width: 800px; /* 3 */
  z-index: 1; /* 4 */
}

/**
 * @note : The trick is to create a pseudo-element with the exact same dimensions and background than the .boxes, and stack it above. Then we’ll clip it in order to make it a simple circle, creating a « see-hrough » like effect.
 * 1.  Creating ::before with the same dimensions as its relative parent (.boxes) 
 * 2. Giving the same background. 
 * 3. Using a simple rectangle clip for simplest browsers (a.k.a. IE). 
 * 4. Clipping the pseudo-element to create the centered circle. 
 * 5. SVG shape is more cross-browser. Circle is centered with <cx> and <cy> attributes : 400 = 800(.boxes’width)/2 and 12em = 6em(.box’s height + margin-bottom)*2.
 */
.boxes:before {
  content: '';
  position: absolute; /* 1 */
  z-index: 2; /* 1 */
  bottom: 0; /* 1 */
  right: 0; /* 1 */
  left: 0; /* 1 */
  top: 0; /* 1 */   
  background-image: inherit; /* 2 */  
  clip: rect( 7em, 30em, 17em, 20em ); /* 3 */
  -webkit-clip-path: circle( 50%, 50%, 5em ); /* 4 */
  clip-path: url(#circle); /* 5 */
}

/**
 * 1. Width and height are equal t get a square and 5em for proportions with other elements;
 * 2. Making a circle;
 * 3. Centering the circle.
 */
.boxes:after {
  content: '';
  position: absolute;
  background: #34495e;
  height: 5em; /* 1 */
  width: 5em; /* 1 */
  border: .5em solid #2f3e51;
  border-radius: 50%; /* 2 */
  z-index: 3;
  left: 44%; /* 3 */
  top: 40%; /* 3 */  
  left: calc( 50% - 2.5em ); /* 3 */
  top: calc( 50% - 2.5em ); /* 3 */    
}

/**
 * 1. Feel free to move to inline-block or whatever
 * 2. Useful for IE8.
 */
.box {
  color: #fff;
  float: left; /* 1 */  
  margin: 1em;
  position: relative; /* 2 */
  z-index: -1; /* 2 */
  width: 45%; /* 2 */
  width: calc( 50% - 2em );
}

.box-header,
.box-footer { 
  min-height: 5em; 
  padding: 1em;
}

.box-alpha .box-header { background: #1abc9c; }

.box-alpha .box-footer { background: #148f77; }

.box-beta .box-header { background: #2ecc71; }

.box-beta .box-footer { background: #25a25a; }

.box-gamma .box-header { background: #217dbb; }

.box-gamma .box-footer { background: #3498db; }

.box-delta .box-header { background: #804399; }

.box-delta .box-footer { background: #9b59b6; }