せったー - Ikkaku

source&code

html

<center><div class="fil-wrapper">
  <span class="fil">★</span>
  <div></div></div></center>
<section id="top"><div class="all top"><h1>Seven Stars</h1><br><br><br><nav><a href="#info">info</a><a href="#">contents</a><a href="#">memo</a><a href="#source">source</a></nav></div>

<div class="all">
<section id="info"><article>
<h3>information</h3><br>
煙草のパッケージをcssとhtmlで作ってみようのコーナー。<br>第二弾はセブンスター。煙草知らない方もセッタ、という言葉を知ってる方も多いでしょうか。<br>再現度はあまり高くありません…。私の腕ではこれが限界でした…。<br><br>
<h3>( ! ) caution</h3><br>
喫煙はあなたにとって肺がんの原因のひとつとなります。などなど。<br>
<center><a href="#top">△</a></center></article><br></div>
<h2>Charcoal Filter</h2>

head

<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great|Sawarabi+Mincho&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap" rel="stylesheet">
<style type="text/css"><!--
body,h1,h2,h3,h4,p{
 margin: 0;
 padding: 0;}

body{font-family: 'Sawarabi Mincho', sans-serif;
  background: url(##背景画像URL##) #FFF;
    background-size: 30px;


color: #222222;
 font-size: 13px;
 line-height: 1.6;
 word-wrap : break-word;}

a{
 color: #000;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 tap-highlight-color: rgba(0,0,0,0);}

a:hover{
 text-decoration: none;
 color: #a44;}

a:active{ color: #a44;}

.all{
 max-width: 500px;
 margin: auto;
padding: 25px 15px 0 15px;
 margin-top: 30px;}

.top{ text-align: center;}

h1,h2,h3,h4{
 font-family: 'Sawarabi Mincho', sans-serif; ProN W3','ＭＳ Ｐ明朝',serif;
 letter-spacing: 1px;}

h1{color:#000;
 font-size: 42px;
 text-align: center;
 position: relative;
 top: 15px;
 display: inline;
font-family: 'DM Serif Display', serif;
 display        : inline-block;

  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;       
background:url(##7の画像ＵＲＬ##) no-repeat center 20px; padding:65px 0 7px; }

h2{
font-family: 'DM Serif Display', serif;
 font-size: 150%;
 color: #000;
 text-align: center;
 margin-bottom: 12px;
font-style : italic;
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff; }

h3{
  color: #364e96;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #364e96;/*上線*/
  border-bottom: solid 3px #364e96;/*下線*/
}

h4{color:#fff;
display:inline-block;
margin:.3em 0; padding:.3em .7em .2em .8em;
background:#2c2c2c; font-size:90%;}

nav{
 letter-spacing: 1px;
 text-align: center;
 padding: 24px 0;
}

nav a{
 display: inline-block;
margin:.3em 0; padding:.3em .3em .2em .3em;
 width: 20%;
 margin: 0 3px;
background:rgba(0,0,0,0.5);
 color: #fff;
 text-decoration: none;}

nav a:hover{
 background-color :#191970;
 color: #fff;}

article{
  margin: 0;
  padding: 15px;
text-align:left;
  position: relative;
  border: 1px solid #1a2930;
background:#fff;}


.footer{ text-align: center;}

.footer a{ padding: 0 3px;}

p{ padding: 3px 0;
font-weight:normal;}

.color{ color: #a44;}

hr{border:0;
height: 10px;
  background-image: linear-gradient(
    hsla(0, 0%, 100%, 1),
    hsla(0, 0%, 100%, 1) 33.33%,
    hsla(0, 0%, 100%, 0) 33.33%,
    hsla(0, 0%, 100%, 0) 100%);
  background-size: 100% 3px;
  width: 40px;
}

.fil-wrapper {  
  display: block;
  position: relative;
  margin: 15px auto;
  padding: 10px 0;
  width: 100px;
  
  box-sizing: border-box;
  }

.fil {  
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 10px 0;
  z-index: 2;
  width: 100px;
  text-align: center;
  font-size: 17px;
  color: white;
  background: #191970;
}

.fil:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  height: 0;
  width: 10px;
  border-left: 30px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 10px solid transparent;
}

--></style>