Created
February 4, 2017 04:36
-
-
Save anonymous/8596a07a466938ffe76b55333fef855a to your computer and use it in GitHub Desktop.
Chunithm Nameplate // source http://jsbin.com/tulugi
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>Chunithm Nameplate</title> | |
<style id="jsbin-css"> | |
body { | |
font-family: 'Helvetica Neue', 'メイリオ', sans-serif; | |
} | |
.normal { | |
background: linear-gradient(to bottom, #e5e5e5 0%, #dfdedd 50%, #d1d1d0 51%, #c3c1bd 100%); | |
} | |
.bronze { | |
background: linear-gradient(to bottom, #f7956c 0%, #f3986d 50%, #da7f56 51%, #ffac7a 100%); | |
} | |
.silver { | |
background: linear-gradient(to bottom, #fff 0%, #d8f7fe 50%, #b0e6fc 51%, #fbffff 100%); | |
} | |
.gold { | |
background: linear-gradient(to bottom, #fffebe 0%, #ffed6e 50%, #fec85f 51%, #eda245 100%); | |
} | |
.platinum { | |
background: linear-gradient(to bottom, #fbfcd4 0%, #fdfac3 50%, #fcf4a9 51%, #fbeca7 100%); | |
} | |
.nameplate { | |
/* background linear-gradient(to bottom, #038bb0, #0d46a5) */ | |
background: url("https://i.ytimg.com/vi/Q5gO7Uvw3BU/hqdefault.jpg"); | |
background-position: -30px -80px; | |
background-size: cover; | |
border-radius: 5px; | |
padding: 10px; | |
width: 700px; | |
} | |
.info { | |
margin-left: 80px; | |
border-radius: 5px; | |
} | |
.ticket { | |
background-color: rgba(170,170,170,0.7); | |
border-radius: 5px; | |
text-align: center; | |
padding: 3px; | |
margin-bottom: 5px; | |
} | |
.honor { | |
border: 2px solid #bbb; | |
border-radius: 5px; | |
padding: 3px; | |
text-align: center; | |
margin-bottom: 5px; | |
font-size: 1.2rem; | |
font-weight: bold; | |
} | |
.user-container { | |
display: flex; | |
} | |
.user { | |
min-width: 500px; | |
height: 115px; | |
box-sizing: border-box; | |
background-color: rgba(170,170,170,0.7); | |
border-radius: 5px; | |
padding: 20px 5px 5px 5px; | |
margin-right: 5px; | |
} | |
.level { | |
display: inline-block; | |
width: 80px; | |
font-size: 2rem; | |
} | |
.level::before { | |
content: 'Lv. '; | |
font-size: 1.3rem; | |
} | |
.name { | |
display: inline-block; | |
font-size: 2.5rem; | |
} | |
.rating { | |
border-top: 1px solid #777; | |
box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset; | |
font-weight: bold; | |
/* see: http://bashalog.c-brains.jp/15/04/15-205258.php | |
ここもミソ(下記参照) ここにpositionとz-indexを書かないと影が正しく映らない(スタックコンテキスト)。 | |
*/ | |
position: relative; | |
z-index: 0; | |
} | |
.rating-char { | |
font-size: 1rem; | |
width: 90px; | |
letter-spacing: 0; | |
} | |
.rating-value { | |
font-size: 1.6rem; | |
letter-spacing: 4px; | |
} | |
.rating-char, | |
.rating-value { | |
display: inline-block; | |
/* 縁取り */ | |
-webkit-text-stroke: 0.4px #000; | |
/* | |
see: https://www.viget.com/articles/background-clip-text-shadow-gradients | |
ここではbackground-clipとtext-fill-colorで文字の背景がbackgroundに指定した画像になるようにしている。しかし、これにtext-shadowをつけると、影が文字の前面に来てしまうという問題を解決するために::afterでゴニョゴニョ | |
*/ | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
position: relative; | |
} | |
.rating-char::after, | |
.rating-value::after { | |
content: attr(data-value); | |
display: inline-block; | |
position: absolute; | |
left: 0; | |
top: 0; | |
text-shadow: 2px 2px 2px rgba(0,0,0,0.8); | |
z-index: -1; | |
} | |
.character { | |
min-width: 115px; | |
min-height: 115px; | |
max-width: 115px; | |
max-height: 115px; | |
box-sizing: border; | |
} | |
.character img { | |
width: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="generator"> | |
<div class="nameplate"> | |
<div class="info"> | |
<div class="ticket">{{ticket}}</div> | |
<div class="honor" :class="honorColor">{{honor}}</div> | |
<div class="user-container"> | |
<div class="user"> | |
<div class="level">{{level}}</div> | |
<div class="name">{{name}}</div> | |
<div class="rating"> | |
<div class="rating-char" data-value="RATING" :class="ratingColor">RATING</div> | |
<div class="rating-value" :class="ratingColor" :data-value="rating">{{rating}}</div> | |
</div> | |
</div> | |
<div class="character"> | |
<img :src="characterImageURL"> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="form"> | |
チケット<input type="text" v-model="ticket"><br> | |
称号<input type="text" v-model="honor"><br> | |
称号の色<select v-model="honorColor"> | |
<option value="normal">ノーマル</option> | |
<option value="bronze">ブロンズ</option> | |
<option value="silver">シルバー</option> | |
<option value="gold">ゴールド</option> | |
<option value="platinum">プラチナ</option> | |
</select><br> | |
Lv<input type="text" v-model="level"><br> | |
名前<input type="text" v-model="name"><br> | |
レーティング<input type="text" v-model="rating"><br> | |
レーティング色(色が足りてないしAIRではなくPLUS風になってしまったので修正予定)<select v-model="ratingColor"> | |
<option value="normal">ノーマル</option> | |
<option value="bronze">ブロンズ</option> | |
<option value="silver">シルバー</option> | |
<option value="gold">ゴールド</option> | |
<option value="platinum">プtラチナ</option> | |
</select><br> | |
キャラクター画像<input id="character_image" type="file"><br> | |
<span style="color:#555">キャラはwikiから引っ張ってドロップダウンで選べるようにしても良かったけど、<del>面倒だった</del>面白さが半減する気がしたので自由に選べるようにした</span><br> | |
背景画像<input id="background_image" type="file"><br> | |
</div> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> | |
<script id="jsbin-javascript"> | |
var vm = new Vue({ | |
el: "#generator", | |
data: { | |
ticket: "アストライア様に踏まれるチケット", | |
honor: "音ゲーが苦手", | |
honorColor: "platinum", | |
level: "16", | |
name: "Gates☆", | |
rating: "13.83", | |
ratingColor: "silver", | |
characterImageURL: "https://www.biography.com/.image/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTMyNDczNDI1MjgwMTQ1ODg2/bill_gates_2012_wikimedia_commons_promojpg.jpg", | |
backgroundImageURL: "https://i.ytimg.com/vi/Q5gO7Uvw3BU/hqdefault.jpg", | |
}, | |
computed: { | |
}, | |
methods: { | |
} | |
}); | |
function handleCharacterFileSelect(evt) { | |
var file = evt.target.files[0]; | |
if(!file.type.match("image.*")) { | |
alert("画像を入れてね"); | |
return; | |
} | |
var reader = new FileReader(); | |
reader.onload = function(e) { | |
vm.characterImageURL = e.target.result; | |
}; | |
reader.readAsDataURL(file); | |
} | |
function handleBackgroundFileSelect(evt) { | |
var file = evt.target.files[0]; | |
if(!file.type.match("image.*")) { | |
alert("画像を入れてね"); | |
return; | |
} | |
var reader = new FileReader(); | |
reader.onload = function(e) { | |
vm.backgroundImageURL = e.target.result; | |
document.getElementsByClassName("nameplate")[0].style.background = "url("+ e.target.result +")"; | |
console.log("attack"); | |
}; | |
reader.readAsDataURL(file); | |
} | |
document.getElementById("character_image").addEventListener("change", handleCharacterFileSelect); | |
document.getElementById("background_image").addEventListener("change", handleBackgroundFileSelect); | |
</script> | |
<script id="jsbin-source-css" type="text/css">bg-gray = rgba(170, 170, 170, 0.7) | |
bg-honor-normal = linear-gradient(to bottom, #e5e5e5 0%,#dfdedd 50%,#d1d1d0 51%,#c3c1bd 100%) | |
bg-honor-bronze = linear-gradient(to bottom, #f7956c 0%,#f3986d 50%,#da7f56 51%,#ffac7a 100%) | |
bg-honor-silver = linear-gradient(to bottom, #ffffff 0%,#d8f7fe 50%,#b0e6fc 51%,#fbffff 100%) | |
bg-honor-gold = linear-gradient(to bottom, #fffebe 0%,#ffed6e 50%,#fec85f 51%,#eda245 100%) | |
bg-honor-platinum = linear-gradient(to bottom, #fbfcd4 0%,#fdfac3 50%,#fcf4a9 51%,#fbeca7 100%) | |
body | |
font-family 'Helvetica Neue', 'メイリオ', sans-serif | |
.normal | |
background bg-honor-normal | |
.bronze | |
background bg-honor-bronze | |
.silver | |
background bg-honor-silver | |
.gold | |
background bg-honor-gold | |
.platinum | |
background bg-honor-platinum | |
.nameplate | |
/* background linear-gradient(to bottom, #038bb0, #0d46a5) */ | |
background url("https://i.ytimg.com/vi/Q5gO7Uvw3BU/hqdefault.jpg") | |
background-position -30px -80px | |
background-size cover | |
border-radius 5px | |
padding 10px | |
width 700px | |
.info | |
margin-left 80px | |
border-radius 5px | |
.ticket | |
background-color bg-gray | |
border-radius 5px | |
text-align center | |
padding 3px | |
margin-bottom 5px | |
.honor | |
border 2px solid #bbb | |
border-radius 5px | |
padding 3px | |
text-align center | |
margin-bottom 5px | |
font-size 1.2rem | |
font-weight bold | |
.user-container | |
display flex | |
.user | |
min-width 500px | |
height 115px | |
box-sizing border-box | |
background-color bg-gray | |
border-radius 5px | |
padding 20px 5px 5px5px | |
margin-right 5px | |
.level | |
display inline-block | |
width 80px | |
font-size 2rem | |
&::before | |
content 'Lv. ' | |
font-size 1.3rem | |
.name | |
display inline-block | |
font-size 2.5rem | |
.rating | |
border-top 1px solid #777 | |
box-shadow 0 1px 0 rgba(255,255,255,0.5) inset | |
font-weight bold | |
/* see: http://bashalog.c-brains.jp/15/04/15-205258.php | |
ここもミソ(下記参照) ここにpositionとz-indexを書かないと影が正しく映らない(スタックコンテキスト)。 | |
*/ | |
position relative | |
z-index 0 | |
.rating-char | |
font-size 1.0rem | |
width 90px | |
letter-spacing 0 | |
.rating-value | |
font-size 1.6rem | |
letter-spacing 4px | |
.rating-char, .rating-value | |
display inline-block | |
/* 縁取り */ | |
-webkit-text-stroke 0.4px black | |
/* | |
see: https://www.viget.com/articles/background-clip-text-shadow-gradients | |
ここではbackground-clipとtext-fill-colorで文字の背景がbackgroundに指定した画像になるようにしている。しかし、これにtext-shadowをつけると、影が文字の前面に来てしまうという問題を解決するために::afterでゴニョゴニョ | |
*/ | |
-webkit-background-clip text | |
-webkit-text-fill-color transparent | |
position relative | |
&::after /* ここがミソなんだな */ | |
content attr(data-value) | |
display inline-block | |
position absolute | |
left 0 | |
top 0 | |
text-shadow 2px 2px 2px rgba(0, 0, 0, 0.8) | |
z-index -1 | |
.character | |
min-width 115px | |
min-height 115px | |
max-width 115px | |
max-height 115px | |
box-sizing border | |
img | |
width 100%</script> | |
<script id="jsbin-source-javascript" type="text/javascript">var vm = new Vue({ | |
el: "#generator", | |
data: { | |
ticket: "アストライア様に踏まれるチケット", | |
honor: "音ゲーが苦手", | |
honorColor: "platinum", | |
level: "16", | |
name: "Gates☆", | |
rating: "13.83", | |
ratingColor: "silver", | |
characterImageURL: "https://www.biography.com/.image/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTMyNDczNDI1MjgwMTQ1ODg2/bill_gates_2012_wikimedia_commons_promojpg.jpg", | |
backgroundImageURL: "https://i.ytimg.com/vi/Q5gO7Uvw3BU/hqdefault.jpg", | |
}, | |
computed: { | |
}, | |
methods: { | |
} | |
}); | |
function handleCharacterFileSelect(evt) { | |
var file = evt.target.files[0]; | |
if(!file.type.match("image.*")) { | |
alert("画像を入れてね"); | |
return; | |
} | |
var reader = new FileReader(); | |
reader.onload = function(e) { | |
vm.characterImageURL = e.target.result; | |
}; | |
reader.readAsDataURL(file); | |
} | |
function handleBackgroundFileSelect(evt) { | |
var file = evt.target.files[0]; | |
if(!file.type.match("image.*")) { | |
alert("画像を入れてね"); | |
return; | |
} | |
var reader = new FileReader(); | |
reader.onload = function(e) { | |
vm.backgroundImageURL = e.target.result; | |
document.getElementsByClassName("nameplate")[0].style.background = "url("+ e.target.result +")"; | |
console.log("attack"); | |
}; | |
reader.readAsDataURL(file); | |
} | |
document.getElementById("character_image").addEventListener("change", handleCharacterFileSelect); | |
document.getElementById("background_image").addEventListener("change", handleBackgroundFileSelect);</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: 'Helvetica Neue', 'メイリオ', sans-serif; | |
} | |
.normal { | |
background: linear-gradient(to bottom, #e5e5e5 0%, #dfdedd 50%, #d1d1d0 51%, #c3c1bd 100%); | |
} | |
.bronze { | |
background: linear-gradient(to bottom, #f7956c 0%, #f3986d 50%, #da7f56 51%, #ffac7a 100%); | |
} | |
.silver { | |
background: linear-gradient(to bottom, #fff 0%, #d8f7fe 50%, #b0e6fc 51%, #fbffff 100%); | |
} | |
.gold { | |
background: linear-gradient(to bottom, #fffebe 0%, #ffed6e 50%, #fec85f 51%, #eda245 100%); | |
} | |
.platinum { | |
background: linear-gradient(to bottom, #fbfcd4 0%, #fdfac3 50%, #fcf4a9 51%, #fbeca7 100%); | |
} | |
.nameplate { | |
/* background linear-gradient(to bottom, #038bb0, #0d46a5) */ | |
background: url("https://i.ytimg.com/vi/Q5gO7Uvw3BU/hqdefault.jpg"); | |
background-position: -30px -80px; | |
background-size: cover; | |
border-radius: 5px; | |
padding: 10px; | |
width: 700px; | |
} | |
.info { | |
margin-left: 80px; | |
border-radius: 5px; | |
} | |
.ticket { | |
background-color: rgba(170,170,170,0.7); | |
border-radius: 5px; | |
text-align: center; | |
padding: 3px; | |
margin-bottom: 5px; | |
} | |
.honor { | |
border: 2px solid #bbb; | |
border-radius: 5px; | |
padding: 3px; | |
text-align: center; | |
margin-bottom: 5px; | |
font-size: 1.2rem; | |
font-weight: bold; | |
} | |
.user-container { | |
display: flex; | |
} | |
.user { | |
min-width: 500px; | |
height: 115px; | |
box-sizing: border-box; | |
background-color: rgba(170,170,170,0.7); | |
border-radius: 5px; | |
padding: 20px 5px 5px 5px; | |
margin-right: 5px; | |
} | |
.level { | |
display: inline-block; | |
width: 80px; | |
font-size: 2rem; | |
} | |
.level::before { | |
content: 'Lv. '; | |
font-size: 1.3rem; | |
} | |
.name { | |
display: inline-block; | |
font-size: 2.5rem; | |
} | |
.rating { | |
border-top: 1px solid #777; | |
box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset; | |
font-weight: bold; | |
/* see: http://bashalog.c-brains.jp/15/04/15-205258.php | |
ここもミソ(下記参照) ここにpositionとz-indexを書かないと影が正しく映らない(スタックコンテキスト)。 | |
*/ | |
position: relative; | |
z-index: 0; | |
} | |
.rating-char { | |
font-size: 1rem; | |
width: 90px; | |
letter-spacing: 0; | |
} | |
.rating-value { | |
font-size: 1.6rem; | |
letter-spacing: 4px; | |
} | |
.rating-char, | |
.rating-value { | |
display: inline-block; | |
/* 縁取り */ | |
-webkit-text-stroke: 0.4px #000; | |
/* | |
see: https://www.viget.com/articles/background-clip-text-shadow-gradients | |
ここではbackground-clipとtext-fill-colorで文字の背景がbackgroundに指定した画像になるようにしている。しかし、これにtext-shadowをつけると、影が文字の前面に来てしまうという問題を解決するために::afterでゴニョゴニョ | |
*/ | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
position: relative; | |
} | |
.rating-char::after, | |
.rating-value::after { | |
content: attr(data-value); | |
display: inline-block; | |
position: absolute; | |
left: 0; | |
top: 0; | |
text-shadow: 2px 2px 2px rgba(0,0,0,0.8); | |
z-index: -1; | |
} | |
.character { | |
min-width: 115px; | |
min-height: 115px; | |
max-width: 115px; | |
max-height: 115px; | |
box-sizing: border; | |
} | |
.character img { | |
width: 100%; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var vm = new Vue({ | |
el: "#generator", | |
data: { | |
ticket: "アストライア様に踏まれるチケット", | |
honor: "音ゲーが苦手", | |
honorColor: "platinum", | |
level: "16", | |
name: "Gates☆", | |
rating: "13.83", | |
ratingColor: "silver", | |
characterImageURL: "https://www.biography.com/.image/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTMyNDczNDI1MjgwMTQ1ODg2/bill_gates_2012_wikimedia_commons_promojpg.jpg", | |
backgroundImageURL: "https://i.ytimg.com/vi/Q5gO7Uvw3BU/hqdefault.jpg", | |
}, | |
computed: { | |
}, | |
methods: { | |
} | |
}); | |
function handleCharacterFileSelect(evt) { | |
var file = evt.target.files[0]; | |
if(!file.type.match("image.*")) { | |
alert("画像を入れてね"); | |
return; | |
} | |
var reader = new FileReader(); | |
reader.onload = function(e) { | |
vm.characterImageURL = e.target.result; | |
}; | |
reader.readAsDataURL(file); | |
} | |
function handleBackgroundFileSelect(evt) { | |
var file = evt.target.files[0]; | |
if(!file.type.match("image.*")) { | |
alert("画像を入れてね"); | |
return; | |
} | |
var reader = new FileReader(); | |
reader.onload = function(e) { | |
vm.backgroundImageURL = e.target.result; | |
document.getElementsByClassName("nameplate")[0].style.background = "url("+ e.target.result +")"; | |
console.log("attack"); | |
}; | |
reader.readAsDataURL(file); | |
} | |
document.getElementById("character_image").addEventListener("change", handleCharacterFileSelect); | |
document.getElementById("background_image").addEventListener("change", handleBackgroundFileSelect); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment