詳しい人求む！

CSSについて。このサイトの背景の表現はどのような記述でしょうか？

解決済

質問者：toshi4646
質問日時：2018/12/15 11:17
回答数：1件

https://www.human.or.jp/
こちらのサイトのTOPページの「recruit tips」の背景が、
中央がグレーで左右がホワイト、またセクションの真ん中もホワイトのように見えます。
このような特殊なグラデーションはどのようにやるのでしょうか？
プロパティだけでも教えていただけたらこちらで調べてみます。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： kunad
回答日時：2018/12/15 20:04

そのサイトの該当部分でやっていることを再現すると、こういうことです。

<html lang="ja">
<head>
<style type="text/css">
.block-a {
height: 200px;
-webkit-box-shadow: 0px 38px 43px -3px rgba(200,200,200,0.1);
box-shadow: 0px 38px 43px -3px rgba(200,200,200,0.1);
position: relative;
}
.block-a:before, .block-a:after {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
content:"";
background: -webkit-gradient(linear, left top, left top, from(rgba(255,255,255,0.1)), color-stop(70%, #fff));
background: -webkit-linear-gradient(left, rgba(255,255,255,0.1), #fff 70%);
background: linear-gradient(to right, rgba(255,255,255,0.1), #fff 70%);
display: inline-block;
position: absolute;
width: 50%;
height: 100px;
bottom: -100px;
right: 0;
}
.block-a:before {
background: -webkit-gradient(linear, right top, left top, from(rgba(255,255,255,0.1)), color-stop(70%, #fff));
background: -webkit-linear-gradient(right, rgba(255,255,255,0.1), #fff 70%);
background: linear-gradient(to left, rgba(255,255,255,0.1), #fff 70%);
left: 0;
}

.block-b {
height: 200px;
position: relative;
}
</style>
</head>
<body>
<div class="block-a">
INTERVIEW
</div>
<div class="block-b">
RECRUIT TIPS
</div>
</body>
</html>