CSSでMarlboroの透明文字をデザインしてみた

マルボロのパッケージが全面刷新されてから、Marlboroの文字やシンボルマークが透明になりました。光の加減でツヤツヤ、キラキラするので、ぼーっと眺めてしまうことがあります。

透明の文字って印刷コストどうなんだろうなぁ、黒インクより低コストなのかなぁ、昔はこんな色で印刷できなかったんだろうなぁ、とか思いながら・・・・・・ふと、「これCSSで出来るのかな?」と思い立ち、やってみました。

Marlboroの透明文字をCSSで再現してみるというテーマですので、テキストの部分は直接HTMLに記述しています(全てをCSSで描いたものではありません)。また、シンボルマークは形が複雑すぎたので、付けていません。Marlboroファンの方はごめんなさい!

ベンダープレフィックスは付けておらず、ChromeとFireFoxで少しだけ見た目が異なりますが、Chromeでの表示が狙い通りのものです。IE11に未対応で、その他のブラウザでは確認していません。指定フォントが入っていないパソコンやスマホから見ると、テキスト部分がズレると思います。

ちなみに、マウスを乗せると、メンソールになります。

完成形

どうにか、透明文字っぽく見えるでしょうか?
今回は、透明文字を実現するためにmix-blend-modeプロパティを使用しています。

marlboro
selected premium tobaccos.

喫煙は、あなたにとって肺気腫を悪化させる危険性を高めます。

(詳細については、厚生労働省のホーム・ページwww.mhlw.go.jp/topics/tobacco/main.htmlをご参照ください。)

HTMLマークアップ

HTMLマークアップはこのようになっています。

		
marlboro
selected premium tobaccos.

喫煙は、あなたにとって肺気腫を悪化させる危険性を高めます。

(詳細については、厚生労働省のホーム・ページ www.mhlw.go.jp/topics/tobacco/main.htmlをご参照ください。)

CSSの全体像

.marlboroBox {
	position: relative;
	width: calc( 548px / 2 );
	height: calc( 890px / 2 );
	overflow: hidden;
	background: #EEE;
	box-sizing: content-box;
	padding: 20px;
	margin: 0 0 30px;
}

.marlboro {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(255,255,255,1);
	width: 548px;
	height: 890px;
	border: 1px solid #999;
	overflow: hidden;
	transform:
		translate(-117px,-202px)
		scale(0.5)
	;
}

.marlboro__cover {
	box-sizing: content-box;
	width: 10px;
	height: 0;
	border: calc( 538px / 2 ) solid #A00;
	border-bottom: 156px solid transparent;
}

.marlboro:hover .marlboro__cover {
	border: calc( 538px / 2 ) solid #050;
	border-bottom: 156px solid transparent;
}

.marlboro__name {
	position: absolute;
	top: 250px;
	left: -10px;
	width: 100%;
	text-transform: capitalize;
	font-size: 120px;
	font-weight: bold;
	transform: scale(0.9,1.6);
	color: rgba(0,0,0,0.5);
	mix-blend-mode: hard-light;
	text-shadow:
		1px 1px 4px rgba(255,255,255,0.9)
	;
	opacity: 0.7;
}

.marlboro__copy {
	position: absolute;
	top: 555px;
	left: 0;
	width: 100%;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 22px;
	transform: scaleY(0.8);
	text-align: center;
	letter-spacing: 4px;
	color: rgba(0,0,0,0.3);
}

.marlboro__text {
	position: absolute;
	top: 600px;
	left: 0;
	width: 100%;
	border-top: 2px solid #000;
	padding: 0 0 0 20px;
}

.marlboro__text p {
	line-height: 1.6;
	font-size: 34px;
	letter-spacing: 3px;	
}

.marlboro__text p:first-line {
	letter-spacing: 0;
}

.marlboro__text p:last-child {
	font-size: 20px;
	line-height: 1.6;
}

.marlboro__text p:last-child:first-line {
	letter-spacing: 3px;
}

.marlboro__text p span {
	display: block;
	letter-spacing: 2px;
}

.marboro__boxtop {
	position: absolute;
	top: 260px;
	left: 0;
	width: 100%;
	mix-blend-mode: soft-light;
	border: 1px solid rgba(0,0,0,1);
	box-shadow: 0px 2px 2px rgba(255,255,255,1);
}

一部CSSの解説や補足

CSSを全行解説するのは非常に手間がかかるので、一部だけ解説・補足します。何か一部分だけでも参考になりましたら幸いです。

「Marlboro」の文字部分

最初からクライマックスのようなノリですが、この部分が透明文字部分のコードです。

照明効果にもなるようtext-shadowで白い影を付け、
mix-blend-mode: hard-light;を指定し、
color: rgba(0,0,0,0.5);で文字を灰色にしています。

最後に、opacity: 0.7;を指定し、要素全体を透過して微調整しました。

text-shadowを複数指定し、より複雑な値にすれば、もっと立体感を出せると思います。

.marlboro__name {
	position: absolute;
	top: 250px;
	left: -10px;
	width: 100%;
	text-transform: capitalize;
	font-size: 120px;
	font-weight: bold;
	transform: scale(0.9,1.6);
	color: rgba(0,0,0,0.5);
	mix-blend-mode: hard-light;
	text-shadow:
		1px 1px 4px rgba(255,255,255,0.9)
	;
	opacity: 0.7;
}

厚生労働省の注意書き部分

地味に調整を繰り返したのが、注意書きの部分です。実際のパッケージに印刷されている注意書きを参考に、文字サイズや行高、行間や字間をそれっぽく調整しています。

この部分、昔ながらのIEファンならお馴染みのtext-align: justify;を使えば楽だと思うのですが、Chromeさんがうまく表示してくれないので、チマチマ調整することになりました。

:first-lineなら稀に使用しますが、:last-child:first-lineというセレクタは初めて書いたかもしれません。

.marlboro__text p {
	line-height: 1.6;
	font-size: 34px;
	letter-spacing: 3px;	
}

.marlboro__text p:first-line {
	letter-spacing: 0;
}

.marlboro__text p:last-child {
	font-size: 20px;
	line-height: 1.6;
}

.marlboro__text p:last-child:first-line {
	letter-spacing: 3px;
}

.marlboro__text p span {
	display: block;
	letter-spacing: 2px;
}

箱のフタの部分の切れ目

Marlboroの文字に重なっている、箱のフタの部分の切れ目です。ここでもmix-blend-modeを使っています。

.marboro__boxtop {
	position: absolute;
	top: 260px;
	left: 0;
	width: 100%;
	mix-blend-mode: soft-light;
	border: 1px solid rgba(0,0,0,1);
	box-shadow: 0px 2px 2px rgba(255,255,255,1);
}

今回の反省点、赤い部分(緑の部分)

この赤い部分を見るだけで、マルボロだ!と分かる形です。

実際のパッケージの白い部分に焦点を当ててみると、三角形の頂点は角丸になっていますので、borderプロパティでデザインするより、角丸にした四角形をtransform: scaleY() rotate()の記述で変形させたものを配置したほうが良かったのかもしれません。

今回は下記のコードで、赤い部分を、白い台形で繰り抜いてデザインしてしまいました。

.marlboro__cover {
	box-sizing: content-box;
	width: 10px;
	height: 0;
	border: calc( 538px / 2 ) solid #A00;
	border-bottom: 156px solid transparent;
}

.marlboro:hover .marlboro__cover {
	border: calc( 538px / 2 ) solid #050;
	border-bottom: 156px solid transparent;
}

最後に

最後までお付き合いいただき、ありがとうございました。

mix-blend-modeプロパティもベンダープレフィックス無しで表示できるようになってきており、大きな役割を持ったコンテンツ以外でなら、もう十分に使用できそうです。

描画モードを駆使したデザインは、昨今のデザイントレンドの移り変わりで使い所が難しいかもしれません。 しかし、サイトのジャンルによっては描画モードを手軽に使えるmix-blend-modeは、待ちに待ったプロパティだと言えるでしょう。

参考:
background-blend-mode プロパティで背景をブレンドしてみよう
パッケージを約60年ぶりに全面刷新、前進を続ける新生『マールボロ』
Marlboro Photo by gangster16 | Photobucket