CATEGORY

CSS

  • 2020年8月16日
  • 2020年8月16日
  • 0件

テキスト編集支援ツール作成 !

グラデーション編集支援ツールに続き、今回はテキストのスタイルを編集できるツールを作成いたしました ! 影付けあたりは特に便利ですので、ぜひ使ってみてください。 ここの冒頭の画像も、このツールで作っていますが、周囲のぼかしなど思いがけないものもできてしまいますので、デザインの幅がぐんと広がります。 あなたのWEBデザインがワンランクアップすることは間違いありません。 主な特徴 ○ イラストレーターな […]

  • 2020年7月27日
  • 2020年7月27日
  • 0件

CSS、hoverでアニメーション(ホバーエフェクト)

WEB画面上である要素にポインターを持ってきた時に、アニメーションが起きると、ユーザーに必要なメッセージを届けたり、快適なユーザーエクスペリエンスを実現することが可能となります。 単にカッコいいというだけでなく、メニューからサブメニューの表示、拡大などの他、正解を伏せた学習に活用するなど、使いようによっては機能的に非常に重要な役割を果たさせることもできます。 ここでは、技術的に基礎となるものや実用 […]

  • 2020年7月26日
  • 2020年7月26日
  • 0件

CSSアニメーション。ボックスのデザイン

前回のテキストのCSSアニメーションに続いて、今回はボックスのアニメーションです。 比較的基本的な11タイプのアニメーションを作ってみました。 全て基本は、一定の大きさの長方形です。 まずはデモをご覧ください。 最初にこれら全てのコードを記載します。 それぞれテーブルの枠の中に入れたので、コードが冗長ですが、それぞれのアニメーションは、上のスタイルのところと、簡単なタグのみで簡単です。 CSSアニ […]

  • 2020年7月25日
  • 2020年7月26日
  • 0件

CSSアニメーション入門 -簡単に!-

CSSアニメーションは慣れると手軽に活用できます。 まずはお手軽に、書いてしまいましょう。 このサイトでは、まず、テキストを中心に基本的な10個のアニメーションを作ってみました。 デモを見ながら、WEBサイトにどの動きを取り入れるのが良いか参考にしてみてください。 もちろん、組み合わせたりもできますので、ご自由にCSSのコードを変更してください。 ややこしい話は後で書きます(笑)。 ★ + […]

  • 2020年7月21日
  • 2020年7月22日
  • 0件

CSSを使った色々なテキストのデザイン

CSSでテキストのデザインとしてどんなものができるか? 書きためていく感じで、作っていきたいと思います。text-shadowや回転関係はモダンブラウザにしか対応していませんので、ご注意ください、。 基本スタイル まずは、何もなしの基本的な文字を設定しましょう。 CSSのコードはそれぞれ、デザインされた文字の下につけておきますから、適宜参考にしてください。 文字のデザイン 右に傾けた文字 文字をイ […]

  • 2020年7月19日
  • 2020年9月19日
  • 0件

CSSを使った色々なボックスデザイン

ボックスの基本形 まずは、何もなしの単に四角いだけのボックスです。 ボックスデザイン CSS 角を少し丸めたボックス 基本の角を少しだけ丸みを持たせたボックスです。真四角より少し柔らかみが出ます。border-radiusで指定し、ここでは10pxとしました。 ボックスデザイン CSS 左右の角を完全に丸めたボックス 今度は、左右の角を完全に丸めたボックスです。border-radiusを高さの半 […]