10

多くの最新の Web サイトでの「はめ込み」のような効果に、私は非常に感銘を受けました。いくつかの例は 代替テキスト

と

代替テキスト

中央のライン。現在、多くの Web サイトでこの種の線/効果が使用されています。

ボーダーで同じことを達成しようとしましたが、色の組み合わせがうまくいかず、適切ではありません。

他のウェブサイトはこれらの画像を使用していますか? これは簡単ですか？

cssの例はありますか?

サイトの例: http://woothemes.com、http://net.tutsplus.com/、http://www.w3schools.com (ヘッダー内) および wordpress 管理ページのサイドバー内

4

8 に答える 8

17

これが役立つかどうかはわかりませんが、隣接する 2 つの要素の背景よりもわずかに明るく暗い 1 ピクセルの境界線を使用すると、これをエミュレートできます。例えば：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Untitled</title>
<style type="text/css">
div{background:#555;}
.top{border-bottom:#333 solid 1px;}
.bot{border-top:#777 solid 1px;}
</style>
</head>
<body>
<div class="top">this</div>
<div class="bot">andthis</div>
</body>
</html>

編集：

補足として、上記の例で明暗を切り替えると、わずかに盛り上がった/エンボス加工されたボーダー効果が得られます.

于 2010-06-15T14:12:35.173 に答える
4

2Dコンピューターディスプレイの3D効果は、色を使用して実現される単なる光学効果です。明るいバリエーションは明るい（高い領域）を示し、暗いバリエーションは影のある（低い領域）ことを示します。ほとんどの人は右利きで、ライティングライトはデスクトップの左側にある傾向があるため、画面の左上隅に架空の光源を使用します。

何年もの間、長方形の領域で純粋なCSSを使用してそれを行うことが可能でした。

body{
	background-color: #8080C0;
}
div{
  display: inline-block;
	margin: 1em;
	padding: 1em;
	width: 25%;
	color: white;
	background-color: #8080C0;
}
div.outset{
	border-width: 1px;
	border-style: solid;
	border-color: #A6A6D2 #4D4D9B #4D4D9B #A6A6D2;
}
div.inset{
	border-width: 1px;
	border-style: solid;
	border-color: #4D4D9B #A6A6D2 #A6A6D2 #4D4D9B;
}
<div class="inset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="outset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

ただし、フォントには、まだ広くサポートされていない新しいCSS属性が必要であり、また、複数の色を提供することはできないため、画像を使用するのが一般的です。http://www.quirksmode.org/css/textshadow.htmlを参照してください

于 2010-06-15T14:23:10.570 に答える
4

an の使用<hr>は非常に賢いです。

user1302036 の回答に続いて、上下の境界線の色を<hr>設定し、左右の境界線の幅を 0 に設定するだけです。

hr {
  border-width: 1px 0px;
  border-color: #666 transparent #ccc transparent;
}
于 2012-08-02T17:04:56.697 に答える
2

これはcssテキストシャドウプロパティです。この効果を取得するには、

.style{
    text-shadow:0 1px #FFFFFF;
}

しかし実際には、これは背景とテキストで使用している色の組み合わせの効果です。だからあなたはすべきです。

  1. 背景色よりも暗いテキストの影の色を使用します。
  2. テキストの色よりもテキストの影の色を使用します。
于 2010-06-15T14:53:15.300 に答える
1

最も簡単な、水平方向の罫線を引く

次のスタイルを使用すると、背景色に応じてコントラストを変更できます。

hr {
background-color: #000;
border-top: solid 1px #999;
border-left: none;  
height:0px;
}
于 2012-06-21T21:37:21.247 に答える
1

これは、使用できるより最新で柔軟なソリューションです。

JSFIDDLE

.hr {
  background: rgba(0, 0, 0, 0.6);
  height: 1px;
  width: 100%;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

<span class="hr"></span>

RGBA (赤、緑、青、アルファ) を使用することで、白/黒にアルファ (不透明度) を使用して、挿入効果の錯覚を作ることができます。

于 2013-10-24T23:51:21.363 に答える