1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
CSSのみでエフェクト・アニメーションを実装する方法 | LIG LIBRARY | 株式会社LIG
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現）
【jQuery+動画】ホバーでアニメーションさせた要素の中で動画を再生する方法｜Tips*Blog｜株式会社コプロシステム
こんにちは、UXデザイン室の松山です。 中学生の時のアダ名は「しょくぱんマン」と「青ジョリ」でした。 理由は色白なのとヒゲが濃いからです。2つのあだ名の割合は、ハーフハーフです。 さて前回のTips*Blogでは、jQueryで「卵をゆらゆら揺らす方法」を説明しました。 今回は、HTML5のvideoタグを使用し、マウスホバーでアニメーション（アコーディオン）した要素の中で動画を再生する方法を説明します。サンプルはjQuery版とCSS3版の2つ用意しました。 videoタグの再生・停止などの制御部分はCSS3版もjQueryを使用しています。 最近では動画を背景で再生させたりするサイトも多くなりました。 HTML5のvideoタグを使用すると動画の制御が凄く簡単なので覚えておくとかなり役に立つと思います。 今回作成したサンプル 【jQuery版】サンプルはこちら 【CSS3版】サンプルは
jQuery（＋CSS3）で作るアコーディオンメニュー（2段アコーディオン対応）
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
jQueryとCSS3で手軽に実装できるスクロールエフェクト
2015年10月6日 CSS, JavaScript, jQuery 近頃Webデザインのギャラリーサイトで見かける素敵Webサイトって、どれもアニメーションなどのエフェクトがかっこいいですよね。という事で今回は、中でも簡単に実装できそうな効果をひとつ。スクロールすることで要素が可視範囲に表示されると、CSS3のアニメーションを使ったエフェクトが実行される、というのを実装してみようと思います。なんだか難しそう…と、食わず嫌いでいた人でも、基本さえおさえておけば、あとはアイデア次第で自分好みにカスタマイズできると思いますよ！ ↑私が10年以上利用している会計ソフト！ 基本：スクロールでテキストをぼわ〜んと表示 画面をスクロールすると、下からぼわ〜んとテキストが表示されるエフェクトを実装してみましょう！ HTML まずはエフェクトを与える要素をHTMLに記述。安心してください、まだ何も変わった
CSSブレンドモードで画像を彩ろう
2018年11月12日 CSS Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード（描画モード）」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです！今回はそんなCSSブレンドモードにフォーカスしてみようと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…によると、IE以外のモダンブラウザーに対応しています。 ブレンドモード一覧 基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。 body { background: #0bd url(beach-footprint.jpg) no-repeat;
WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル:phpspot開発日誌
16 Best CSS3 Transitions And Animations Tutorials WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル。 CSS3が登場したことによって、こんなことできるの？という驚きを最近よく感じていますが、そういうデモのチュートリアル集です。 16個ありますので、すべて見るだけでも見ておくべきだと思いましたのでシェア。 紙を折りたたむ風UIは スクロールで驚きのアニメーション 紙の折畳みや折り曲げエフェクト iPadの輝きをインタラクティブに変更 ビットマップグラフィクでマリオ。画像もキャンバスも利用していない、ピュアなCSS 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3でクールな角丸テーブルを作る例 CSS3で出来たクールなLightBox実装チュー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ideahacker.net/2015/02/14/9779/
html5-memo.com
CSS3の制作をぐっと楽にする厳選20のオンラインツール
これからのWeb制作に使える、HTML5,CSS3の対応表や各種リソース