Little Strange Software

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

(もしかしたら)iPhoneだと4になるサイコロ!?←ならなかったぽい^^;

 どうも!LSSです!!

 

 一昨日の記事、

さじさん(id:conasaji)にご協力いただいて、なんとかiPhoneでも正しく見れるようになったみたいです^^

 

解決策が見つかってよかった!

 

↑この記事のコメント欄にその経緯があります!

 

ところで…水玉デザイナーはiPhoneに対応したものの、他のものでもradial-gradientとtransparentを使ったものは、もしかしたらiPhoneでは違って見えてるのかも知れない?って気がしなくもないですw

 

ここのコメント欄とか^^;

 

ちなみに、7/27現在、PCで見ると

f:id:little_strange:20200727222345p:plain

こういうデザイン(↑は画像です)になっています。

 

 

あと、思ったのは…例えばサイコロをCSSで表現したとして、

 

CSSでデザインしたサイコロ(画像ではありません)

 

コード

<div style="width: 100px; height: 100px;
border: 1px solid black;
border-radius: 10px;
background-image:
radial-gradient(circle 10px at 25% 25%,black 99%, transparent 0%)
,radial-gradient(circle 10px at 75% 25%,black 99%, transparent 0%)
,radial-gradient(circle 10px at 25% 75%,black 99%, transparent 0%)
,radial-gradient(circle 10px at 75% 75%,black 99%, transparent 0%)
,radial-gradient(circle 10px at 50% 50%,black 100%, transparent 0%)
;"> </div>

 

↑のサイコロをPCで見ると

f:id:little_strange:20200727223243p:plain

↑こんな風に見える(こっちは画像です)のですが、中央にあたる部分だけわざと
radial-gradient(circle 10px at 50% 50%,black 100%, transparent 0%)

にしています。

これだけがiPhoneで見えなくなると、サイコロの目は4になったりするのかなぁ?

…とw

 

 

ところで、昨日の記事、

のコメント欄で、ともさん(id:tomoblogkun)から

「LSSさんに、僕の質素なブログページをカッコよくしてほしいです😆」

とのコメントをいただいて、ちょっと考えたコードを返信したのですが、成功するとタイトルがこんな感じになります。

トラック運転手ともさんの日常


text-shadowを2重に、右下ずらしで配置したものですが、自分で「ちょっとこれいいな」って思っちゃいましたw

text-shadowも工夫次第でまだまだ表現の幅が広がりそうですね^^

 

 

 

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

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

 

 

と、ちょっとだけ手を加えたものを追記!

 

背景色を指定していなかったので、
background-color: white;
を足してみました。