[B! css3] n314のブックマーク

CSS Grid Layoutをガッツリ使った所感 - Qiita

この記事は、加筆して﹁CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA﹂に引っ越しました。引越し先の記事では CSS Grid Layoutを使ってよかったこと逆に苦労したこと、解決できなかったこと IE 11対応には工夫が必要Autoprefixerの最新版を使えば、IE 11向けのコードに変換してくれるという内容をまとめています。 ※Google検索で辿り着いた方がリンク切れだと申し訳ないので、投稿は残しておきます。

n314 2017/04/17

2025年になったらまた全部変わってそう。

css
CSS3

リンク

MUI - Material Design CSS Framework

The MUI package includes all the necessary code to use MUI components on the web and over em ail. In addition, we're working on React and WebComponents libraries to give developers more flexibility on the web. mui-0.10.3/ ├── angular │ ├── mui-angular.js │ └── mui-angular.min.js ├── css │ ├── mui.css │ ├── mui.min.css │ ├── mui-rtl.css │ └── mui-rtl.min.css ├── em ail │ ├── mui-em ail-i

n314 2016/09/22

軽くて良さそうだけど、やっぱり足りない感がある。

css3

リンク

flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita

注︶本文中の﹁コンテナ﹂﹁アイテム﹂について本文中でいう﹁コンテナ﹂﹁アイテム﹂は、flexコンテナとflexアイテムのことを指しています。コンテナ display: flexや、wrap指定などをする複数のアイテムを含むアイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題︵Safari︶ Chrome Safari 潰れてますね。起きる条件 Safari なぜコンテンツの最小サイズを尊重してくれない模様どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定︵デフォ値なので、指定がなければそのままでOK︶ Safari10にて修正済み︵つまり、SierraとiOS 10以降では対応不要︶ 2. align-it ems:center はみ出す問題 Chrome IE11 はみ出てますね。起きる条件 IE10-11 f

n314 2016/08/15

CSS3
flexbox

リンク

CSSスプライトについてあれこれ。

「CSS Sprites（CSSスプライト）」についてまとめます。すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要

n314 2016/05/25

css
css3

リンク

CSS だけで空の要素に指定した background-image の高さを正しい縦横比で動的に変化させる - Qiita

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自己紹介</title> </head> </head> <body> <section class="profile-content"> <header> <h1>自己紹介</h1> </header> <div class="profile-image"></div> <p>僕はととろ、君はとろろ。<br> ごめんほんとは僕、らっしーっていうんだ。Rails エンジニアしてます。</p> </section> </body> </html> な感じでウィンドウ幅に合わせて縦横ちゃんと合わせて表示したいのです。 background-size: 100% auto; してやればいいじゃん！は間違い。一般的にbackground-size: 100% auto;とすれば

n314 2015/12/16

毎回困ってた

css
css3

リンク

CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips

リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 当記事は、2015/11/4に公開した記事に追加分を加えたものです。更新: 2016/3/7 13, 14, 15を追加。更新: 2016/4/13 16, 17を追加。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に﹁line-height﹂を加える 3. 天地の中央に配置 4. リストをカンマ区

n314 2015/11/04

css
CSS3

リンク

https://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html

n314 2015/11/04

css
css3

リンク

珍しいCSSプロパティたち - Qiita

あまり見かけない、かつ実用的なCSSのプロパティをまとめました。他プロパティに依存するプロパティは割愛します。ブラウザ対応状況はCan I Use等でご確認ください。紹介するCSSプロパティ will-change scroll-behavior resize object-fit と object-position appearance user-select font-feature-settings text-rendering font-smoothing hyphens pointer-events will-change 予め演算処理をさせておくプロパティです。これから変化するスクロール位置 / 要素 / プロパティを値に設定すると、事前に変化をブラウザに知らせる事ができます。アニメーションのカクつきを、いくらか抑えることができるでしょう。ただ、何にでも指定して

n314 2015/06/15

box-sizingは、幅25%を4つ並べるけどborderやmarginも設定したいというときに便利。

css3
css

リンク

Ultimate CSS Gradient Generator from ColorZilla

background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */

n314 2015/04/25

css
css3

リンク

[CSS3] Androidのmask-imageに関する不具合について

CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなるというデモでした。でもよく調べてみたらそれだけじゃなかったんです。検証するにあたって書いたデモはこれです。以下の内容はReadmeと一部被ります。 Androidでの症状 mask-imageとanimationを同時に設定するとマスクしなくなる(Android4のみ) 症状が出るのは3つ目のドロイド君です。 mask-imageとanimationを同時に設定した場合はアニメーション対象のプロパティに関係なく

n314 2015/04/25

リンク

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス

CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。︻アップデート: 2022年6月16日︼IEがサポート終了したことにあわせて、修正しました。︻アップデート: 2021年8月1日︼ Flexboxの解説を2021年の現状にあわせて、修正しました。︻アップデート: 2020年8月23日︼ Flexboxの解説を2020年の現状にあわせて、修正しました。︻アップデート: 2019年3月27日︼ Flexboxの解説を2019年の現状にあわせて、修正しました。︻アップ

n314 2015/04/23

一番シンプルな例を知りたいんだよなあ。なんか不要な設定を無駄に書いてしまう気がする。

css3

リンク

Blog - LINE ENGINEERING

As of October 1, 2023, LINE has been rebranded as LY Corporation. Visit the new blog of LY Corporation here: LY Corporation Tech Blog

n314 2015/04/23

css3

リンク

:invalidや:valid擬似クラスを使ったフォームバリデーションエラーメッセージのスタイルサンプル

今更ながら擬似クラスを使ったフォームバリデーションのスタイリングを試してみましたのでメモがてら。目新しい情報でもないので適当にスルーして下さいませ。自分用のメモです。CSS3からフォーム向けの便利な擬似クラスが追加されてるのですが試してなかったのでテスト。フォームサンプル HTML5のフォームバリデーションサンプルです。A List Apartのデモを少し変えただけ参考に。 <div> <label for="em ail">メール</label> <input type="em ail" id="em ail" name="em ail" placeholder="example@example.com" required /> <p class="val"> <span class="invalid">正しいメールアドレス入れてくださいまし。</span> <span class="val

n314 2013/04/23

リンク

そのベンダー接頭辞はいつまで書くの？

ベンダー接頭辞︵プレフィックス︶については最近いろいろと議論が活発ですが、そういう難しい話ではなくて、現状のCSSについての話です。新しいCSSモジュールを使うために、ブラウザごとに接頭辞をつけなくてはいけない場合があります。まあそれについては現状では仕方ないことなんですが、接頭辞なしでも動作するようになったものでも、いつまで経っても接頭辞つきのものを書くのはどうなのかなと思うわけです。 CSSのコードも冗長で読みづらくなりますし、もう使われていない︵使われることもない︶であろうものを残しておくのもちょっとなー。実際に運用されているサイトなんかだとそうそう簡単に手を入れられないかもしれませんが……。また、はてなダイアリーの方でも書きましたが、ブログのチュートリアルを見ていて﹁もうその接頭辞つきの役目は終わった︵終わりつつある︶のに、なんでそれしか書いてないの﹂と思うことが結構あります

n314 2012/12/26

css3

リンク

[CSS]これは使ってみたい、繊細で美しいツールチップを実装するチュートリアル

How to create animated tooltips withCSS3 [ad#ad-2] デモ実装デモデモはCSS3アニメーション、擬似要素を使用しているため、Firefox, Chrome, Safariでご覧ください。Demo 4 最初にぼんやりと大きなツールチップが表示され、縮小とともにはっきりとツールチップを表示します。実装 HTML ツールチップはリスト要素で、各アイテムはa要素で実装されています。 <ul class="tt-wrapper"> <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li> <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li> <li><a class="tt-dribbble

n314 2012/02/03