html - ナビゲーションバーの画像にテキストを追加する

Question

ナビゲーションバーがありますが、画像を追加したいので、テキストリンクではなく、ホバー効果などの画像とテキストで構成されるボタンでナビゲーションバーを構成します。

しかし、リンク名のいくつかは動的であるため、フォトショップでボタンを作成できないため、htmlとcssだけでこのタイプのナビゲーションバーを作成する方法を考えていました。

何か案は？

編集明確にするために、私は次の画像サンプルナビゲーションボタンを持っています

この下にテキストを追加して、ナビゲーションバーのボタンを明確にします。

Answer 1

この質問は、このフォーラムにはあまり適していません。基本的なチュートリアルではなく、特定の問題用です。簡単な Google 検索を行うことで、基本的な CSS とこれを実現する方法を順を追って説明する優れたチュートリアルがたくさんあります。

しかし、始めるために、次のようなことができます: http://jsfiddle.net/wgBTZ/

HTML:

<ul>
    <li><a href="#" >One</a></li>
    <li><a href="#" >Two</a></li>
    <li><a href="#" >Three</a></li>
    <li><a href="#" >Four</a></li>
</ul>

CSS:

li {
    float:left;
    width: 100px;
    height: 40px;
    background:#CCC;
    margin:0 0 0 15px;

}

a {
    color: black;
    text-decoration:none;
    float:left;
    width: 100px;
    height: 40px;
    background:#CCC;
}

a:hover {
    background:#000;
    color:white
}

編集：これは基本的な仕組みです。CSS3 を使用すると、上記で行ったことを取り入れて、実際にかなりクールなものを作成できます。

Answer 2

CSSだけでできることはたくさんある

基本的な考え方は、疑似クラス.cssclass:hoverを使用してボタンの各状態の属性をマウス オーバー状態と.cssclass:activeマウス ダウン状態に変更することです。

正常

    /* style of the button in normal state */
button.css3button{
    padding: 0.5em;
    background-color: lightblue;
    border: 4px outset green;
    color: green;
    border-radius: 4px;
}

:ホバー

/* properties that change when mouse over */
button.css3button:hover {
    background-color: lightgreen;
}

：アクティブ

/* properties that change when mouse down */
button.css3button:active {
   color: yellow;
   border: 4px inset red;
}

ライブデモ：JSFIDDLE

---

CSS3 を使用したより複雑なスタイリングの例:

<button type="button" name="" value="" class="css3button">submit</button>

button.css3button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding: 10px 20px;
    background: -moz-linear-gradient(
        top,
        #bfc2ff 0%,
        #82b4ff 25%,
        #4664fa);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#bfc2ff),
        color-stop(0.25, #82b4ff),
        to(#4664fa));
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    border: 3px solid #ffffff;
    -moz-box-shadow:
        0px 3px 11px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(49,141,212,1);
    -webkit-box-shadow:
        0px 3px 11px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(49,141,212,1);
    box-shadow:
        0px 3px 11px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(49,141,212,1);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.2),
        0px 1px 0px rgba(255,255,255,0.3);
}

デモ: JSFIDDLE

:hover :active :visitedもちろん、自分の好みで各状態のサイズ、色、グラデーションを変更できます。ほとんど何でもスタイルできます<a> <span> <div> <button>