[B! CSS][css] sutara_lumpurのブックマーク

https://spyweb.media/2018/01/13/css-border-text/

sutara_lumpur 2018/08/21

css

リンク

#

Introducing Typogram Hello friend, I am wentin, creator of CSS ICON. I have been building Typogram — a logo design tool, and it is now launched! Upvote us on Product Hunt!

sutara_lumpur 2018/08/03

CSSのみで作られた画像。

css

リンク

sublime-autoprefixer : Sublime Text でベンダープレフィックスを最適化してくれるプラグイン | Web Design Leaves

sublime-autoprefixer : Sublime Text でベンダープレフィックスを最適化してくれるプラグイン CATEGORY: HTML/CSS | TAG: sublime text 2015年2月5日 CSS のベンダープレフィックス（接頭語）を自動で最適化（追加・削除）してくれる Sublime Text のプラグイン「sublime-autoprefixer 」に関するメモ。対象ブラウザやそのバージョンを指定することも可能。適切なベンダープレフィックスを付けるのはとても面倒で大変だが、このプラグインを使用すると簡単に CSS に付与したベンダープレフィックスを自動的に最適化してくれる。このプラグインは「caniuse.com」という HTML5 や CSS3 等の対応状況を調べられるデータベースを元に、必要な CSS のみにベンダープレフィックスを追加し、ま

sutara_lumpur 2018/08/01

リンク

width、heightがautoの要素にtransitionを適用する - メモを揉め

CSS3のtransition。一般的なウェブアプリのUIで動きが必要になる時って、始点と終点がある程度決まっていて、animationの@keyframeを駆使するような動きは限定的なことが多いと思うのだけど。このtransitionを使っていていつも悩ましいのが、widthやheightがautoに設定されている要素にtransitionを適用したい時です。 transitionを有効にする場合、始点と終点の値を100pxのように絶対値で指定するか、50%（もちろんheightなどで親のautoを引継いでしまっている場合はダメ）のように相対値で指定することはできるけど、autoだとtransitionが効かない。 // Stylus .foo width 200px height 0 transition height .2s &.opened height auto 上の例の場合

sutara_lumpur 2018/07/30

css

リンク

CSSアニメーション(transition)で起こるバブリングの原因と対策 | UNORTHODOX WORKBOOK | Blog

正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。もしかすると、CSS界隈では有名な事象なのかもしれない。ただ、ググっても出てこないし、そもそも何てググればいいのかもよく分からず、この現象にあうたびにデベロッパーツールを開いてなんだかんだやっていたので、その原因を忘れないように書き残しておく。どういう現象か visibility: hidden;とopacity: 0;で非表示にした要素を、マウスホバーで表示、マウスアウトで非表示に切り替える（アニメーション付き）際に、マウスアウトして完全に非表示となっているのにも関わらず、その要素が表示されていた部分にマウスをもっていくと消えた要素が再表示されてしまうという現象です！基本的には問題の

sutara_lumpur 2018/07/30

css

リンク

★CSSのセレクタとは？覚えておきたい25種類と書き方

今回はCSSの便利なセレクタを一挙にまとめていきます。セレクタをマスターしておくと、効率的なCSSを書くことができ後々ラクになるはずです。

sutara_lumpur 2018/07/30

css

リンク

★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）

HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。解説全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に

sutara_lumpur 2018/07/30

css

リンク

2018年のfont-family指定 - Qiita

サンセリフ編です。目標欧文は[WIN]Segoe UI/[Mac]San Francisco, Helvetica Neueを使う。和文その1: 游ゴシックを使う(実はまだ厳しい気がしている) 和文その2: Winにはメイリオ, Macにはヒラギノを使う。(推奨) 1. 欧文は[WIN]Segoe UI/[Mac]San Francisco, Helvetica Neueを使う。それぞれ次のように指定すれば実現可能 font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 和文フォント指定, sans-serif;

sutara_lumpur 2018/07/30

sans-serif のみ指定に同意。これがいいと思う。

css

リンク

★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス

高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。 Sticky Footer, Five Ways 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 1. ネガティブマージンを使ってフッタを最下部に実装その1 2. ネガティブマージンを使ってフッタを最下部に実装その2 3. そのままのHTMLにcalc()を使ってフッタを最下部に実装 4. 高さが不明なフッタを最下部に実装(flexbox) 5. 高さが不明なフッタを最下部に実装(CSS Grid Layout) 1. ネガティブマージンを使ってフッタを最下部に実装その1

sutara_lumpur 2018/07/29

css

リンク

CSS3でHSLa色指定 | ウェブ制作会社　株式会社フルブライト |Froubright Inc

こんにちは、フロントエンジニアの栗原です。今回はCSSのカラー指定方法のおはなしです。 CSSのカラー指定で良く見るのは、RGBaや#ffffff（#と6つの文字(16進数)で色を指定するもの）の表記ですよね。 CSS3では、HSLaと呼ばれる、色相・彩度・明度・透明度で指定することができるようになりました。 HSLaとは、色相（hue）・彩度（saturation）・明度（luminousity）・透明（alpha）からなります。色相は色相環上の角度を0 度～360度、彩度の強さを0%～100%、明度の強さを0% ～100%で指定することができるので、色の指定からなるrgbaと違い、彩度と明度の調整がパーセントで行えるので、細かい調整や色の変化などを直感的に扱いたい時に大変便利になると思います。記述方法 color : hsla(色相, 彩度, 明度, 透明); 例：赤 color

sutara_lumpur 2018/07/29

css

リンク

CSSで要素を上下や左右から中央寄せする7つの方法

こんにちは。めぐたんです。みなさんは「CSSで中央寄せする方法」といえば何が思いつくでしょうか？馴染みがあるのは、横方向に対して中央寄せを行うtext-align: center;やmargin: 0 auto;。では縦方向のときは？となると…途端に「なんだっけ」と止まってしまう方もいるかと思います（私です）。そこでCSSの「中央寄せ」について、レスポンシブWebデザインにも対応しやすい7つの方法をまとめてみました！当記事で紹介していく方法はすべて、下記のHTMLを共通して使用していきます。 <div class="outer"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolo

sutara_lumpur 2017/11/07

css

リンク

CSSの読み込みを高速化するための5つのポイント

読み込み速度を高速化することは、戦略上非常に重要なことです。ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。 UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40％の人が読み込みを諦めて離脱してしまうことが分かっています。 SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。 ferretでは、これまでSVGを使った画像の最適化

sutara_lumpur 2017/07/27

リンク

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！目次 Div全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びのdivの高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと

sutara_lumpur 2017/07/07

css

リンク

CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld

ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。また、大体この手のアニメーションを利用する際はサイト全体で動きを統一させることが多いのですが、たまに場所によって少し違いをつけたいということもあるので、そういったときにすぐ対応できるようにSassのmixinを用いて実装する方法も併せて紹介します。ここで紹介しているサンプルで使用しているHTMLは、すべて<a href="#">Lorem ipsum</a>のようなシンプルなa要素を使用した想定になっています。

sutara_lumpur 2017/05/18

アンダーラインに限らずCSSアニメーション全般の参考になる。ありがたや。

css

リンク

Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）

Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。デバイスのdpiによる見え方このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります

sutara_lumpur 2017/05/18

Mac用。文字がぼやける、または細くなるという問題の解決策。

css

リンク

CSS3 Patterns Gallery

Click on a pattern to expand Textareas are editable Browser support Submit a new one Github repo Enjoy! Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial

sutara_lumpur 2017/04/24

CSSのグラデーションで作る、様々な模様。

リンク

Free Gradients Collection by itmeo.com

Free for commercial or personal use by Dima Braven. WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment! We've also prepared a .PNG version of each gradient. As a bonus, there are packs for Sketch & Photoshop.

sutara_lumpur 2017/04/24

リンク

コピペ自由！美しいグラデーションを180種類揃えた WebGradients

最近のウェブデザインでよく見かける、鮮やかな配色のグラデーションカラーをお探しですか。 WebGradients は、どんなウェブサイトでも利用できる美しいグラデーションカラー180種類を揃えた、無料の配色コレクションツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSS3コードをコピペできます。使い勝手もよいので、ワークフローに加えたいサービスのひとつです。詳細は以下から。コピペ自由！美しいグラデーションを180種類揃えた WebGradients WebGradients では、配色の参考にしたい美しいグラデーションカラーが一覧で揃っており、使い方もとてもシンプルです。各パネルでは、2500x2500pxのPNGファイルをダウンロードできたり、使用している色のHEXコードもまとめて確認でき、Webデザイン制作に便

sutara_lumpur 2017/04/24

リンク

CSS での OpenType 機能の構文 | Adobe Fonts User Guide

この機能は、一連の字形を「合字」と呼ばれる 1 つの字形に置き換えます。合字は、タイポグラフィの目的で好んで使用されます。この機能を有効にすると、通常の状況ではデザイナーやベンダーの審査に使用するような合字が挿入されます。この合字機能は、デフォルトで有効です。そのため、通常は CSS を記述しなくても動作します。ただし、Chrome ではデフォルトで有効になりません。また、Safari（Mac または iOS）では無効にできません。Chrome と Firefox の一部のバージョンでは、スペースを含む合字で問題が発生します。 .class { font-variant-ligatures: common-ligatures; -moz-font-feature-settings: "liga", "clig"; -webkit-font-feature-settings: "liga"