CSS3でストライプの背景を作る新規追加しました。

こんにちは!山本です!

さぁ、子供達の夏休みもあとわずか。山本は親族の宿題の手伝いをさせられていますが、みなさんはいかがお過ごしでしょうか?

母型の親族になりますが、いやぁ、最近の子供はすごいですね!メールで手伝ってほしい宿題のヶ所を山本まで送りつけてきます(笑)その中でも子供たちに一番不評な夏休みの宿題と言えば、「読書感想文」のようで….山本、この一週間で何冊本を読まされるのか心配になる上、「この野郎!親に手伝ってもらいやがったな!?」と丸出しの宿題を提出されるのかと思うと、子供たちが先生に怒られやしないか、心配になります。

ちなみに彼らの自由研究は山本のサイトからコピペして、「css3とは?」という題材で提出するそうです。。。。。まぁ、役に立つのならなんなりと使ってください^^;

さて、子供達から20分に一回づつ宿題が送られているので、大人の私も宿題と並行しつつ、アップデートしていきたいと思います。

今回のCSS3のテーマは「ポップなストライプ背景を作る」です。実は一昔前まで、ビットマップを使用せずにストライプ模様を作るという方法は非常に困難を極めました。フォトショップやイラストレーターなどの専用ソフトが必要となり、配置に視覚など、あらゆる操作が別段で必要な作業として大変な思いをさせられました。しかし、WEBサイト背景画像もしかり、ストライプは雑誌やポスターなどでも欠かせない素材となります。

今回は軽く重複感のない美しいストライプを、CSS3で実現させます。

カラーストップを上手く使って同系色のストライプを作りました。今回のコツは背景サイズを同時に設定している部分です。記述されている順に、幅と高さを設定しています。幅は表示幅目一杯の100%、高さは30pxですので、一つのストライプにつきカラーストップは50%の表示設定の記述をしているので、一色につき半分の15pxの計算になります。

背景サイズの高さとカラーストップの表示%を変更することによって、様々なストライプを生み出すことが出来ます。

この方法を覚えると、「自分だけの複雑なストライプカラー」を実現させることが出来ます。ちょっと素敵ですよね。様々な色味を自分なりに作って遊んでみてください。

すぐに背景適用したい方は、サイトよりコードをコピペしてご利用ください。

今日は少し秋模様な朝でした。今日の夜は少し先の秋を想い、クーラーをかけながら鍋でもしたいと思います。山本でした!

▼▼BLACK SHIVAサイトはこちら▼▼

https://black-shiva.com/