いつだって夏は
私にやさしくない

info main link

update

20190400＊更新履歴とか

20190400＊書いても

20190400＊いいと思います。

rank rank rank

12345

説明

リンク部分にホバーで真ん中から線がにゅっと出てきます。

＜span class="under"＞＜/span＞で囲むと点線が引けます。

見出し1

見出し2

タイトル部分のグラデーションの色を変えるだけでも雰囲気が変わるかもしれません。

背景画像は月の背中様からお借りしているものなので、そちらからダウンロードしてお使いください。

ソースとコード

自動改行「しない」で製作しています。

html

head

<style type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans);
*{margin:0; padding:0;}

body{
background-color:#000000;
background-image: url(##背景画像のURL##);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color : #ffffff;
  font-size:12px;
 letter-spacing:2.4px;
 line-height:2;
font-family:'Alegreya Sans',"Hannari","Sawarabi Mincho",Meiryo,Osaka,"MS ゴシック", sans-serif;
text-align:center;
}

a {color : #ffffff;
activ : #ffffff;
visited : #ffffff;
}

.wrp {
    max-width: 500px;
    margin: 50px auto 10px;
}

.wrp a {
    padding: 0 3px;
}

.top {
    margin: 0 20px;
}

.box{
background:rgba(0,0,0,.5);
margin:80px 20px 20px;
padding:15px;}


@media screen and (max-width:301px){
.box{
width:84%;
margin:4%;
padding:4%;
background:rgba(0,0,0,0.7);
border-radius:3px;
text-align:left;
display:inline-block;
vertical-align:top;
}}


p { font-size: 12px;}

h1 {
 font-family: "游明朝";
  position: relative;
  color: #6eb0f9;
  background: -webkit-linear-gradient(0deg, #44c0fe, #0036b4, #d7edff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.4;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
}

h2 {
font-size:15px  ;
border-bottom: solid 1px #ffffff;
}

h3 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

h3:before, h3:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: #ffffff;
}

h3:before {
  left:0;
}
h3:after {
  right: 0;
}

.under {
  border-bottom: dotted 2px #87CEFA;
}

.link {
  display: inline-block;
  position: relative;
  text-decoration: none;
}
.link::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: rgb(255, 255, 255);
  transition: all .3s ease 0s;
}
.link:hover{
  cursor: pointer;
}
.link:hover::after {
  width: 100%;
}

textarea {
    height: 50px;
    width: 50%;
    font-size: 12px;
    font-family: 'Antic Slab', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
    line-height: 180%;
    letter-spacing: 2px;
    color: #333;
    background: rgba(255,255,255,.5);
    border: solid 1px rgba(255,255,255,.5);
        -webkit-appearance: none;
    border-radius: 0;
    box-shadow: none;
    margin: 3px 0;
    padding: 3px;
}

</style>