2

これと似たようなことをしたいのですが、 http://timheuer.com/blog/archives.aspx CSS を使用してインタラクティブな循環リンクを作成する必要があります。

4

3 に答える 3

3

その効果を得る方法はいくつかあります。問題のページは、CSS スタイルで画像の背景を使用しているように見えます。最も簡単な例は次のとおりです。

1 画像の背景

#link1 {
    background-image: url('/images/button1-trans.png')
}

#link2 {
    background-image: url('/images/button2-trans.png')
}

#link1:hover {
    background-image: url('/images/button1.png')
}

#link2:hover {
    background-image: url('/images/button2.png')
}

1b 画像スプリッティング

複数の画像を使用するには複数のブラウザ リクエストが必要になるため、「画像スプライト」は、ダウンロードを 1 つのリクエストに最適化するために最近よく使用される手法であり、キャッシュされて 1 つの 304 レスポンスが返されます。ティムの場合、彼はこのように見えます (オリジナルは透明ですが)。

ここに画像の説明を入力

次に、各リンクに同じ画像をクリッピングとオフセットとともに使用して、画像の適切な部分を見つけます。

#links a {
    background-image:url('/images/allButtons.png')
    background-position: 0px 0px; /* sets the row for all normal links */
    width: 64px;
    height: 64px; /* bounding box for the image */
}

#links #link1 {
    background-position: 0px 0px; /* first icon on the first row */
}
#links #link2 {
    background-position: -64px 0px; /* slides the image strip left to locate the second icon on the first row */
}
#links #link1:hover {
    background-position: 0px -64px; /* first icon on the second row */
}
#links #link2:hover{
    background-position: -64px -64px; /* second image, second row */
}

の背景画像に注意して#links aください。この場合、それは実際には不必要ですが、それができればいいと思います。そうすればbackground-position-x、各アイコンで使用するだけ#links a:hoverでよく、共通の行を設定するものだけが必要になりますbackground-position-y:-64pxが、FireFox チームは通常の衒学的な標準のみの「コンピューターはノーと言う」アプローチは、他のすべてのブラウザーがサポートしており、一般的に使用されているにもかかわらず、background-position-x または y をサポートしないことを決定しました。このように使用したいと思っている皆様には大変ご迷惑をおかけしております。

ただし、リンク先のブログのボタンを拡大してください。それらがすべてピクセル化されているのがわかりますか?

ここに画像の説明を入力

2 純粋な CSS

少なくとも CSS の組み合わせで円を実現できますが、border-style他border-widthのborder-radius人が投稿したように、中央のボタンの画像が必要です。

3つのアイコンフォント

☺☻☼☽☾☿

これは、完全にスケーラブルで、透過的で、非常に小さく、超高速であるため、最も現代的であり、私の好みのアプローチです。もちろん、フォントをダウンロードする必要がありますが、SVG は非常によく圧縮されます。HTML のテキストだけで、画像はまったくありません。クレイジーなCSSスタイリングもありません。アイコムーンをチェック！それらをズームインする方法がわかりますか？

上のアイコンを拡大してください。

icoMoon は無料で使用できますが、私はプロ パックを購入しました。正直なところ価格が高く、その価値は十分にあります。独自の SVG アイコンをロードすることもでき、独自のフォントを生成してくれる素晴らしいサイトです。IE6 のサポートもあります。

于 2013-04-20T13:15:02.510 に答える
1

説明

あなたが私たちに示すページは、すべてのメニュー項目のアイコン、境界線のあるイベントの画像スプリットを使用しています. 私の例は、単純なcssでこれを行う方法を示しています。画像のスプリットを使用することもできますが、アイコンのみが含まれます。

HTML コード:

<ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Blog</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
    <li><a href="#"><span>About</span></a></li>
    <li><a href="#"><span>Projects</span></a></li>
</ul>

CSSコード

html, body {
    background: #369BD7;
    font-family: tahoma;
    font-size: 12px;
}

a {
    color: #fff;
}

ul {
    clear:both;
    margin: 0; 
    padding: 0;
}

ul li {
    display:block;
    position: relative;
    float: left;
    height: 80px;
    width: 80px;
    padding: 0;
    margin-left: 10px;
    list-style: none;
    text-align: center;
    white-space: nowrap;
}

ul li:first-child {
    margin: 0;
}

ul li a {
    display:block;
    margin: 10px auto;
    height: 40px;
    width: 40px;
    border-radius: 100%;
   -webkit-border-radius: 100%; 
   -moz-border-radius: 100%;  
    border: 4px solid #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;   
    transition: all 0.3s ease-in-out;
    background: transparent url('http://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/home.png') no-repeat 50% 50%;
}

ul li a:hover {
    background-color: #fff;
} 

ul li a span {
    display: block;
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    text-align: center;
    z-index: 1;
}

BORDER RADIUS ブラウザのサポート

http://caniuse.com/#search=border-radius

デモ

http://jsfiddle.net/bartekbielawa/fgPf8/6/

于 2013-04-20T07:36:08.237 に答える
0

コツは、 を と の半分border-radiusにすることです。次に、IE フォールバックに gif または png を使用します。heightwidth

.round-button {
  width:100px;
  height:100px;
  border-radius:50px; /* be sure to add all the browser prefix versions */
}
于 2013-04-20T02:22:14.327 に答える