Дизайн рейтинга (тип 3) на чистом css3

От делать нечего решил оформить рейтинг (тип 3 в dle) на чистом CSS3 без использования изображений. В итоге получилось то, что на скрине выше, решил выложить сюда. Заняло 15 минут времени. HTML:

[rating-type-3]



[rating-minus]-[/rating-minus]



{rating}



[rating-plus]+[/rating-plus]

[/rating-type-3]

CSS:

/*----new raring 3-----*/ .mwrating {     display: inline-block;     width: 96px;     height: 28px; } .wmminus, .wmplus {     width: 22px;     height: 28px; } .mwrat {     width: 42px;     height: 28px; } .wmminus, .mwrat, .wmplus {     display: inline-block;     float: left;     text-align: center;     line-height: 28px;     position: relative; } .wmminus a {     transition: all 0.2s;     display: block;     position: absolute;     top: 0px;     left: 0px;     width: 22px;     height: 28px;     line-height: 28px;     text-align: center;     background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);     border-top-left-radius: 3px;     border-bottom-left-radius: 3px;     border: 1px solid #D60A07;     border-right: 0px;     box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.24);     font-family: 'Tahoma';     font-size: 24px;     font-weight: 400;     color: #fff;     text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.62); } .wmplus a {     transition: all 0.2s;     display: block;     position: absolute;     top: 0px;     left: 0px;     width: 22px;     height: 28px;     line-height: 28px;     text-align: center;     background: linear-gradient(to bottom, #97d624 0%,#7cbc0a 100%);     border-top-right-radius: 3px;     border-bottom-right-radius: 3px;     border: 1px solid #7EBE0C;     border-left: 0px;     box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.24);     font-family: 'Tahoma';     font-size: 18px;     font-weight: 700;     color: #fff;     text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.33); } .wmminus a:hover, .wmplus a:hover {     text-decoration: none;     text-shadow: 0px 0px 5px #fff; } .wmminus a:active, .wmplus a:active {     opacity: 0.5; } .mwrat {     background: linear-gradient(to bottom, #F0F0F0 0%,#D5D5D5 100%);     border-top: 1px solid #DDD;     border-bottom: 1px solid #C3C3C3;     box-shadow: inset 0px 1px 0px #fff;     font-family: 'Arial';     font-weight: 600;     font-size: 14px;     text-shadow: 0px 1px 1px #fff; }

Источник: dle-faq.pro

Перейти на сайт

Дизайн рейтинга (тип 3) на чистом css3

Похожие новости