no-image

CSS/SCSSでレスポンシブでリッチなメダルを作る

メダルをよく使うけれどいちいちIllustratorやPhotoshopを開くのが面倒なのでCSS/SCSSで作って見たら結構リッチにできた。
レスポンシブ対応。

テキストの量によってははみ出てしまうので、レスポンシブにテキストを調整するようにしてください。

WEB
マーケ

WEB
制作

WEB
マーケ

売上
No.1

ランキング
1位

イケてるで

SCSSでメダルを書く


$gold: #E5C238 !default;
$black:  #212529 !default;

.medal {
    position: relative;
    margin: 10px 0;
    //メダル内の文字のstyle設定
    color: $black; 
    font-size: 24px;
    font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
    text-shadow:  1px 1px 2px #fff;
    text-align: center;

    &::before {
        display: block;
        content: "";
        border: 5px solid $gold;
        padding-top: 100%; //widthに対して高さを決める
        margin: -5px; //borderの分をpadding-topに含めるため
        border-radius: 1000px;
    background:
        -webkit-gradient( //背景をグラデーションにする 古いブラウザ用
            linear,
            left top,left bottom,
            color-stop(0%,lighten($gold,25%)),
            color-stop(100%,lighten($gold,5%)));
    background: //背景をグラデーションにする 新しいブラウザ用
       linear-gradient(lighten($gold,25%) 0%,lighten($gold,5%) 100%);
    }
    .medal-inner { //メダル内の文字を中央に配置する
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: auto;
    }
}

CSSでメダルを書く


.medal {
  font-family: Georgia,游明朝,'Yu Mincho',YuMincho,'Hiragino Mincho ProN',HGS明朝E,メイリオ,Meiryo,serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
  position: relative;
  margin: 10px 0;
  text-align: center;
  color: #212529;
  text-shadow: 1px 1px 2px #fff;
}

.medal::before {
  display: block;
  margin: -5px;
  padding-top: 100%;
  content: '';
  border: 5px solid #e5c238;
  border-radius: 1000px;
  background: linear-gradient(#f4e5a9 0%, #e8c94f 100%);
}

.medal .medal-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

参考
https://www.granfairs.com/blog/staff/centering-by-css
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients
https://qiita.com/hrdaya/items/9f1692ba5b879f48823d
http://teamsanta.info/web/1351/

pocketlinehatebuimagegalleryaudiovideocategorytagchatquotegoogleplusfacebookinstagramtwitterrsssearchenvelopeheartstaruserclosesearch-plushomeclockupdateeditshare-squarechevron-leftchevron-rightleafexclamation-trianglecalendarcommentthumb-tacklinknaviconasideangle-double-upangle-double-downangle-upangle-downstar-halfstatus