ウェブサイトに適用する游ゴシックフォントを見直しまくった最終解 - Corredor
拙作のノーマライズ CSS ライブラリ、「Neo's Normalize」を見直していたところ、Windows の Chrome ブラウザで適用されている游ゴシックフォントがかすれていた。 「あれ？@font-face で游ゴシック Medium を指定してるのにな？」と思い、設定を見直したところ、コレが効かなくなっていた。 当時 Neo's Normalize を作る際、それなりに調査しまくった結果だったのだが、どうも仕様が変わっていたようなので、OS・ブラウザごとに挙動を見直すことにした。今回はその研究結果をまとめる。 游ゴシックフォントに関する基礎知識のおさらい Chrome で効かなくなっていた @font-face font-weight: 500 は効いたが、副作用が避けられない Chrome で游ゴシック Medium を使うのは諦める 別解 : 潔く Regular フォン
arkpod.in - arkpod リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Gridlex - Just a Flexbox Grid System
How it works? The concept is simple: you need to wrap your .col in a .grid. That's all. What can we expect? Basically each column is the same width as every other cell in the grid. But you can add sizing classes to individual columns. For responsive designs, you can add classes based on media-queries. Top, bottom, or middle. For the grid. And for the columns. Grids can be nested. Always. Directly
http://ipestov.com/22-essential-css-recipes/
See related links to what you are looking for.
Better, Simpler Grid Systems — Solved by Flexbox — Cleaner, hack-free CSS
Most grid systems today use one of two layout methods: float or inline-block. But neither of these methods were really intended to be used for layout and as a result have pretty significant problems and limitations. Using floats requires clearing them which has a whole host of layout issues, most notoriously that clearing an element sometimes forces it below an unrelated part of the page (take thi
画像をCSSで斜めにマスクした時の知見 - kojika17
サイト全体が斜めになったサイトで、画像をクリッピングする必要がありました。しかもレスポンシブWebデザインです。 その時の知見と、利用しませんでしたが、ちょっとしたテクニックを思いついたので、メモとして残しておきます。 画像を斜めクリップにする方法 画像を斜めクリップするイメージは、こんな感じです。 要素を斜めにする方法は、IE9以上から利用できます。 IE8もIEの独自フィルターを利用して頑張ればできるようですが、底が見えない感じだったので、IE8は斜めにせずに対応させていただきました。 要素を斜めにするCSSは、transformプロパティを利用します。 transformプロパティには、いくつかの関数が用意されており、主に「skewY()」を利用し、場合によっては「rotate()」も利用しました。 CSSの記述例 .foo { -webkit-transform: skewY(10
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚
CSS Ruler • Explore CSS lengths.
Update the following values or resize the browser to see how the lengths change:
2015/2/21 Frontrend Conference 参加メモ - Mitsu.log();
2015-02-22 2015/2/21 Frontrend Conference 参加メモ Frontrend Conferenceに参加してきたのでメモ。JS,CSSの2トラックだったから選びやすかった。基調講演 > JS > JS > JS(LT) > CSS > JS > クロージング の順で聞いてきた。講演者もだけど聞きにきてるほうもフロントエンドオールスター感あった...楽しかった！Frontrend Conference - A conference for front-end developer（2015年2月21日開催） Pragmatic Front-end Developer: From Artisan to Expert スライド：http://d.pr/f/11iuK遅れていったので後半だけ(´･ω･`)最近どこのクラスタもプロトタイピングとコミュニケーションの
CSS calc
CSS is a complete conundrum; we all appreciate CSS because of its simplicity but always yearn for the language to do just a bit more. CSS has evolved to accommodate placeholders, animations, and even click events. One problem we always thought we'd have with CSS, however, was its static nature; i.e. there's really no logic, per se. The CSS calc routine bucks that trend, providing developers an oun
CSS3でアニメーション！transitionとanimationまとめ（サンプル付き） フラップイズム
こんにちは、くーへいです。 先日、CSS3の仕様書を全て読んでまとめてみたのですが、その中でいくつか気になるモジュールがあったので、順次まとめて行こうと思っています。 今回はみんな大好き、アニメーションです！ jQueryなどのJavaScriptを用いれば可能なことはご存知かもしれませんが、今回はCSSだけで行うアニメーションです。 グローバルナビゲーションなどでも用いられている、みょーんとなるアレですね。 IE8やIE9では対応していませんので、スマホサイトが中心になるかもしれませんが、今後のトレンドとなっていくことは間違いないでしょう。 CSS3におけるトランジション（transition）とアニメーション（animation）の違い パッと見では分かりにくいのですが、違いは以下の通りです。 トランジションが:hoverなどのきっかけが必要なのに対し、アニメーションは設定が可能 トラ
CSS shapes in email
CSS shapes allow us to move away from boxy designs, towards organic magazine style layouts. In the photo below the text follows the contours of the image, as well as being shaped into a ball. Thanks to iOS 8, we can explore similar creative layouts in email by wrapping content around polygons, standard shapes like ‘circle‘ or an images alpha channel. It’s best to concentrate on shape-outside (text
【CSS】iOS7のすりガラス効果を背景に付ける※06/06追記
今日見たブログ記事で素敵なCSSテクニックがあったのでご紹介します。iOS7で採用されて今後のMacでも使用されると言われている「すりガラス風」のデザインをCSS3を使って再現されています。 [CSS]OS X Yosemiteのように背景が透ける美しいパネルを実装するスタイルシート | コリス CodePen – Pen かもそば（@rndomhack）さんありがとうございます。 Demo zipファイルをDownload <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>iOS7風blur効果背景デモ</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="c
CSSフィルター：背景の一部をぼかす表現 – ハック｜kousoku AWS
サンプルはこちら。 http://codepen.io/KazuyoshiGoto/pen/nhstF テキストの乗っているレイヤーで擦りガラスを通したような表現を作っています。 CSS(Sass) HTMLはごくシンプルなので要のCSSについて。 body, section:before { background:url("***.jpg"); background-position: center; background-size: cover; background-attachment: fixed; } section:before { content: ""; z-index: -1; -webkit-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); position: absolute; width: 1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://timelined.andriaus.lt/
Bulma: Free, open source, and modern CSS framework based on Flexbox
もう分からないとは言わせない! 体系的に学ぶCSS transform 3D入門 - Qiita
Blog | CloudCannon
なんでCSSすぐ死んでしまうん
