きゃす - Ikkaku

喫煙はあなたにとって肺気腫を悪化させる危険性を高めます。
未成年の喫煙は法律で禁止されています。

INFORMATION

煙草のパッケージをcssとhtmlで再現しようのコーナー。いつまで続くのか?私の気が済むまで。
第四弾はキャスター。結構再現度高いと思いますがどうでしょう?
2015年にキャスターからウィンストンに名前が変わっています。ピースとはまた違ったバニラフレーバーが好きです。あと副流煙の匂いがあまり臭くないのがとてもよろしい。
配色を変えれば別の銘柄に変えられるかも？

SOURCE&CODE

いつものように自動改行は「しない」で制作しています。
キャスターのロゴっぽいのは自作しました。本物と比べてはいけません。（戒め）画像はこちらから保存してください。

head

<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Sawarabi+Mincho&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:#fff;
color: #786940;
 font-size: 13px;
 line-height: 1.6;
 word-wrap : break-word;
background-image:url(#ロゴの画像URL#);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left left;}

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: right;}

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

h1{font-family: 'Crimson Text', serif;
color:#000;
 font-size: 42px;
 text-align: right;
 top: 15px;
 display: inline;
 padding: 0 2%;
letter-spacing: 10px;
}

h2{font-family: 'Crimson Text', serif;
 color: #b9181f;
 margin-bottom: 12px;}

h2 span{
  font-size: 40px;
 float: right;
 padding: 0 10px;
}

h3 {
  position: relative;
  padding: 0.25em 0;
}
h3:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(185, 24, 31), transparent);
  background: linear-gradient(to right, rgb(185, 24, 31), transparent);
}


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

hr{border-top:1px solid #000;}

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;
 color: #71611f;
 text-decoration: none;}

nav a:hover{
background: url(https://alicex.jp/data/oneblock/img/oneblock_upld_57.png)  no-repeat left top;
 color: #71611f;}

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

.footer{ text-align: center;}

.footer a{ padding: 0 3px;}


.color{ color: #a44;}

textarea{
font-family: 'Sawarabi Mincho', sans-serif;
border:0;
padding:10px;
font-size:10px;
color:#786940;
background:#fff;
border:solid 1px #ccc;
margin:0 0 20px;
width:200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);}
--></style>

html

<section id="top"><div class="all top"><br><br><br><h1><font color="#b9181f">●</font><font color="#71611f">●</font><font color="#e9cd8c">●</font><br>CASTER</h1><br><br><h2>SYMPHONIC<span>5</span><br>Mild</h2>
<br>
<nav><a href="#info">info</a><a href="#">contents</a><a href="#">memo</a><a href="#">source</a></nav>
</div>
<div class="all">
<section id="info">
<article>
喫煙はあなたにとって肺気腫を悪化させる危険性を高めます。<br>未成年の喫煙は法律で禁止されています。<br>
</article><br><article>
<h3>INFORMATION</h3>
煙草のパッケージをcssとhtmlで再現しようのコーナー。いつまで続くのか？私の気が済むまで。<br>
第四弾はキャスター。結構再現度高いと思いますがどうでしょう？<br>
2015年にウィンストンに名前が変わっています。ピースとはまた違ったバニラフレーバーが好きです。あと副流煙の匂いがあまり臭くないのがとてもよろしい。<br>色を変えれば別の銘柄に変えられるかも？<br><center><a href="#top">△</a></center></article></div>

△

●●●
CASTER

SYMPHONIC5
Mild

INFORMATION

SOURCE&CODE

head

html

●●●CASTER

SYMPHONIC5Mild

INFORMATION

SOURCE&CODE

head

html

●●●
CASTER

SYMPHONIC5
Mild