【2021年4月】現場で使える！テキストエフェクトのまとめ | FASTCODING BLOG
こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトで使いたい！カッコよくて、オシャレなテキストエフェクト・アニメーションをまとめてみました。 今回は、codepenから探してみました。 CodePen Home CSS3 text-shadow effects綺麗なテキストシャドウです。CSS3で実装可能。 See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen. Rotating textテキストの一部が変わっていきます。使えそうな予感。 See the Pen Rotating text by Rachel Smith (@rachsmith) on CodePen. Shattering Text Animationメインビジュアルに使えそうですね。ループにせず
【JavaScript・CSS】スクロールしたらフワッと要素を表示させるスクリプトの使い勝手を良くしてみる – ノーズブログ
HTML・CSS 基本のHTMLとCSSを用意 まず適当なHTMLとCSSを用意します。 <body> <header> <h1>ヘッダー</h1> </header> <section> <div>要素1</div> <div>要素2</div> <div>要素3</div> <div>要素4</div> <div>要素5</div> <div>要素6</div> <div>要素7</div> <div>要素8</div> </section> <section> <div>要素9</div> <div>要素10</div> <div>要素11</div> <div>要素12</div> <div>要素13</div> <div>要素14</div> <div>要素15</div> <div>要素16</div> </section> </body> body { margin: 0;
マウスオーバーエフェクト
ボタンや画像にカーソルを乗せた時の反応って大事ですよね。リンクするエリアにカーソルを合わせた時に、カーソルが指のアイコンに変わったり、テキストの色が変わったりすれば、カーソルが乗ったという事が認識しやすくなります:)。 それに加えて、ちょっとしたエフェクトがあれば、温度や感触や、世界観まで伝えられるかも。 ふわっとする 下のサンプルみたく、:hoverを使ってスタイルを指定しておけば、カーソルが乗った時に、そのスタイルが適用されます。 けどそれだけだと、カチッと切り替わるだけ。 a:hover { color: #dc6688; text-decoration: inherit; } サイトの雰囲気にもよるけれど、もちょっとだけ柔らかい印象にしたいなって時には、ふわっとするとよいかもです。文字色の変わり方と、下線の消え方を滑らかにすることで、ふわっとした感じになります:)。 この切り替わり
マスクアニメーションを使ってカッコよく画像やテキストを表示させる | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
最近のウェブサイトデザインでよく見かける印象がある、画像やテキストなどのコンテンツをアニメーションのマスクで表示させる動きをSass（とjavascript）で作成してみたいと思います。アニメーションの動きや速さを調整したりすることで、い…
そのベンダープレフィックス、いつまでつけてるの？ - Qiita
はじめに CSS3が本格的に普及してきて使用する機会がどんどん増えていっているかと思います。 しかし、ブラウザのバージョンによってはベンダープレフィックスを付けないと効かないものもまだまだあります。 ベンダープレフィックスといえば、-webkit-、-moz-、-ms-、-o- などが思い浮かぶかと思いますが、ぶっちゃけるとほとんどのCSS3のプロパティはベンダープレフィックスなしでも大丈夫になってきました。 特にIE以外のブラウザというのは常に最新バージョンにアップデートされていくので、ベンダープレフィックスなしでどんどん対応していっています。 何でもかんでもベンダープレフィックスつけていませんか？ とりあえず、すべてのブラウザに対応するようにベンダープレフィックスつけておけば安心なんて思わずに、必要のない記述はどんどん減らしていきましょう。 -o-* というベンダープレフィックスは既に
実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V
簡単なCSSで背景色をふわっと変化させる方法
ボタンにマウスをロールオーバーすると背景色が変わるというあしらいはWebサイトでよく見かけます。 動きがあることで、Webサイト訪問者に直感的にその場所がボタンであるということを伝えることができます。 今回はそのあしらいに一手間加えることで一味違うロールオーバーを実現する方法を紹介します。 transition プロパティ transitionはCSSのプロパティを設定した時間で変化させるプロパティです。今回背景色をふわっと変化させるために使用します。transition-property、transition-duration、transition-timing-function、transition-delayで設定します。ショートハンドで記述する場合は半角スペースでそれぞれを設定し、一つ目の時間の値はtransition-durationに二つ目の時間の値はtransition-de
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
