2

アイテムの左側にカスタム境界線を使用して、リスト アイテムの周囲に境界線を作成するにはどうすればよいですか?

このような：

http://www.dar-ling.com.php53-12.dfw1-1.websitetestlink.com/wp-content/themes/darling/img/filters.png

css 3 アングルの使用を検討しました....しかし、内側の円や穴を実現できません...境界線で...そして、何らかの形で画像を使用するよりも面倒です。

私は現在、背景画像でこれを行うことを検討しています...左側の境界線をオフにし、グラフィックをアイテムの左端に配置しようとしていますが、うまくいきません. 私のアイテムはすべてさまざまな長さで、さらに複雑にするために、水平スライダーの左側のアイテムに浮かんでいます。

図に示すように、さまざまなホバー スタイルとアクティブ スタイルも必要です。

そして最後に、カテゴリ内のアイテムの数量に関連付けられた数値を保持できる丸いスタイルの円または楕円を提供し、それをスタイル付きのリスト項目ボックスの右上に添付する必要があります。

これまでの私の進捗状況は次のとおりです。

HTML:

<div class="filters">
                <div class="filters-inner">
                      <ul id="filters-slider" class="filters-list">
                    <li><a href="#">Darling</a></li>
                    <li><a href="#">Online Audience</a></li>
                    <li><a href="#">Digital Strategy</a></li>
                    <li><a href="#">Creative</a></li>
                    <li><a href="#">Mobile</a></li>
                    <li><a href="#">eCommerce</a></li>
                    <li><a href="#">Social Media</a></li>
                    <li><a href="#">Search</a></li>
                    <li><a href="#">Advertising</a></li>
                    <li><a href="#">Ramblings</a></li>
                    <li><a href="#">Ideas</a></li>
                    <li><a href="#">Newy New</a></li>
                    <li><a href="#">Freshy Fresh</a></li>
                    <li><a href="#">Search</a></li>
                    <li><a href="#">Advertising</a></li>
                    <li><a href="#">Ramblings</a></li>
                    <li><a href="#">Ideas</a></li>
                    <li><a href="#">Newy New</a></li>
                    <li><a href="#">Freshy Fresh</a></li>

                </ul>
          </div>
</div>

CSS:

.filters {
background-color: #fff;
padding-top: 3px;
padding-bottom: 5px;
width: 1145px;
height: 45px;
float: left;
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);

}
 .filters-inner {
width: 1140px;
margin-right: auto;
margin-left: auto;
font-size: 11px;
overflow: hidden;
color: #999;
    -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;

 }
ul.filters-list {
text-align: center;
white-space: nowrap;
display: inline-block;
padding-top: 10px;
}
ul.filters-list li {
float: left;
list-style-type: none;
padding-top: 2px;
padding-right: 20px;
padding-bottom: 2px;
padding-left:20px;
background-color: #fff;
margin-right: 10px;
margin-left: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
background-image: transparent url(http://www.dar-ling.com.php53-12.dfw1-1.websitetestlink.com/wp-content/themes/darling/img/leftside_tag_up.png);
background-repeat: no-repeat;
background-position: left center;
}
ul.filters-list li:hover {
background-color: #ECECEC;
background: transparent url(http://www.dar-ling.com.php53-12.dfw1-1.websitetestlink.com/wp-content/themes/darling/img/leftside_tag_hover.png) no-repeat left center;
}ul.filters-list li a {
color: #666666;
font-weight: bold;
}
ul.filters-list li a:hover {
text-decoration: none;
}

div.sample {
padding-top: 200px;
}

</p>

これを正しく行う方法を知っている人はいますか？

4

1 に答える 1

2

背景画像スプライトで機能するソリューションを次に示します。簡単に言えば、「値札」形状全体 (ユーザーがクリックしやすい) にタグを使用し、ホバー/アクティブ状態にバックグラウンド スプリントを使用しています。また、「数量」番号を span タグでラップしています。

ソリューション例: http://jsfiddle.net/alexroper/zhrwA/34/

「値札」リストの HTML は次のとおりです。

<ul id="filters-slider" class="filters-list">
  <li><a href="#">Darling</a> <span class="tag-qty">103</span></li>
  <li class="active"><a href="#">Online Audience</a> <span class="tag-qty">9</span</li>
  <li><a href="#">Digital Strategy</a> <span class="tag-qty">20</span></li>
</ul>

その「価格タグ」を構築するスタイルは次のとおりです。

ul.filters-list {
  text-align: center;
  white-space: nowrap;
  display: inline-block;
  padding-top: 10px;
}
ul.filters-list > li {
  color: #666666;
  font-weight: bold;
  float: left;
  list-style-type: none;
  line-height: 26px;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
}
ul.filters-list > li > a {
  color: #666666;
  padding: 0 18px 0 24px;
  background: url('https://www.dropbox.com/s/n8e74eikwf82vks/tag_sprite.png?raw=1') 0 0 no-repeat;
  border-right: 1px solid #ccc;
  display: block;
}
ul.filters-list > li > a:hover,
ul.filters-list > li.active > a {
  text-decoration:none;
  background-position: 0 -30px;
}

そして、これらのスタイルは「数量」番号を作成します:

.filters-list .tag-qty {
  position: absolute;
  top: -8px;
  right: -9px;
  border: 1px solid #bbb;
  line-height: 16px;
  display: inline-block;
  padding: 0 5px;
  background: #fff;
  -webkit-border-radius: 9px;
          border-radius: 9px;
     -moz-background-clip: padding; 
  -webkit-background-clip: padding-box; 
          background-clip: padding-box;
  -webkit-box-shadow: 0px 0px 3px 0px #ccc;
          box-shadow: 0px 0px 3px 0px #ccc;
}
.filters-list .active .tag-qty {
  background:#ebebeb;
}
于 2012-10-22T03:35:32.013 に答える