• 締切済み

グラデーションのボーダー

下記サイトのカラフルなボーダーはどうやって作ってるんでしょうか？ 画面の伸縮にも対応しているようです。 CSSで実現できますか？ サンプルなどあれば教えて下さい。

画像を拡大する
  • CSS
  • 回答数2
  • ありがとう数3

みんなの回答

noname#206842
noname#206842
回答No.2

CSS3で、書き出すということでは？・・・ 画像を使うのであれば、簡単なので、前者の回答を参考に！ 創り方は、下記サイトを参考にしてください！ Boxではなく、borderに設定すればいろんなタイプが作成できると思います。 それぞれを、classで指定しておけば、汎用性があります。

参考URL：
http://www.colorzilla.com/gradient-editor/
  • pringlez
  • ベストアンサー率36% (598/1630)
回答No.1

http://www.seojapan.com/images/top_main_img_line.jpg この画像を繰り返し表示しているだけです。 というかこんなものソースを見れば30秒以内に分かることです。 ソースを読む能力を身につけたほうがいいと思いますよ。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSSで背景の２カ所に位置を指定してボーダーを入れるにはどうしたらいいでしょうか？

    http://www.thefujiyagohonjin.com/ このサイトのようにページの最上部と、ページの下から100pxの位置に、画面いっぱいに伸縮するボーダーを入れたいと思っています。上部のボーダーは指定できたのですが、下部の方をどうやって位置を設定していいのかわからず困っています。ナビゲーションもこのサイトのように画面サイズによって伸縮するデザインなので、このサイトの背景部分のCSSを教えていただけたら非常に助かります。 かなり低レベルな質問かもしれませんが、どなたか宜しくお願いします。

  • CSSでのtableの複雑なborder指定の仕様について

    CSSでのtableの複雑なborder指定の仕様について 現在、以下のようなborder設定を持つtableを作りたいと考えています。 線の太さが違っているのは、border-colorの指定を表しています。 ┏┯┯┳┯┯┳┯┯┓ ┠┼┼╂┼┼╂┼┼┨ ┠┼┼╂┼┼╂┼┼┨ ┣┿┿╋┿┿╋┿┿┫ ┠┼┼╂┼┼╂┼┼┨ ┠┼┼╂┼┼╂┼┼┨ ┗┷┷┻┷┷┻┷┷┛ データ量削減のため、colgroupとtrへのCSS指定だけで、 tdにはCSSを指定しない、という実現方法が理想的です。 ですが、自分で色々と試したものの、どうもうまくいきません。 やむを得ず、tdにCSSクラスを直接指定するにしても、 ある線の色を変えるには、どのtdにどんなCSSを指定すればいいのか、法則が掴めません。 一体どのような仕様になっているのでしょうか。 なお、対応ブラウザはIE6～8のみで構いません。

    • ベストアンサー
    • HTML
  • border: noneでボタンの境界線が消える

    ｃｓｓは全くの初心者です。教本で勉強しながらサンプルを動かしています。 reset.cssとstyle.cssの二つを利用し、 resetでブラウザの設定をリセットする形をとっています。 resetの内容は下記です。 ------------------------- @charset "UTF-8"; * { margin: 0; padding: 0; list-style: none; font-size: 100%; border: none; } img { vertical-align: top; } ------------------------- ところが、実験的に検索ボタンを設けようと <input Type="submit" name="subm" value="検索"> を追加したら、ボタンの境界線が消えてしまいました。 これを回避するにはどうしたらいいのでしょうか？ ちなみに<div>で囲って個別に境界線を設定する、という方法もあり、やってみましたが、 ボタンらしく見えませんでした。検索ボタンだけreset.cssの「border: none;」を 適用しない、なんて方法はあるのでしょうか？

    • ベストアンサー
    • HTML
  • borderの範囲

    cssコーディングに関しての質問です。 現在以下のようなスタイルとHTMLを組んでいます。 ==css============ #style1 { 　width:500px; 　padding: 15px 0 0 15px; 　border-left:1px solid #ccc; 　border-top: 1px solid #ccc; } #style1 p { 　margin:0; 　padding:0; } .style2 { 　float:right; 　clear:both; 　margin:0 0 20px 30px; } .style2 img{ 　margin:0; 　padding:0; } ==html============ <body> 　<div id="style1"> 　　<div class="style2"><img src="sample.jpg" width="200" height="200"></div> 　　<div class="style2"><img src="sample.jpg" width="200" height="200"></div> 　　<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> 　</div> </body> イメージをfloat:right;に指定し、 縦並びにしたいので、clear:both;を入れた所、 border-left:1px solid #ccc;のborderが文字までは表示されるのですが、 画像の延長上は無くなって表示されてしまいます。 右に画像を配置し borderを伸ばしたい時はどのようにすればよいのでしょうか？ よろしくお願いします！

    • ベストアンサー
    • HTML
  • テキストをボーダーで囲むCSS

    CSSを本を見ながらやっていますが、 下記の例文でテキストをボーダーで囲むものをやってみました。 この中で、 margin-left:100px; margin-right:100px; というころですが、これはブラウザに対しての両サイド空きを意味していると思うのですが、逆に囲んでいる幅のほうを指定するにはどうしたらよいのでしょうか。 または、そのようなことはできないのでしょうか。 <STYLE TYPE="text/css"> <!-- P.text {text-align:justify; text-justify:distribute; line-height:154%; margin-left:100px; margin-right:100px; border-style:solid; border-width:2px; border-color:#dd8888; padding:10px} --></STYLE> *****HTML <P CLASS="text"> テーブルみたいになるテキスト</P>

    • ベストアンサー
    • HTML
  • ナビゲーションバー　borderプロパティ

    サイトの横並びのメニューバーを作成する際、それぞれのボタンの間に1pxの区切り線を2本（２色）いれて立体感を出そうとしました。 しかし、まあ当たり前ですが、cssでa要素にborder-leftとborder-rightに線を指定しても、ボタンの間は２色はいっているのですが、左右両端のボタンだけ１色ずつしか線がでません。 背景画像をrepeat-xで横長に繰り返し、テキストはhtmlタグで、区切り線はcssで表現したいと思っております。どうすればいいのでしょうか？ どなたかアドバイスをよろしくお願い致します。

    • ベストアンサー
    • CSS
  • NN使用でのCSSでのBORDERについて

    IEで TD.TD1{BORDER-STYLE:SOLID; BORDER-COLOR:CORNFLOWERBLUE; BORDER-WIDTH:1; BACKGROUND-COLOR:ALICEBLUE;} のように指定すれば、細い線で囲まれたものをかくことができますが、NNでは、背景色は有効になっても線が出てきません。 これを有効にするにはどのようにしたらいいのでしょうか？ また、IE・NNで表示結果が違うCSSの一覧などが載ってるような便利なサイトがもしあったら教えてください。

    • ベストアンサー
    • CSS
  • border-left-color-ltr-source について。

    border-left-color-ltr-source について。 「border-left-color-ltr-source: physical;」のCSSについてGoogleで調べたものの、これについて詳細が書かれている記事が見当たりませんでした。 CSS3のものである、Googleが独自拡張したものというところで、あやふやながら分かったのですが、より具体的に知りたいのです。 教えて頂きたいことは・・・ １．W3Cの正式ＣＳＳのプロパティなのか？ ２．Googleが独自拡張したCSSという話は本当なのか？ ３．どちらにも属さず、製作者の意図で作られたものなのか？ ４．正式なプロパティなら、取る値の一覧が知りたい。 または、詳細に書かれているサイト、書籍があればご紹介頂ければ幸いです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSでテーブルボーダーを一発指定出来ません！

    現在テーブルに対してのCSSを設定しているのですが、私の勘違いなのかうまく出来ません・・・。 例えば縦5×横5列の表が有ったとします。 そこにCSSで四方1pxのボーダーを指定します。 でも、これだけだと表の一番外枠部分にしかボーダーが表示されません・・・。（当然なのかもしれませんが） そこで、CSSを使い中のブロック？部分、<td>全てにボーダーを表示させたいのですが、そのようなことは可能なのでしょうか？ ようは、表の枠線全てをcssで表示させたいのですが、この様な事は可能でしょうか？？ ご存知の方がいましたら、アドバイスいただけますでしょうか？ 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • borderに画像は使えるのかどうか。

    cssでボーダーのスタイルを指定する時、 「solid」や「dotted」とか以外に、 画像がリピートするように指定することは可能でしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する