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

こんにちは!山本です!

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

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

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

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

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

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

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

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

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

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

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

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

https://black-shiva.com/

CSS3で作る円形グラデーションとツートン背景

今日もお日様さんさん、天気がいいですね。みなさん、いかがお過ごしですか?

夏になると山本は不眠症を起こすことが多く、困っています;;他の季節には本当にないことなのですが、やれトイレだ、やれ悪夢だと、やっと寝付いた頃にはすぐに目を覚ますというていたらく……この仕事に就いて早10年……山本もそろそろ歳でしょうか?

さて、体の不具合は気合で吹っ飛ばして!今回は円形グラデーションとツートンカラー背景の作り方を掲載しております。

円形は丁度アイキャッチ画像で使わせていただいているものがそうなのですが、中央から放射状に色味が広がっていくようなデティールで、ホームページを立体的に表示してくれる優れものです。

使い方によっては、同色を組み合わせたカラーストップなんかも非常に素敵です。もう一店はポップで可愛いツートンカラーのお出ましです!

基本的には通常のグラデーション背景と同じく、linear-gradientを使用するのですが、カラーストップを50%50%で半分づつ設定することによって、接点(境目)が同じ場所になる為、グラデーションを消失させます。

背景カラートーンはホームページのイメージを決める上で非常に重要なものとなります。色味はサイト持ち主の気持ちや、扱う職種・雰囲気を物語ります。

カラーバリエーションの組み合わせが思いつかないという方には、まずは「類似色」の組み合わせがお勧めです。「赤色系」、「青色系」といったように、同系色の濃淡で組み合わせてください。茶&オレンジなら暖かい暖色系、赤やピンクの組み合わせなら女性らしい・フェミニン系、青やコバルトブルーなどの組み合わせなら寒色系、赤&黄色などの組み合わせなら元気いっぱいの原色系、様々な雰囲気をつかむことができます。

是非、掲載しているコードをコピペして、さまざまな色味をセットアップして使ってみてください!ご自身が願っていた色味が必ず見つかります。

by山本

▼▼BLACK SHIVAはこちらから▼▼

https://www.black-shiva.com/

BLACK SHIVA CSS3 Technique掲載開始しました。

一般の方のお盆休みは、今日明日まででしょうか?みなさん、お盆はいかがでしたか?やっぱり今年も一般のお盆休みは一日も取れず、ひたすら仕事に邁進しておりました、山本です。ITのお仕事につかれている方は多いと思うのですが、・・・こう・・・盆休みはずれて取るという方も多いのではないのでしょうか?山本はもっぱらずれて取る方ですので、ああ、、、21日が待ち遠しいです。。。

さて、本日よりBLACK SHIVA@YAMAMOTO STUDIOに「CSS3テクニック」を掲載することとなりました!元々はみなさんご存知の通り、「スライダー壁紙」という項目欄をセッティングしていたのですが、、、、壁紙で十分対応できる感じですので、ここからはスライダーを思い切って削除!CSS3テクニックに変更します!

素材屋と堂々と出していてなんなの?と思われるかもしれませんが、、、私は現役のWEBデザイナーでして、日々ホームページを作っております。レスポンシブデザイン(PC・PAD・スマホ対応)をしておりますと、本当にビットマップ画像を使用することが少なくなります。

理由としては1枚のスタイルシートとHTMLシートにてPC・スマホ・PAD対応する為、ビットマップでは非常に動作が重くなり、ボタンなども見にくくなります。

CSSは2003年~4年を境に技術が革新的に飛躍し、「ホームページのスタイル設定のみ」という極めて限られた存在から、昨今では100近い幅広いW3Cの仕様が形成されました。今まではホームページ素材と言えば、ビットマップ形式で別制作をし、cssにて定義することを余儀なくされていたイラストレーターやフォトショップの作業、またはJavaScriptを使用した動作などの作業を別シートにてリンクさせられていたものを、シンプルな構造物であれば、アニメーションからWEB素材、インタラクティブな操作に至るまで、cssにて対応することが可能になりました。

しかし、仕様が広がった分、全ての技術を網羅し、認識することはすることはなかなか困難を極めます。このBLACK SHIVA CSS Techniqueはこのサイトの作者、山本の備忘録であり、皆様と共有していく上で、より発展した技術を高めていくことを目的に掲載しております。

コードを掲載しておりますので、コピペで簡単に、無料でご利用いただけます。まだ項目も少なく、今からどんどんと制作していく次第ではありますが、お気軽にご利用ください。

by 山本

▼▼BLACK SHIVA@YAMAMOTO STUDIOはこちら!▼▼

http://www.black-shiva.com/

Galaxy Vol.3 AW新規イラスト追加しました!

本格的なお盆休みに入りましたね^^墓参りの途中、暑さに行き倒れそうになった山本です。

みなさんいかがお過ごしでしょうか?さて、BLACK SHIVAでは人気のイラストカット、Galaxyシリーズを追加新規アップいたしました。

宇宙や天体素材は当店ではとっても人気があり、今回のアップデートはリクエストにお応えいたしましてのアップデートとなります。

今年の3月に5パターン程の天体素材を掲載させていただきましたが、「水そのものの質感のものが欲しい」というお問合せをいただきまして、掲載させていただきます。

リアルな小波をイメージした「トラピストC」。本物は全く違う天体イメージでありますが、とても地球と環境が似た星と言われています。大きな水面波紋を使用したイメージが「トラピストE」として掲載させていただきました。

どちらも「地表の存在しない、永遠に広がる海」をテーマにしました。。。。現実世界非常に恐ろしい話ですが….

暑い暑い真夏に涼しい水が恋しくなる新規素材です!どうぞどんどんダウンロードして有効活用してください!

では、まだまだ酷暑続くお盆休みとなりそうです!みなさん、お体にはお気をつけて、楽しいお盆休みをお過ごしください!まだまだお盆休みが遠い・・・・山本でした。

▼▼WEB無料素材BLACK SHIVAはこちらから▼▼

http://www.black-shiva.com/