水族館 | ナノ

水族館みたいな雰囲気にしてみました。
リンクはオンマウスにするとぷくーっと水滴っぽくなります。
リンクの速度はHEAD内の0.5sとなっている数字をいじると変わります。
この枠の色はrgb(RGBカラー)で設定しています。
いつも使っている#ffffffや#0000ffは16進法で色を表したものなのでこの枠の色を変えたい場合は、必ずrgbカラーに変換してから入力してください。(例:#ffffff→255,255,255)
※ネットで検索すれば変換してくれるサイトがあります。

説明長くてすみません;;ちょっとわかりづらい感じがしたので…

HEAD

*{margin:0 auto;
 padding:0 auto;}
body{margin:5%;
padding:5%;
  line-height: 2;
  font-family: メイリオ, Verdana, Arial, Osaka;
  font-size:13px;}

.background{
 z-index: -1;
 background: url(#画像url#) #fff no-repeat;
 position: fixed;
 background-position: center top;
 background-size:cover;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;}

.waku{background:rgba( 0,0,0, 0.5);
padding:20px;
border-radius:40px;
text-align:left;
border:dotted #ffffff 2px;}

.title{font-family: 'Engagement', cursive;
line-height:170%;
font-size:70px;
color: #fff;
border-radius:30px;
padding:10px;
text-shadow:-1px -1px #66ffcc,
-1px 1px #3333cc,
1px -1px #cc33ff,
1px 1px #ff3399;}

p{font-family: 'Engagement', cursive;
font-size:30px;
line-height:2;}

a{text-decoration:none;
color:#fff;
text-shadow:-1px -1px #66ffcc,
-1px 1px #3333cc,
1px -1px #cc33ff,
1px 1px #ff3399;
 transition: 0.5s;
 -ms-transform: 0.5s;
 -webkit-transform: 0.5s;
 -moz-transform: 0.5s;
 -o-transform: 0.5s;}

a:hover{position:relative;
bottom:2px;
color:#fff;
background:url(#画像url#);
padding:10px;
border-radius:50px;}
</style>

BODY

素材↓

縮小して表示しています。

人気急上昇中のBL小説
BL小説 BLove

- ナノ -