画像が入った円形のボックスにcssでグラデーションをかけてみた

気づけばあっという間に空梅雨から梅雨になりましたね。
雨よりも晴れのほうが好きですが、梅雨の時期は雨がふると趣を感じます。

今回はタイトルの通り、円形の画像にグラデーションのボーダーを施してみました。
以下、ソースです。

See the Pen grade_slide by sayuri (@giraffeweb) on CodePen.0

食べ物リストをスライドで見せる仕様にしています。
“bxSlider.js”を読み込ませて、コンテンツのスライドを行い、
そのコンテンツ一つ一つの楕円形に対してグラデーションのcssを適用しています。

【bxsliderのみの指示】

<!-- bxsliderのcss読み込み -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" /></script>
<!-- bxsliderのjs読み込み -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>

<body>
<div class="grade_slide">
    <ul class="bxSlider">
    <li>
      <div class="slide" style="background-image:url(<!-- 背景ソース -->)"></div>
      <h1>ShopName</h1>
      <p>address</p>
    </li>
    <li>
      <div class="slide" style="background-image:url(<!-- 背景ソース -->)"></div>
      <h1>ShopName</h1>
      <p>address</p>
    </li>
    <li>
      <div class="slide" style="background-image:url(<!-- 背景ソース -->)"></div>
      <h1>ShopName</h1>
      <p>address</p>
    </li>
<!-- コンテンツ複数回繰り返しのため省略 -->
</ul>
</div>
</body>

$(document).ready(function(){
  $('.bxSlider').bxSlider({
	  slideWidth: 220,
	  maxSlides: 3,
    moveSlides: 1,
    pager: false,
  });
  });

ひとまず、上のソースのみでbxSliderは動きます。
JSのオプションはお好みで設定してください。

【グラデーションの指示】
※SCSSで記述しています。

.bxSlider {
  li {
    width: 260px;
    .slide {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-size: 100%;
      background-repeat: no-repeat;
      display: block;
      margin: auto;
      position: relative;
      &:before,
      &:after {
        content:"";
        width: 206px;
        height: 206px;
        position: absolute;
        top: -3px;
        left: -3px;
        z-index: -10;
        border-radius: 50%;
　　　　　background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c);
       }
    }
  }
}

こちらもグラデーションのカラーや角度はお好みで変えてください。
beforeとafterを使用してグラデーションをかけたブロックを作成し、z-indexで重ねる指示をだしています。

ぜひ、みなさんも試してみてください。

Share: