Skip to content

Instantly share code, notes, and snippets.

@sei0o

sei0o/index.html

Forked from anonymous/index.html
Last active February 4, 2017 04:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sei0o/d5ab02965e1569f31b4fa24b0f9e5887 to your computer and use it in GitHub Desktop.
Save sei0o/d5ab02965e1569f31b4fa24b0f9e5887 to your computer and use it in GitHub Desktop.
Download ZIP
チュウニズムのネームプレートを生成する(手抜き) source http://jsbin.com/tulugi/19
Raw
index.html
<!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: "Ｇａｔｅｓ☆",
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-javascript" type="text/javascript">var vm = new Vue({
el: "#generator",
data: {
ticket: "アストライア様に踏まれるチケット",
honor: "音ゲーが苦手",
honorColor: "platinum",
level: "16",
name: "Ｇａｔｅｓ☆",
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>
Raw
jsbin.tulugi.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%;
}
Raw
jsbin.tulugi.js
var vm = new Vue({
el: "#generator",
data: {
ticket: "アストライア様に踏まれるチケット",
honor: "音ゲーが苦手",
honorColor: "platinum",
level: "16",
name: "Ｇａｔｅｓ☆",
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);
Raw
style.styl
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%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment