Заметки о CSS #2

16.08.2011

Законченное меню

Продолжение предыдущей заметки про верстку

Продолжаю описывать примеры верстки небольших, но интересных фрагментов сайтов. Сегодня продолжим доверстывать начатый в прошлой заметке блок.

Конечный вид меню

А именно нижнюю часть картинки(серая).

Общий html код выглядит следующим образом:

 

<div><span>Познакомиться</span>
 
  <div>
 
    <div><span> </span></div>
 
  </div>313
 
</div>

 

В общем этот блок делается так – подложка с закругленными углами – как описывалось в предыдущей статье, и самое важное руки – как видно вначале, под линией руки есть небольшой градиент, его бэкграундом добавляем в блок progressBarBox.

Далее, сама линия руки – вырезаем кусок и делаем repeat-x, это находится внутри блока gold, таким образом получается что длина руки зависит от свойства width, того самого блока gold. Ну и в пустой span вставляем изображение самого кулака. В общем-то ничего сложного, привожу полный код данного блока:

 

<div id="peopleThink">
 
  Люди считают, что сюда лучше всего идти с целью:
 
  <div><span>Познакомиться</span>
 
    <div>
 
      <div><span> </span></div>
 
    </div>313
 
  </div>
 
  <div><span>Провести романтическое свидание</span>
 
    <div>
 
      <div><span> </span></div>
 
    </div>215
 
  </div>
 
  <div><span>Посидеть с подружками</span>
 
    <div>
 
      <div><span> </span></div>
 
    </div>10
 
  </div>
 
</div>

 

И css:

 

background: rgb(77,77,77);
 
  -moz-border-radius: 0 0 10px 10px;
 
  -webkit-border-radius: 0 0 10px 10px;
 
  border-radius: 0 0 10px 10px;
 
  min-height: 140px;
 
  padding: 18px 20px 20px 25px;
 
  font: 14px Arial;
 
  color: #fff;
 
  margin-bottom: 20px;
 
}
 
.thinkType {
 
  height: 25px;
 
  margin-top: 10px;
 
  line-height: 20px;
 
  color: #b7b7b7;
 
  font-size: 12px;
 
  vertical-align: middle;
 
  color: rgb(255,202,37);
 
}
 
.thinkType span {
 
  float: left;
 
  width: 145px;
 
}
 
.progressBarBox {
 
  display: inline-block;
 
  margin-right: 5px;
 
  float: left;
 
  height:24px;
 
  padding-left:1px;
 
  background: url(../images/grad_targ.jpg) 0px 50% no-repeat;
 
}
 
.romanticDate .progressBarBox {
 
  margin-top: 7px;
 
}
 
.progressBar {
 
  display: inline-block;
 
  margin-right: 5px;
 
  float: left;
 
}
 
.progressBar span {
 
  width:9px;
 
  float: right;
 
  margin-top: -6px;
 
}
 
.gold {
 
  width: 90px;
 
  background: url(../images/gold_hr.jpg) top left repeat-x;
 
  margin-top: 7px;
 
  z-index: 999;
 
}
 
.gold span {
 
  background: url(../images/gold_hand.jpg) top right no-repeat;
 
}
 
.silver {
 
  width: 60px;
 
  background: url(../images/silver_hr.jpg) top left repeat-x;
 
  margin-top: 7px;
 
}
 
.silver span {
 
  background: url(../images/silver_hand.jpg) top right no-repeat;
 
}
 
.silver .count {
 
  margin-top: 4px;
 
}
 
.bronze {
 
  width: 40px;
 
  background: url(../images/bronze_hr.jpg) top left repeat-x;
 
  margin-top: 7px;
 
}
 
.bronze span {
 
  background: url(../images/bronze_hand.jpg) top right no-repeat;
 
}
 
.romanticDate {
 
  color: #bdbdbd;
 
  height: 35px;
 
}
 
.romanticDate .count {
 
  line-height: 38px;
 
}
 
.meetWithFriends {
 
  color: #f3ad5b;
 
}
blog comments powered by Disqus
Наверх