カテゴリー: CSS3テクニック新規追加

こんばんは！もう春だ梅雨だと季節なんかすっとんで、一気に夏が来たような気がしている今日この頃ですが、みなさんいかがお過ごしですか？山本は少々死にそうになりながらアスファルトの上を歩いている日々です。

さて、暑さに死にそうになっていないで、今回は久しぶりにCSS3テクニックを更新させていただきました。

題材は「ローディングアニメーション」です。

WEBサイトをよくご利用になられる方はご存じではないでしょうか？しばらく画面にサイトが表示されるまでに待っていると、グーッと画面のど真ん中で伸びてくる、あの棒がローディングアニメーションです。

動くものを制作する、という言葉に難しいのではないだろうか？とアレルギーを持たれる方もいらっしゃるかもしれませんが、CSS3を用いれば、それほど難しいものではありません。

特にサイト制作者にはローディングインジケーターは必須となってきます。そこでコピペですぐに使えるように、様々なインジケーターを制作し、掲載しました。

お気軽にご利用ください。

やっぱりアニメーションって派手で私は大好きです。一昔前とは違って、本当にCSS3はイメージがなくても何でも叶えてくれる、魔法の言語になりつつあります。

どうぞ、BLACK SHIVACSS3テクニックを見ながら、自分のお好みのインジケータを制作して遊んでみてください。面倒な方は是非、私が作ったインジケータをコピペしてご利用ください！

by 山本

▼▼BLACK SHIVAはこちら▼▼

https://black-shiva.com/

こんにちは！山本です！

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

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

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

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

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

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

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

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

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

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

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

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

https://black-shiva.com/