メダルをよく使うけれどいちいちIllustratorやPhotoshopを開くのが面倒なのでCSS/SCSSで作って見たら結構リッチにできた。
レスポンシブ対応。
テキストの量によってははみ出てしまうので、レスポンシブにテキストを調整するようにしてください。
マーケ
制作
マーケ
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/