1

Tengo este script en cual me piden que cada tab tenga una historia y se vea todo el contenido en 3D o como se ve la imagen de ejemplo que esta abajo.

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #2c3e50;
  color: #ecf0f1;
  line-height: 1.618em;
}

.wrapper {
  max-width: 40rem;
  width: 100%;
  margin: 0 auto;
  border-right: 4px solid blue;
}

.tabs {
  position: relative;
  margin: 3rem 0;
  background: #1abc9c;
  height: 14.75rem;
}

.tabs::before,
.tabs::after {
  content: "";
  display: table;
}

.tabs::after {
  clear: both;
}

.tab {
  float: left;
}

.tab-switch {
  display: none;
}

.tab-label {
  position: relative;
  display: block;
  line-height: 2.75em;
  height: 3em;
  padding: 0 1.618em;
  background: #1abc9c;
  border-right: 0.125rem solid #16a085;
  color: #fff;
  cursor: pointer;
  top: 0;
  transition: all 0.25s;
}

.tab-label:hover {
  top: -0.25rem;
  transition: top 0.25s;
}

.tab-content {
  height: 26rem;
  position: absolute;
  z-index: 1;
  top: 2.75em;
  left: 0;
  padding: 1.618rem;
  background: #fff;
  color: #2c3e50;
  border-bottom: 0.25rem solid #bdc3c7;
  opacity: 0;
  transition: all 0.35s;
}

.tab-switch:checked + .tab-label {
  background: #fff;
  color: #2c3e50;
  border-bottom: 0;
  border-right: 0.125rem solid #fff;
  transition: all 0.35s;
  z-index: 1;
  top: -0.0625rem;
}

.tab-switch:checked + label + .tab-content {
  z-index: 2;
  opacity: 1;
  transition: all 0.35s;
}

.tresde {
  -webkit-transform: rotateX(20deg) rotateZ(4deg) translateX(-50px) translateY(100px);
}
<div class="tresde">
<div class="wrapper">
<div class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Tab One</label>
<div class="tab-content"><h2>One</h2>My father had a small estate in Nottinghamshire: I was the third of five sons. He sent me to Emanuel College in Cambridge at fourteen years old, where I resided three years, and applied myself close to my studies; but the charge of maintaining me, although I had a very scanty allowance, being too great for a narrow fortune, I was bound apprentice to Mr. James Bates, an eminent surgeon in London, with whom I continued four years. </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
<label for="tab-2" class="tab-label">Tab Two</label>
<div class="tab-content"><h2>Two</h2>My father now and then sending me small sums of money, I laid them out in learning navigation, and other parts of the mathematics, useful to those who intend to travel, as I always believed it would be, some time or other, my fortune to do. </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
<label for="tab-3" class="tab-label">Tab Three</label>
<div class="tab-content"><h2>Three</h2>When I left Mr. Bates, I went down to my father: where, by the assistance of him and my uncle John, and some other relations, I got forty pounds, and a promise of thirty pounds a year to maintain me at Leyden: there I studied physic two years and seven months, knowing it would be useful in long voyages.</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
<label for="tab-4" class="tab-label">Tab Four</label>
<div class="tab-content"><h2>Four</h2>My father now and then sending me small sums of money, I laid them out in learning navigation, and other parts of the mathematics, useful to those who intend to travel, as I always believed it would be, some time or other, my fortune to do. </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-5" class="tab-switch">
<label for="tab-5" class="tab-label">Tab Five</label>
<div class="tab-content"><h2>Five</h2>My father now and then sending me small sums of money, I laid them out in learning navigation, and other parts of the mathematics, useful to those who intend to travel, as I always believed it would be, some time or other, my fortune to do. </div>
</div>
</div>
<p>Example line outside of tab box</p>
</div>
</div>

Ya logre darle un efecto, pero quiero darle profundidad con un borde, ahora esta en azul, pero la idea es que sea transparente, asi tiene el efecto de tarjeta.

Agradezco de antemano!

2
  • No termino de entender. quieres que el contenido de cada pestaña tenga ese efecto en 3D?
    – user128299
    el 26 nov. 2019 a las 23:23
  • No, que todo el contenido se vea como esta es web de ejemplo, pero no tan plano
    – user101604
    el 27 nov. 2019 a las 0:04

1 respuesta 1

2

Tienes que realizar algunos cambios en tu css y en tu estructura html para conseguir ese efecto. Hay varias manera de hacerlo, yo en este caso he incluido una capa por debajo del contendor que es la que contiene el box-shadow, además he cambiado el lugar donde aplicabas el border-right:

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #2c3e50;
  color: #ecf0f1;
  line-height: 1.618em;
}

.wrapper {
  max-width: 40rem;
  width: 100%;
  margin: 0 auto;
  /*border-right: 4px solid #f1f1f1;*/
}

.boxSok {
    position: relative;
    left:100px;
    width: 500px;
    height: 450px;
    box-shadow: 30px -50px 0 0px rgba(0, 0, 0, 0.1);
}

.tabs {
  position: relative;
  margin: 3rem 0;
  background: #1abc9c;
  height: 14.75rem;
}

.tabs::before,
.tabs::after {
  content: "";
  display: table;
}

.tabs::after {
  clear: both;
}

.tab {
  float: left;
}

.tab-switch {
  display: none;
}

.tab-label {
  position: relative;
  display: block;
  line-height: 2.75em;
  height: 3em;
  padding: 0 1.618em;
  background: #1abc9c;
  border-right: 0.125rem solid #16a085;
  color: #fff;
  cursor: pointer;
  top: 0;
  transition: all 0.25s;
}

.tab-label:hover {
  top: -0.25rem;
  transition: top 0.25s;
}

.tab-content {
  height: 26rem;
  position: absolute;
  z-index: 1;
  top: 2.75em;
  left: 0;
  padding: 1.618rem;
  background: #fff;
  color: #2c3e50;
  border-bottom: 0.25rem solid #bdc3c7;
  opacity: 0;
  transition: all 0.35s;
  border-right: 0.25rem solid #bdc3c7;
}

.tab-switch:checked + .tab-label {
  background: #fff;
  color: #2c3e50;
  border-bottom: 0;
  border-right: 0.125rem solid #fff;
  transition: all 0.35s;
  z-index: 1;
  top: -0.0625rem;
}

.tab-switch:checked + label + .tab-content {
  z-index: 2;
  opacity: 1;
  transition: all 0.35s;
}

.tresde {
  -webkit-transform: rotateX(20deg) rotateZ(4deg) translateX(-50px) translateY(100px);
}
<div class="tresde">
    <div class="boxSok">
    <div class="wrapper">
        <div class="tabs">
            <div class="tab">
                <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
                <label for="tab-1" class="tab-label">Tab One</label>
                <div class="tab-content"><h2>One</h2>My father had a small estate in Nottinghamshire: I was the third of five sons. He sent me to Emanuel College in Cambridge at fourteen years old, where I resided three years, and applied myself close to my studies; but the charge of maintaining me, although I had a very scanty allowance, being too great for a narrow fortune, I was bound apprentice to Mr. James Bates, an eminent surgeon in London, with whom I continued four years. </div>
            </div>
            <div class="tab">
                <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
                <label for="tab-2" class="tab-label">Tab Two</label>
                <div class="tab-content"><h2>Two</h2>My father now and then sending me small sums of money, I laid them out in learning navigation, and other parts of the mathematics, useful to those who intend to travel, as I always believed it would be, some time or other, my fortune to do. </div>
            </div>
            <div class="tab">
                <input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
                <label for="tab-3" class="tab-label">Tab Three</label>
                <div class="tab-content"><h2>Three</h2>When I left Mr. Bates, I went down to my father: where, by the assistance of him and my uncle John, and some other relations, I got forty pounds, and a promise of thirty pounds a year to maintain me at Leyden: there I studied physic two years and seven months, knowing it would be useful in long voyages.</div>
            </div>
            <div class="tab">
                <input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
                <label for="tab-4" class="tab-label">Tab Four</label>
                <div class="tab-content"><h2>Four</h2>My father now and then sending me small sums of money, I laid them out in learning navigation, and other parts of the mathematics, useful to those who intend to travel, as I always believed it would be, some time or other, my fortune to do. </div>
            </div>
            <div class="tab">
                <input type="radio" name="css-tabs" id="tab-5" class="tab-switch">
                <label for="tab-5" class="tab-label">Tab Five</label>
                <div class="tab-content"><h2>Five</h2>My father now and then sending me small sums of money, I laid them out in learning navigation, and other parts of the mathematics, useful to those who intend to travel, as I always believed it would be, some time or other, my fortune to do. </div>
            </div>
        </div>
    <p>Example line outside of tab box</p>
    </div>
    </div>
</div>

Espero haber comprendido bien que es lo que necesitabas así como haberte podido ayudar.

2
  • 2
    Puedes crear un fragmento ejecutable con HTML + JS + CSS pulsando Ctrl + M mientras escribes una respuesta. Lo he creado manteniendo tu código para que se pueda ver el resultado el 12 dic. 2019 a las 14:58
  • No habia pensado usar JS, pero voy a tratar de hacerlo asi aprendo un poco mas de JS... muchas gracias Jorge!
    – user101604
    el 13 dic. 2019 a las 2:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.