WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

text-shadowいろいろ

f:id:mmmmofu:20170613232714p:plain

デモ
http://efu.sakura.ne.jp/web/textshadow/

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>textshadow</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Salsa" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Fascinate" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Sail" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
<p class="text01 archivo">Text Shadow</p>
<p class="text02 bungee">Text Shadow</p>
<p class="text03 rubik">Text Shadow</p>
<p class="text04 salsa">Text Shadow</p>
<p class="text05 fascinate">Text Shadow</p>
<p class="text06 coiny">Text Shadow</p>
<p class="text07 sail">Text Shadow</p>
</body>
</html>

CSS

@charset "utf-8";

body {
  background: #888;
}

p {
  font-size: 50px;
  text-align: center;
  padding: 30px 0;
  color: #222;
  color: #ddd;
}

.archivo {
  font-family: 'Archivo Black', sans-serif;
}

.bungee {
  font-family: 'Bungee', cursive;
}

.rubik {
  font-family: 'Rubik Mono One', sans-serif;
}

.salsa {
  font-family: 'Salsa', cursive;
}

.fascinate {
  font-family: 'Fascinate', cursive;
}

.coiny {
  font-family: 'Coiny', cursive;
}

.sail {
  font-family: 'Sail', cursive;
}

.text01 {
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.text02 {
  text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.8), 1px 1px 1px rgba(255, 255, 255, 0.6);
}

.text03 {
  text-shadow:
  -1px 0px #2f2f2f,
  0px -1px #2f2f2f,
  1px -2px #2f2f2f,
  2px -3px #2f2f2f,
  3px -4px #2f2f2f,
  4px -5px #2f2f2f,
  5px -6px #2f2f2f,
  0px 1px #2f2f2f,
  1px 0px #2f2f2f,
  2px -1px #2f2f2f,
  3px -2px #2f2f2f,
  4px -3px #2f2f2f,
  5px -4px #2f2f2f,
  6px -5px #2f2f2f;
}

.text04 {
  text-shadow:
  0 0 25px #edf8ff,
  0 0 20px #edf8ff,
  0 0 0.40px #edf8ff;
  color: #888;
}

.text05 {
  text-shadow:
  0 2px 0 #222,
  0 3px 0 #5e5e5e,
  0 5px 0 #111,
  0 6px 0 #5e5e5e,
  0 8px 0 #000,
  0 6px 1px rgba(0,0,0,.1),
  0 0 5px rgba(0,0,0,.1),
  0 1px 3px rgba(0,0,0,.3),
  0 3px 5px rgba(0,0,0,.2),
  0 5px 10px rgba(0,0,0,.25),
  0 10px 10px rgba(0,0,0,.2),
  0 20px 20px rgba(0,0,0,.15);
}

.text06 {
  text-shadow: 0 15px 10px rgba(0,0,0,0.5);
}

.text07 {
  text-shadow:
  3px 4px 0px #3b3b3b,
  4px 5px 0px #616161;
}

参考
kachibito.net