Css números plegables

codigo numeros plegables

Este código css es para crear números plegables tipo loterías o maquinas de juegos, sé que tu le podrás dar un uso muy útil a este css, espero les guste Primero Pegas el css en el head de tu web.

Este código css es para crear números plegables tipo loterías o maquinas de juegos, sé que tu le podrás dar un uso muy útil a este css, espero les guste Primero Pegas el css en el head de tu web.

Ejemplo Css números plegables

25198

pega este codigo css en el head de tu web

smiley

<style type="text/css">
/*<![CDATA[*/
#fans {
    font-family: sans-serif;
    margin: auto auto;
    overflow: hidden;
    text-align: center;
    width: 100%;
}
#fans p {
    color: #74698a;
    font-size: 13px;
    font-weight: bold;
    line-height: 40px;
}
#fans b {
    background: hsla(0,0%,100%,.75);
    border: 1px solid hsla(0,0%,0%,.25);
    color: #444;
    display: block;
    float: left;
    font-size: 24px;
    font-weight: normal;
    height: 43px;
    line-height: 44px;
    margin-right: 5px;
    position: relative;
    width: 33px;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
     
}
#fans b:first-child {
    margin-left: 3px;
}
#fans b:last-child {
    margin: 0;
}
#fans b:after {
    border-bottom: 1px solid hsla(0,0%,0%,.25);
    content: '';
    height: 41px;
    left: -1px;
    position: absolute;
    top: 0;
    width: 35px;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
     
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,0%,0)), color-stop(40%,hsla(0,0%,100%,0)), color-stop(50%,hsla(0,0%,100%,.5)), color-stop(50%,hsla(0,0%,0%,.25)), color-stop(60%,hsla(0,0%,0%,0)), color-stop(100%,hsla(0,0%,0%,0)));
    background: -webkit-linear-gradient(top, hsla(0,0%,0%,0) 0%, hsla(0,0%,100%,0) 40%, hsla(0,0%,100%,.5) 50%, hsla(0,0%,0%,.25) 50%, hsla(0,0%,0%,0) 60%, hsla(0,0%,0%,0) 100%);
    background: -moz-linear-gradient(top, hsla(0,0%,0%,0) 0%, hsla(0,0%,100%,0) 40%, hsla(0,0%,100%,.5) 50%, hsla(0,0%,0%,.25) 50%, hsla(0,0%,0%,0) 60%, hsla(0,0%,0%,0) 100%);
    background: -ms-linear-gradient(top, hsla(0,0%,0%,0) 0%, hsla(0,0%,100%,0) 40%, hsla(0,0%,100%,.5) 50%, hsla(0,0%,0%,.25) 50%, hsla(0,0%,0%,0) 60%, hsla(0,0%,0%,0) 100%);
    background: -o-linear-gradient(top, hsla(0,0%,0%,0) 0%, hsla(0,0%,100%,0) 40%, hsla(0,0%,100%,.5) 50%, hsla(0,0%,0%,.25) 50%, hsla(0,0%,0%,0) 60%, hsla(0,0%,0%,0) 100%);
    background: linear-gradient(top, hsla(0,0%,0%,0) 0%, hsla(0,0%,100%,0) 40%, hsla(0,0%,100%,.5) 50%, hsla(0,0%,0%,.25) 50%, hsla(0,0%,0%,0) 60%, hsla(0,0%,0%,0) 100%);
}
#fans b:before {
    border-left: 1px solid hsla(0,0%,0%,.35);
    border-right: 1px solid hsla(0,0%,0%,.35);
    content: '';
    height: 7px;
    left: 1px;
    position: absolute;
    top: 18px;
    width: 29px;
}
/*]]>*/

Pega este código en un widget html.

smiley

<div id="fans">
    <p>
        <b>5</b><b>2</b><b>9</b><b>4</b><b>7</b>
    </p>
</div>

Este es el head en jimdo

Asi insertas un widget html para pone códigos en jimdo

Escribir comentario

Comentarios: 6