Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

CSS模写?に挑戦!

 どうも!LSSです!!

 今回は堂々とパクリ企画ですw

 

 

作ったのがこれ

 

「青い空とペンキ塗り。」

 

 コード

<div style="width: 350px; border-radius: 15px; background-image: linear-gradient(90deg, hsl(223,100%,70%) 0%,hsl(179,100%,60%) 60%, hsl(193,100%,97%) 100%); color: white; text-shadow: 12px 12px 5px #444455; font-size: 23px; padding: 1em;">「青い空とペンキ塗り。」</div>

 

 

元ネタ

さじさん(id:conasaji)がCSSグラデーションを使ってイメージを形にしようとされている記事です。

記事の最後に 「目指したのはこちらです」と、イラレで目指したイメージを描かれていたので、勝手に挑戦してみました!

 

 色選びが難しいですね^^;

 できるだけ近づけてみたつもりですが、まだ届かないかも。

 

 

一応、コード解説

<div style="width: 350px; border-radius: 15px; background-image: linear-gradient(90deg, hsl(223,100%,70%) 0%,hsl(179,100%,60%) 60%, hsl(193,100%,97%) 100%); color: white; text-shadow: 12px 12px 5px #444455; font-size: 23px; padding: 1em;">「青い空とペンキ塗り。」</div>

 

 全部divタグに書き込んでいます。

 

width: 350px;

ボックスの幅を350pxに指定。
高さは指定していません。

 

border-radius: 15px;

ボックスを角丸にして、角のサイズを15pxにしています。

 

background-image: linear-gradient(

ボックスの背景を直線グラデーションにしています。

 

90deg,

左から右へのグラデーションなので90degを指定。

時計の針で例えると「12時方向から90°回転した3時方向」です。

 

hsl(223,100%,70%) 0%,hsl(179,100%,60%) 60%, hsl(193,100%,97%) 100%);

0%の位置(ボックス左端)、60%の位置(ボックス中央よりやや右)、100%の位置(ボックス右端)の色を指定しています。

それぞれの中間がグラデーションで補填されます。

 

color: white;

ボックスの中の文字色です。

 

text-shadow: 12px 12px 5px #444455;

右に12px、下に12pxずらしたところに#444455という色の影を落とします。

5pxの強さでぼかしています。

 

font-size: 23px;

ボックスの中の文字サイズを23pxにしています。

 

padding: 1em;

ボックスの中の余白を1em(1文字分、という意味になります)としています。

 

 

他のものをCSSで似せるのも面白いですね^^

 さじさんの記事のコメント欄で「再現してほしい」と書いていただいていますが、この記事はそれを読む前から書き始めていますwww

 CSSで出来る事はかなりたくさんありますが、それでかっこいいものが作れるかどうかはセンスにかかってきますね。

 

 さじさんにお題を出してもらって、CSSで再現に挑戦するのも面白いかも、と思いましたw 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^