Плееры: темный и светлый

Даю два примера простеньких на вид плеера, но, на мой взгляд, стильных. Такие, в принципе, могут подойти любому блогу. В ширину они 450px, фоны и рамка на css, кнопка и там и там одна и та же.

Светлый

 


CSS

 

.player .inf span {color: #000;}

.player .inf .progress .load, .player .volume .progress,  .player .h, .player .inf .progress {background: #000 !important;} 

.player .play {background-image: url('http://s018.radikal.ru/i521/1210/9f/e9dbc1348309.png') !important;}

.player { 

background-color: #eeeeee;

background-repeat: repeat-x;

background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee));

background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100;

background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100;

background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#eeeeee',GradientType=0 );

background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100;

border: 1px solid #e5e5e5;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

 overflow: hidden; clear: both; margin-top: 6px; color: #000; padding: 10px 15px 5px 15px;}

Темный

CSS

.player .inf span {color: #CCC;}

.player .inf .progress .load, .player .volume .progress,  .player .h, .player .inf .progress {background: #CCC !important; } 

.player .play {background-image: url('http://s018.radikal.ru/i521/1210/9f/e9dbc1348309.png') !important;}

.player { 

width: 450px;

border: 1px solid #222;

background-color: #111;

background-image: -moz-linear-gradient(#444, #111);

background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

background-image: -webkit-linear-gradient(#444, #111);

background-image: -o-linear-gradient(#444, #111);

background-image: -ms-linear-gradient(#444, #111);

background-image: linear-gradient(#444, #111);

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;

-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;

box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;

 overflow: hidden; clear: both; margin-top: 6px; color: #000; padding: 10px 15px 5px 15px;}

Всем удачи! )


 

Обсудить у себя 8
Комментарии (8)

Спасибо, взяла светленький)

да, и осторожно, вместо смайликов там % и )

А стало все как положено… за исключением кнопочки «пуск-пауза»/она синяя/

а черт. это я баран. не та ссылка )))

s018.radikal.ru/i521/1210/9f/e9dbc1348309.png

т е 

.player .play {background-image: url('http://s018.radikal.ru/i521/1210/9f/e9dbc1348309.png') !important;}

Спасибо!)

Странно, но у меня даже работает! И угадайте, какой я себе взял. Естессенно чёрный!

Rouges спасибо!!!

не за что 

Спасибо) Взяла темненький.

Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

Войти через социальные сети: