HTML5＋CSS3の「カンタン装飾設定」で今風デザイン
基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ！」というお叱りの声が聞こえてきそうですが（笑）、以下の2つを見比べてみましょう。上
Change Text Link Hover Effect Using CSS3
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
Modern Syntax
さて、モダシンラジオのデータをホスティングしてもらっているSpotify for Podcasters(旧Anchor）の私のページはこちらです。 https://podcasters.spotify.com/pod/show/kazuyoshi-nagasawa このSpotify for PodcastersページのRSSは以下になります。こちらのRSSではenclosureタグなどでlength値などがしっかり入っているのでこれを購読しておくとよいかと思います。 https://anchor.fm/s/66ff2830/podcast/rss ここで聴く！という人は以下のプレイヤーからどうぞ。 んで、これまではGoogle Drive上に保存したmp3ファイルをaudioタグで聞けるようにしていたのですが、Google Driveの仕様がかわったのか以前の方法だとエラーになってしまい
これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集:phpspot開発日誌
Animated Buttons with CSS3 これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集 ボタンといえば、マウスオーバーした時に色が変わって、押した時に凹みエフェクトが付くようなものが一般的ですがCSS3によってその自由度は大きく上がるようです 使わずとも一度はかならず見ておきたいボタン集となってます アイコン付きのボタン カーソルを合わせるとアイコンが拡大しながらフェードアウトしてプライスが表示されます アイコンからプライスへの変更に併せて右側の矢印色もアニメーションさせながら変更するサンプル アニメーションさせないなら画像のすり替えだけですがアニメーションさせているところがポイントですね 登録ボタンみたいなものにカーソルを合わせるとボタンが徐々に大きくなり矢印の角度なんかもアニメーションされる例 ボタンが大きくなり、更に文言を追加する例。色の変更
HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」:phpspot開発日誌
Slider.js: Slideshow with jQuery, CSS Transitions and Canvas - example with Flickr HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」 スライドショーライブラリは色々ありますが、Slider.jsはCSS3やCanvasをフルに活用したライブラリとなります CSS3を使った画像切替の効果が豊富に用意されているのが特徴です。 ページ番号、送る、戻るといったナビゲーションの表示方法も色々と変えられるようです APIのところを見ればわかりますが使い方が超簡単でコードもシンプルにかけます。 関連エントリ 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 CSS3を使った超カッコい
CSS3で実装された画像スライドショーサンプル:phpspot開発日誌
Fully fluid, responsive CSS carousel ? CSS Wizardry?CSS, Web Standards, Typography, and Grids by Harry Roberts CSS3で実装された画像スライドショーサンプル。 簡単なマークアップとCSS3で画像のスライドショーが実現されています。 デモページ - CSS3ブラウザで確認してみてください それにしても、CSS3になってますます奥が深くなりましたね。組み合わせ次第で新しくて面白いこともできそうです。 関連エントリ CSS3のアニメーションサンプル４７ テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」 CSS3を使った超カッコいいナビゲーション付きスライドショー実装例 jQueryとCSS3を使った3Dのフォトスタック実装例
Animate.css | A cross-browser library of CSS animations.
Animate.css Just-add-water CSS animations See animations Close list Attention seekers bounce Copy class name to clipboard flash Copy class name to clipboard pulse Copy class name to clipboard rubberBand Copy class name to clipboard shakeX Copy class name to clipboard shakeY Copy class name to clipboard headShake Copy class name to clipboard swing Copy class name to clipboard tada Copy class name t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
