tamaño - input css style
Creando Círculos CSS3 conectados por líneas (5)
Tengo que implementar la siguiente combinación de círculo y línea en CSS y estoy buscando punteros sobre cómo implementar esto de manera efectiva. Los círculos y líneas deberían verse así:
Puedo implementar los círculos como tal:
span.step {
background: #ccc;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #1f79cd;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
}
pero las líneas son difíciles de entender para mí.
El tamaño del círculo cambia dependiendo de si es el paso activo o no, y el color de la línea que conecta los círculos también cambia según el estado. ¿Cómo podría lograr esto?
Bueno, es un montón de marcas, pero podrías hacer algo como esto:
Usar display: table-cell; ya que ajustará automáticamente el ancho de los elementos para llenar espacios.
Luego, tenga un conjunto de elementos de círculo y un conjunto de elementos de línea. Los elementos de línea solo tienen un borde inferior en ellos, y los elementos del círculo están relativamente posicionados hacia abajo para alinearse con la línea.
Tenga en cuenta que los círculos deben tener un contenedor adicional, de lo contrario table-cell estirará todos los círculos a la misma altura, y usted no quiere eso. Esto requerirá que establezca el ancho de esos contenedores en 1px, lo que lo forzará al tamaño de su hijo.
Mira esta demostración:
Aunque esto es posible con CSS3, creo que SVG es una mejor herramienta para interfaces sofisticadas.
Hice esto con SVG (estilo con CSS):
Y aquí hay un Plunk para demostrar .
Puede lograr este efecto sin marcado adicional utilizando pseudo-elementos y el selector de hermanos adyacente ( ~ ):
HTML:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="active">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
CSS:
li {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 1em;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li::before{
content: '''';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: dodgerblue;
z-index: -1;
}
li:first-child::before {
display: none;
}
.active {
background: dodgerblue;
}
.active ~ li {
background: lightblue;
}
.active ~ li::before {
background: lightblue;
}
Trabajando con la excelente respuesta de @bookcasey, me encontré haciendo lo contrario para que fuera receptivo;
- Puse los círculos como
::beforepseudo selectores (con contador de css automático). - Las líneas entre son los elementos
lipara que puedan ser extendidos por flexbox.
Ahora se extiende para llenar el padre, y se ocupa de diferentes pasos de forma automática. También puede hacer cosas como ajustar font-size el padre ul y hacer que todo se adapte.
Estoy seguro de que se puede mejorar, así que no dude en contribuir :)
Interactive CodePen: Flexbox Timeline con pasos: http://codepen.io/ccondrup/pen/bqbGWB?editors=1100
ul {
align-content: center;
align-items: center;
counter-reset: stepCount;
display: flex;
justify-content: space-around;
margin: 10vh auto 20vh; /* for codepen */
}
li {
background: dodgerblue;
color: white;
content: '' '';
display: flex;
flex-grow: 1;
height: .3em;
line-height: 1em;
margin: 0;
position: relative;
text-align: right;
z-index: -1;
}
li::before {
background: dodgerblue;
border-radius: 50%;
color: white;
content: counter(stepCount);
counter-increment: stepCount;
height: 2em;
left: -2em;
line-height: 2em;
position: absolute;
text-align: center;
top: -.85em;
width: 2em;
}
li.active {
background-color: lightblue;
}
li.active~li {
background-color: lightblue;
}
li.active~li::before {
background-color: lightblue;
}
li:last-child {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0;
/* Shorthand: flex: 0 1 0; */
}
ul.bigger {
font-size: 1.3em;
}
ul.highlight-active li.active::before {
font-size: 1.6em;
background: navy;
}
ul.roman li::before {
content: counter(stepCount, upper-roman);
}
ul.triangle li::before {
width: 0;
height: 0;
border-radius: 0;
border-left: 1em solid white;
border-right: 1em solid white;
border-bottom: .8em solid dodgerblue;
content: '''';
top: -.65em;
}
ul.triangle li:first-child::before {
left: 0;
}
ul.triangle li.active~li::before {
border-bottom-color: lightblue;
}
<ul>
<li></li>
<li></li>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="bigger highlight-active">
<li></li>
<li></li>
<li class="active"></li>
<li></li>
</ul>
<ul class="roman">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="triangle">
<li></li>
<li></li>
<li class="active"></li>
<li></li>
<li></li>
</ul>
No es mío, pero funciona bastante bien y se ve elegante, solo funciona con CSS y puedes perzonalizarlo más. Fuente http://jsfiddle.net/Misiu/y1Lo3qh1/
var i = 1;
$(''.progress .circle'').removeClass().addClass(''circle'');
$(''.progress .bar'').removeClass().addClass(''bar'');
setInterval(function () {
$(''.progress .circle:nth-of-type('' + i + '')'').addClass(''active'');
$(''.progress .circle:nth-of-type('' + (i - 1) + '')'').removeClass(''active'').addClass(''done'');
$(''.progress .circle:nth-of-type('' + (i - 1) + '') .label'').html(''✓'');
$(''.progress .bar:nth-of-type('' + (i - 1) + '')'').addClass(''active'');
$(''.progress .bar:nth-of-type('' + (i - 2) + '')'').removeClass(''active'').addClass(''done'');
i++;
if (i == 8) {
$(''.progress .circle'').removeClass().addClass(''circle'');
$(''.progress .bar'').removeClass().addClass(''bar'');
i = 1;
}
}, 1000);
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans";
}
/* Form Progress */
.progress {
margin: 20px auto;
text-align: center;
padding-bottom: 80px;
}
.progress .circle,
.progress .bar {
display: inline-block;
background: #fff;
width: 40px;
height: 40px;
border-radius: 40px;
border: 1px solid #d5d5da;
vertical-align:top;
}
.progress .bar {
position: relative;
width: 80px;
height: 6px;
margin: 0 -5px 17px -5px;
border-left: none;
border-right: none;
border-radius: 0;
top:16px;
vertical-align:top
}
.progress .circle .label {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 32px;
margin-top: 3px;
color: #b5b5ba;
font-size: 17px;
}
.progress .circle .title {
color: #b5b5ba;
font-size: 13px;
line-height: 18px;
margin-left: -30px;
display: block;
width: 100px;
margin-top: 5px;
}
/* Done / Active */
.progress .bar.done,
.progress .circle.done {
background: #eee;
}
.progress .bar.active {
background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}
.progress .circle.done .label {
color: #FFF;
background: #8bc435;
box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}
.progress .circle.done .title {
color: #444;
}
.progress .circle.active .label {
color: #FFF;
background: #0c95be;
box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}
.progress .circle.active .title {
color: #0c95be;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href=''http://fonts.googleapis.com/css?family=Open+Sans'' rel=''stylesheet'' type=''text/css''>
<div class="progress">
<div class="circle done"> <span class="label">1</span>
<span class="title">Order</span>
</div> <span class="bar done"></span>
<div class="circle done"> <span class="label">2</span>
<span class="title">Address</span>
</div> <span class="bar active"></span>
<div class="circle active"> <span class="label">3</span>
<span class="title">Payment</span>
</div> <span class="bar"></span>
<div class="circle"> <span class="label">4</span>
<span class="title">Review</span>
</div> <span class="bar"></span>
<div class="circle"> <span class="label">5</span>
<span class="title">Finish</span>
</div>
</div>
<div class="progress">
<div class="circle done"> <span class="label">1</span>
<span class="title">Order informations</span>
</div> <span class="bar active"></span>
<div class="circle active"> <span class="label">2</span>
<span class="title">Order review</span>
</div> <span class="bar"></span>
<div class="circle"> <span class="label">3</span>
<span class="title">Finish</span>
</div>
</div>