Hover Effect Ideas | Set 1
[CSS]画像にキャプションをさまざまなCSS3アニメーションで表示するスタイルシート、コピペで簡単に利用できます -iHover
デモページ：スクエア iHoverの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 ※スクリプトは不要です。 <head> ... <link href="styles/ihover.css" rel="stylesheet"> </head> Step 2: HTML 基本的にはノーマル時に表示するサークル（スクエア）とホバー時のものをdivで内包します。細かい点が各デモごとに異なるので、それぞれのデモページを参考にしてください。 Effect 1だと、こんな感じです。 <div class="row"> <div class="col-sm-6"> <!-- normal --> <div class="ih-item circle effect1"><a href="#"> <div class="spinner"></div> <div cl
Change Text Link Hover Effect Using CSS3
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
今すぐ使いたくなる！個性的でわくわくする動きのスライダー12選（Javascript・CSS3） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、サリーです。 最近は無料のスライダーでも良質のものがたくさん溢れていて、どれを使っていいか悩みすぎてしまう。。ということがよくありまして。 「これだ！」という決め手があればなあ。ということで、今回は他との違いを見せつける個性的なスライダーばかりを集めてみました。 今すぐ使いたくなるような、わくわくする動きでいっぱいです。デモページと共に紹介していきます。 【最新スライダーはこちら！】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Slit Slider Revised http://tympanus.net/codrops/2012/10/24/slit-slider-revised/ DEMO： http://tympanus.net/Tutorials/FullscreenSlitSlider/ 絵が真ん中から横にバカッと、時
これは便利！コピペで使える実用的なCSSテクニックいろいろ
div.tucked-corners { background: #f6f6f6; height: 380px; margin: 50px auto; padding: 10px; position: relative; width: 580px; -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); box-shadow: 0 1px 7px hsla(0,0%,0%,.2); } ...詳細はリンク先を参照 /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must
【レポート】黄金比でどのスクリーンにも適したデザインを「Less Framework 3」 | エンタープライズ | マイコミジャーナル
Less Framework is a cross-device CSS grid system based on using inline media queries. iPhone、iPad、PC、Androidベースのスマートフォンやタブレットデバイスなど、インターネットを利用するデバイスの多様化が進んでいる。スクリーンサイズの異なるデバイスで動作するブラウザ向けにそれぞれ最適化されたWebデザインを提供するテクニックのひとつに、CSS3で策定が進められているメディアクエリを使う方法がある。このテクニックをベースにして開発されたCSSフレームワークのひとつにLess Framework 3がある。 Less Framework 3は、言ってしまえばデバイスのスクリーンサイズや表示領域サイズに応じて幅を変更するシンプルなフレームワークだ。Less Framework 3のサイトにアクセ
【レビュー】ここまでできるCSS3コンテスト制作物まとめ | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Webページの制作方法として、コンテンツは論理構造が整理されたHTMLに、振る舞いはJavaScriptに、デザイン表現はCSSで実施するという方法が普及している。現在策定が進められているHTML5とCSS3はこの方法をさらに強化することになる。たとえばCSS3はCSSで表現できる能力を大幅に引きあげる。 先進的なWebデザインやデザインテクニックを取り上げることが多いSmashing Magazineは先月、SSDやヘッドフォンなどを賞金としてCSS3デザインコンテストを開催していた。今回、その結果が発表された。CSS3 Design Contest Resultsにコンテスト応募作品が紹介されている
CSS3の角丸+グラデーションを簡単に作成できるジェネレータ「CSS Corners」*二十歳街道まっしぐら（FC2ブログ時代）
「CSS Corners」は角丸ボタンを作成できるジェネレータです。 CSS3でコードをはいてくれますよ。 角丸の大きさやグラデーション、ボタン全体の大きさが設定できます。 簡単に角丸ボタンが作成でき、さらにCSS3でコードを出してくれるところが便利ですね。 以下に使ってみた様子を載せておきます。 まず「CSS Corners」にアクセスします。 サイト全体はこんな感じ。 真ん中にボタンのプレビューがあります。設定を変更する度に更新されます。 下の灰色部分にCSS3のコードがはきだされますよ。 角丸ボタンを作ってみました。 こんな感じ。 プレビューがとっても便利で、細かい調整などにもってこいです。 CSS3で角丸が表現できるようになって、画像を作成しなくてもよくなりましたね～。 今後いろんな場面で使えそうなのでチェックしておきたいです。 （本記事で紹介したサイト：CSS Corners）
今使えるCSS3の書き方まとめサイト パート2 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers WebデベロッパやWebデザイナにとってCSS3で提供が予定されている各種機能(角丸め、影付け、グラデーション、透過、回転、Webフォント、スクリュー、スケール、トランジッション)は魅力的だ。これまでよりも美しいページを、これまでよりもスマートに実現できるようになる。CSS3を使ったページを制作するのは楽しい作業だが、すべてのブラウザに対応させるとなると骨が折れる。 今使えるCSS3の書き方まとめサイト CSS3は策定段階にあるため、これら機能のほとんどはベンダプレフィックスがついた状態で提供されている。また、ブラウザに同機能を実装した時点での仕様の違いによって指定方法が変わっている部分もある。CSS3 Generators Write All
CSS3 Please! The Cross-Browser CSS3 Rule Generator
CSS3, please! This element will receive instant changes as you edit the CSS rules on the left. Enjoy! /* ------------------------------------------------------------- CSS3, Please! =================================================== Update: We recommend using Autoprefixer instead of CSS3Please. You can edit the underlined values in this css file, but don't worry about making sure the corresponding
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | 楽天ティップスRakutenTips
CSS3の制作をぐっと楽にする厳選20のオンラインツール
CSS Nite in NIIGATA, Vol.3 「CSS3で変わるWeb制作」フォローアップ
Toptal's CSS3 Generator Tool allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.