1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
Zooming Background Images | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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, reveal
Pure CSS Horizontal Scrolling | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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
[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/86ccd68934200bb38619d8cdd50b27746db7e8c3/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のボックスに単
[CSS]Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ
今まで出来なかったこと、かなり複雑なコードでスクリプトを併用しないと実装できなかったことをシンプルなHTMLとCSSで実装するFlexboxのテクニックを紹介します。 Solved by Flexbox Solved by Flexbox -GitHub 各コードの対応ブラウザは、Flexboxを使用しているため下記の通りです。 Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+ コードのライセンスはMITライセンスです。 「clearfix」「overflow: hidden」から卒業 高さが分からないフッタを常に最下部に表示 高さが分からない要素を天地左右の中央に配置 レスポンシブ対応の3カラムをシンプルなコードで実装 Flexboxを使った柔軟なグリッド 入力フィールドとボタンの高さを揃えて、くっつけて配置 「clearfix」
![[CSS]Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee61fe7384f341a2c6e8f8141198967ab8c04f2f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016021702.png)
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
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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
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
DOM操作の最適化によるJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第5回は、前回の「DOM操作の最適化によるJavaScriptチューニング（前編）」に続く後編です。後編では、createElement()などのDOM操作メソッドを使ったさまざまなテクニックや、パフォーマンスを劣化させるよくあるパターンについて詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ 前回は、DOM操作が遅い原因と仕組みについて簡単に説明し、チューニングのサンプルをいくつか解説しました。その中で、innerHTMLを利用したコードをサンプルにあげていますが、innerHTMLを利用する場合、いくつかの
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
una.im | CSS Image Effects #1: Vintage Washout
CSS Image Effects #1: Vintage Washout Published on October 2, 2015 Last week, I gave a talk at CSS Conf EU called PS is Dead!: Editing Photos in CSS. My original idea was to outline 10 things you traditionally used Photoshop for that you can now just do in the browser, but when I started to look into filter effects and blend modes there was just so much to explore! I showed a few of those effects
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にアクセスできませんでし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Scrolling controls for HTML5 video
[CSS]文字の半分で異なるカラーを指定するCSSのテクニック -こういうのを思いついた時って絶対楽しい！ | コリス![[CSS]文字の半分で異なるカラーを指定するCSSのテクニック -こういうのを思いついた時って絶対楽しい！ | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/9c7d78a76d41374af7d5df22544559e0a0efe8ac/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017032701.png)
Create A Responsive Imagemap With SVG | thenewcode.com
画像の先読み（プリロード） jQuery プラグイン「jquery.preload」 - develo.org
Reverse Text Color Based On Background Color Automatically In CSS | CSS-Tricks
