Trucos y efectos de CSS3 432z Tutoriales En Linea

Herramientas SEO Tamaño del resultado: 668 x 574

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Trucos y efectos de CSS3 - Tutoriales En Linea</title>
</head>
<body>

<style>
  main {
    width: 100%;
    padding: 39px 29px;
    font-size: 12px;
  }
  section {
    padding: 0 129px;
    box-shadow: 0 0 0 1px #eee;
  }
  section::after {
    content: '';
    display: block;
    clear: both;
  }
  section > div {
    height: 229px;
    line-height: 1.5em;
    padding: 29px 12px;
    text-align: center;
    float: left;
    color: white;
    background: #b4a078;
  }
  section .left, section .right {
    position: relative;
    width: 119px;
  }
  section .left {
    left: -129px;
    margin-left: -100%;
  }
  section .center {
    width: 100%;
    text-align: justify;
    hyphens: auto;
  }
  section .right {
    left: 129px;
    margin-left: -119px;
  }
  /* input range */
  input[type="range"] {
    width: 100%;
    cursor: ew-resize;
  }
</style>

<main class="main">
    <input ref="range" type="range" value="100">
    <section :style="{ width }">
      <div class="center">Nam aliquam sem et tortor. Neque interdum consectetur libero id.</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </section>
</main>

<script>
  export default {
    data () {
      return {
        width: "100%"
      }
    },
    mounted() {
      this.$refs.range.oninput = ({ target: { value } }) => {
        this.width = `${60 + value * .4}%`;
      }
    }
  }
</script>

</body>
</html>