1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 画像を中央の位置でトリミングするまずはこの縦長の画像、横長の画像を並べ、縦横 250px の正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSS でこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで
Zooming Background Images | CSS-Tricks
The following is a guest post by Dylan Winn-Brown, who shows us a performant way to accomplish this design effect. Whilst working on a client’s website recently, I was asked to replicate an effect like this. Containers with background images which zoom within their container on hover, revealing more information. This type of effect is notably used in portfolio-type situations where the design inte
Pure CSS Horizontal Scrolling | CSS-Tricks
The web is a rather vertical place. You read a web site like you read a physical page: left to right, top to bottom. But sometimes, you want to step away from the verticality of it all and do something crazy: make a horizontal list. Or even crazier, a horizontal site! I’d be nice if we could do something like this: /* This isn't real */ div { scroll-direction: horizontal; } Unfortunately, that’s n
[CSS]要素の幅指定widthとmax-width、どちらに100%と固定幅を指定すべきか
小さいスクリーンでは幅いっぱいに表示し、大きいスクリーンでは固定幅にする時、通常はwidthとmax-widthを使用します。 指定方法は「width: 100%; max-width: 600px;」でしょうか。 このwidthとmax-widthのどちらに100%と固定幅を指定すべきか、違いはあるのか？ 同じなのか？ そんな疑問を解決します。 A Tale of width and max-width 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 先週の記事（Considerations for Styling a Modal）のコメントにあった興味深い会話がきっかけになりました。 モーダルウインドウやコンテンツの幅を指定する時、小さいスクリーンでは最大幅で表示し、大きいスクリーンでは幅600pxで表示し、親要素からはみ出
![[CSS]要素の幅指定widthとmax-width、どちらに100%と固定幅を指定すべきか](https://cdn-ak-scissors.b.st-hatena.com/image/square/885a75feb327b77134eceb63d8d46129434cd4f0/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016072903.png)
nocode.in
Buy this domain. nocode.in 2021 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
CSSのみ画像不要のドット柄背景の作り方を若干丁寧に説明してみる
ドット柄を見ると職業柄ついパンチングメタル（等ピッチ穴明きの鉄板）を思い出すゴロドクさんです、どうも。 「CSSのみ画像不要のストライプ柄背景～」という記事に引き続き、CSSのみの背景パターンの作り方の解説です。今回はドット柄に挑戦です。 背景イメージに円形グラデーションを上適用してみる ベースとなるHTMLは前回同様1行のみです。単純なボックスの適用に対して考えてみます。 <div class="dot"></div> クラス名は自分で分かりやすいように適当につけておいてください。今回は単純にドット柄なので dot としておきますね。 基本CSSは以下の通りとします。 .dot{ display:block; width:300px; height:300px; background-color:#ff0040; } 【ブラウズ結果】 サンプルページ 300px×300pxのボックスに単
Moving along a curved path in CSS with layered animation
CSS animations and transitions are great for animating something from point A to B. That is, if you want to animate along a straight path. No matter how much you bend your bezier curves, you can’t make something move along a curved path by applying an animation or a transition to an object. You can overshoot with custom timing functions, and produce spring-like effects, but the relative movement a
Using Multi-Step Animations and Transitions | CSS-Tricks
CSS animations are rad and the concept is fairly simple. Name the animation, define the movement in @keyframes and then call that animation on an element. If you haven’t worked with them, you can level up on the syntax right here in the Almanac. While the concept is simple, there are little tricks to make the animations seem complex and one of those is multi-step transitions. That’s what we’re goi
Twitter Heart Button CSS3 Animation
Today twitter has been introduced a new heart (like) button, it is actually a replacement for favorite button. I love the way twitter has implemented cool animation effect for click action. This post will explain you, how to implement this using CSS3 and Jquery. Read my previous post Facebook Like System with Jquery, MySQL and PHP, you will understand more about Like System database design and aja
How to animate box-shadow with silky smooth performance
How do you animate the box-shadow property in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change of box-shadow will hurt performance. There’s an easy way of mimicking the same effect, however, with minimal re-paints, that should let your animations run at a solid 60 FPS: animate the opacity of a pseudo-eleme
Promiseで簡単！JavaScript非同期処理入門【後編】
前回に引き続き、ECMAScript 2015（ECMAScript 6）で新たに追加されたPromiseについて、その概要を全2回に渡って紹介します。今回は後編です。 前回のおさらい 前回は、こんなふうにPromiseを使うという例を紹介しました。それは、以下のようにAjaxでAPIにアクセスする例でした。 var fetchSomething1 = function() { return new Promise(function(resolve, reject) { // API1にアクセス doAjaxStuff(someOptions1, { success: function(data) { // 成功した場合 resolve(); }, fail: function() { // 何かしらエラーが発生した場合 reject({ message: 'APIにアクセスできませんでし
Promiseで簡単！JavaScript非同期処理入門【前編】
ECMAScript 2015（ECMAScript 6）で新たに追加されたPromiseについて、その概要を全2回に渡って紹介します。 ひとつずつ処理されるJavaScript まず、Promiseについて解説する前に、基礎的なことではありますが、JavaScriptのコードがどのようにJavaScriptエンジンに処理されるかについて、軽く解説しておきましょう。例えば以下の様なコードがあったとします。 var result1 = 1 + 2; // 3 var result2 = result1 + 100; // 103 /* functionらを準備 */ var doSomething1 = function() { document.getElementById('price').value = result2; }; var doSomething2 = function()
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな
Aerotwist - FLIP Your Animations
11 February 2015 Animations in your web app should run at 60fps. Not always easy to achieve that, and it really depends on what you're trying to do, but I'm here to help. With FLIP. 8 min Read Time #performance #transitions Share Update 17th May, 2022 - The lovely folks at GSAP have made their FLIP Plugin freely available - check it out! Recently I've had the pleasure of being part of the team tha
CSS3だけで作るClickableなUI - くらげだらけ
最近はHTMLやCSSぐらいしか書いていませんが、HTMLやCSSでできることを考えたりしています。 HTML5やCSS3はクロスブラウザ（主にIE）を考えたりすると、現実的でないような気さえしますが、Mobileデバイスに限れば、もう既に一般的な技術です。 HTMLはフォームパーツなどのインタラクティブな要素があります。それらはPerlやPHP、もしくはJavascriptを使ってユーザーと対話するために利用されています。 CSSでも :hover や :active、:visited などの擬似クラスはユーザーとの対話ができるセレクタとして使うことができます。しかし、それらでできるUIには限界がありました。 CSS3ではさらに便利なセレクタが追加されていて、それとフォームパーツなどを組み合わせることで、今までではJavascriptを使用しなければできなかったようなUIが作れると考えま
[CSS]パタパタっと折り畳むアニメーションが気持ちいいナビゲーションを実装するテクニック
子アイテムをパタパタっと折り畳むアニメーションが気持ちいいナビゲーションを実装するスタイルシートのテクニックを紹介します。 デモページ 実装 HTML ナビゲーションの親のカテゴリはdivでまとめ、各子供はリストで実装します。 <div class="navbar"> <a class="menu" href="#">MENU</a> <div class="link large" href="#"> <span class="active"><i class="icon-twitter"></i>Twitter</span> <ul class="hover-bot"> <a href="">Reply</a> <a href="">Favorite</a> </ul> <ul class="hover-top"> <a href="">Follow</a> <a href="">Ret
The Dangers of Stopping Event Propagation | CSS-Tricks
The following is a guest post by Philip Walton (@philwalton). He is going to explain why stopping event propagation isn’t something you should do lightly, and probably something you should avoid altogether. If you’re a front end developer, at some point in your career you’ve probably had to build a popup or dialog that dismissed itself after the user clicked anywhere else on the page. If you searc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]文字の半分で異なるカラーを指定するCSSのテクニック -こういうのを思いついた時って絶対楽しい！ | コリス![[CSS]文字の半分で異なるカラーを指定するCSSのテクニック -こういうのを思いついた時って絶対楽しい！ | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6a1623a5a3307936011eeb5e520f7fc91e81bb5/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017032701.png)
https://thenewcode.com/1124/Rotating-Elements-To-Mouse-and-Touch-Locations-Using-JavaScript
画像の先読み（プリロード） jQuery プラグイン「jquery.preload」 - develo.org
