タグ

css3に関するsutara_lumpurのブックマーク (8)

  • scottjehl/Respond: A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

    Respond.js A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) Copyright 2011: Scott Jehl, scottjehl.com Licensed under the MIT license. The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and unde

    scottjehl/Respond: A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
    sutara_lumpur
    sutara_lumpur 2015/12/15
    IE6-8でもメディアクエリを使用可能に。
  • Selectors Level 3

    Selectors Level 3 W3C Recommendation 06 November 2018 This version: https://www.w3.org/TR/2018/REC-selectors-3-20181106/ Latest version: https://www.w3.org/TR/selectors-3/ Previous version: https://www.w3.org/TR/2018/PR-selectors-3-20180911/ Latest version of Selectors: https://www.w3.org/TR/selectors/ Editor's Draft https://drafts.csswg.org/selectors-3/ Feedback: File an issue on GitHub Editors:

  • background-size-CSS3リファレンス

    background-sizeプロパティは、背景画像のサイズを指定する際に使用します。 長さやパーセンテージで指定する場合、値を2つ記述すると、それぞれ記述した順に幅と高さを表します。 1つだけ指定した場合には、もう1つはautoと解釈されます。負の値を指定することはできません。 ■値 auto 自動的に算出される(初期値) contain 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する cover 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する 長さ 背景画像の幅・高さを指定する パーセンテージ 背景領域に対する背景画像の幅・高さのパーセンテージを指定する CSSソースは外部ファイル(sample.css)に記述 p.sample1 { width:300px; height:80px; padding:15px; bo

    sutara_lumpur
    sutara_lumpur 2013/12/11
    こんなプロパティが追加されていたとは ∑(°д°) #CSS3
  • can I use... Support tables for HTML5, CSS3, etc

    Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and

    sutara_lumpur
    sutara_lumpur 2013/11/06
    「知らなんだ こんなサイトが あったとは」(五七五) #HTML5 #CSS3 の各機能ごとにブラウザの対応状況が分かる!
  • linear-gradient() - CSS: カスケーディングスタイルシート | MDN

    CSS チュートリアル CSS の基 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

    linear-gradient() - CSS: カスケーディングスタイルシート | MDN
    sutara_lumpur
    sutara_lumpur 2013/07/14
    #css グラデーションの使い方。クロスブラウザな記述法も載ってて参考になります(-人-)
  • 擬似要素を使った見出しデザイン

    このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付

    擬似要素を使った見出しデザイン
    sutara_lumpur
    sutara_lumpur 2013/01/28
    #CSS あらためて読み返して、大変勉強になりました m(_ _)m
  • [CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例

    CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。

  • OperaもCSS3のグラデーション(gradient)に対応してたので実装方法を再度確認 | モノクロじみている

    11/05/19OperaもCSS3のグラデーション(gradient)に対応してたので実装方法を再度確認time:11:50tag:CSS,Opera いつのまにやら前に書いたときよりCSS3のグラデーションの状況が変わってるみたいなんで。 Operaも最近CSS3のグラデーションに対応したみたい。最近と言っても2ヶ月前ですが。 あと、webkitの書き方。最初見たとき面倒臭ーと思っていたんだけど、mozillaと同じ書き方で良いんですね。 ということで統一されてるっぽいので、少しまとめ。 基形 基形と言っていいのかわからないが、一番シンプルなやつ。 サンプルbackground: -moz-linear-gradient(rgb(100,100,100), rgb(200,200,200)); /* Firefox */ background: -o-linear-gr

    sutara_lumpur
    sutara_lumpur 2011/12/13
    #CSS3 Opera、Mozilla、Webkit、IE。現状では、それぞれに特殊な指定が必要なようだ。…はやく『linear-gradient』だけで全ブラウザでオッケーってことにしてくださいよ(つД`)
  • 1