What is a good technique for poll result bars?

前端 未结 1 1863
青春惊慌失措
青春惊慌失措 2021-01-27 05:13

I am creating some polling software and am currently researching techniques for doing poll result graph bars. Nothing complicated, just some simple results bars.

I was w

1条回答
  •  再見小時候
    2021-01-27 05:47

    Yes, that's a good way to do it.

    Here's the same idea with more refinement:

    Live Demo

    HTML:

    69 100 200 666 Over 9000!!

    CSS:

    .pollBars {
        width: 300px;
        background: #ccc
    }
    .pollBars span {
        display: block;
    
        padding: 3px;
        margin: 7px 0;
    
        font: bold 14px/1 sans-serif;
    
        -moz-border-radius: 4px;
        border-radius: 4px;
    
        text-shadow: 1px 1px 1px #444;
    }
    
    .t1 {
        color: #fff;
    
        border: 1px solid red;
    
        background: #f85032; /* old browsers */
        background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* firefox */
    
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* webkit */
    
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* ie */
    }
    
    .t2 {
        color: #fff;
    
        border: 1px solid blue;
    
        background: #6db3f2; /* old browsers */
        background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* firefox */
    
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* webkit */
    
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* ie */
    }
    

    0 讨论(0)
提交回复
热议问题