CSS3でフォントサイズを指定する単位は「rem」がとても便利 – bl6.jp
CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利だったので使い方をメモしときます。なにが便利なのかというと、一般的によく使われるemや%では親要素のフォントサイズが基準となって、階層が深くなったりすると何かと不都合が生じる場合があります。その点remではroot要素に指定されたフォントサイズが基準になるので、深い階層になっても複雑な計算をしなくて済みます。 [ads_center] 使い方 例えば、以下のHTMLの場合、親要素にemや%でフォントサイズを指定すると階層が深くなるにつれてフォントサイズが小さくなったり大きくなったりしていきます。 HTML <ul> <li>サンプル</li> <li> <ul> <li>サンプル</li> <li> <ul> <li>サンプル</li> </ul> </li> </ul> </li> </ul> ul { font-si
Prefix free: Break free from CSS vendor prefix hell!
-prefix-free Break free from CSS prefix hell! Only 2KB gzipped -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. “[-prefix-free is] fantastic, top-notch work! Thank you for creating and sharing it.” — Eric Meyer Features Processes every stylesheet in <link> or <style> elements
-moz-border-radiusと-moz-box-shadowが削除された - fragmentary
Geckoから-moz-border-radiusと-moz-box-shadowのエイリアスが削除された。 Firefox 13でこれらが無視されることになる。 Drop support for -moz-box-shadow and -moz-border-radius-* now that we've supported the unprefixed versions since Firefox 4. Bug 693510 - drop support for prefixes from border-radius* and box-shadow Mozillaは接頭辞に関して、正式なプロパティを実装したら接頭辞付きの実装を削除するというポリシーをもっている。ただ、border-radiusなどずっと前からあったプロパティについては、削除のタイミングが先延ばしに（たぶん）なっていた。
CSS3のコーディングに役立つツール8選 – creamu
「8 Best Tools to Make Easy CSS3 Development」という記事で、CSS3のコーディングに役立つツールがまとまっていたのでご紹介します。 CSS3 CSS3ジェネレータ。プレビューしたり対応ブラウザの表示もあります CSS3 Pie IE6,7,8でCSS3のいくつかのプロパティを使用可能にするhtcファイル Layer Styles Photoshopのようなレイヤースタイルをブラウザ上でCSS生成 Cascader HTMLにインラインで書かれたCSSを分割してくれる CSS3 Gradients Generator CSS3のグラデーションジェネレータ CSS3 Cheat Sheet CSS3のチートシート CSS3 Please CSS3をブラウザ上で学習できるサイト CSS3 Button Maker CSS3で作るボタンジェネレータ ref
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
CSS Click Chart | CSS3 Browser Support and Information
Can I Use ? Data on support for the default feature across the major browsers from caniuse.com.
HTML5 + CSS3 Demo : Navigation GUI like iPhone - Qiita
<nav id="header-navigation"> <ul> <li><a href="/#header-navigation">item1</a></li> <li><a href="/#header-navigation">item2</a></li> <li><a href="/#header-navigation">item3</a></li> <li><a href="/#header-navigation">item4</a></li> <li><a href="/#header-navigation">item5</a></li> </ul> </nav> nav#header-navigation > ul { padding: 0.4em 0; background-color: hsl(210, 30%, 60%); background-image: -webk
CSS3で実装されたボタンの総まとめ
利用も簡単にでき、スタイルシートの勉強にもなる、CSS3で実装されたボタンを紹介します。 ほとんどのものがclassを追加するだけで、簡単に利用できます。
実用的なCSS3ジェネレータサイト10選 - SitePoint | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers CSS3はCSS2.1と比較してもかなり高度なスタイル指定ができるようになっている。主要ブラウザは、部分的にせよCSS3をサポートしており、よりリッチなUIを実現することができる。 一方でCSS3は、WebデザイナやWebデベロッパにとっては開発の困難さを引き上げる要因にもなっている。プロパティが多すぎてすべてを頭に入れておくのは困難であるうえ、策定段階にあるためベンダプレフィックスのついたプロパティも併記しなければならない。こうなってくるとCSS3で包括的なスタイルを指定するというのは至難の業になる。 そうしたケースで役立つサイトのまとめがSitePointに10 of the Best CSS3 Code Generatorsとして公開された
CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル:phpspot開発日誌
Creating CSS3 Drop sliding list Menu #6 ? Script Tutorials CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル。 次のような、ジャンルごとにわかれた幅広で使いやすそうなドロップダウンリストをJSなしで実装してしまおうというチュートリアルです。 ソースを見ると<script>タグがなく、CSSのみでアニメーションしつつ内容を切り替えるということをやっているのがわかります。 CSSだけでもこういうのできるんだ、というのを知っておく意味で一度見ておいてもよいでしょう サンプルだけではなく実用性も兼ね備えています。 関連エントリ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ ピュアCSSでアニメーションするアコーディオン実装デモ ピュアCSSでSVGやcanvasなしの3Dオブジェクト描画デモ
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
CSS3のtransitionとtext-shadowで作る様々なリンク装飾
CSS3のtransitionとtext-shadowでオンマウス時のリンクを楽しく装飾してみます。すべてのリンクに使うとわずらわしいですが、タイトルロゴなんかだとこれくらい凝ってもいいのかなと思います。 transition（時間的変化をつける） hoverなどでスタイルが変化する際、通常はすぐに切り替わりますが、transitionを使うと時間をかけて変化するなど様々な設定をすることが可能になります。 適応するプロパティの「all」、変化の仕方「ease」、変化の始まるタイミングの「0」は初期値となるので省略しても大丈夫です。 transitionはFirefoxとwebkit系のChromeやSafariで先行実装されている機能ですので、-moz-や-webkit-などのベンダープレフィックス付ける必要があります。 text-shadow（テキストに影をつける） その名の通りテキスト
第1回 jsdo.itってなんだろう？ | gihyo.jp
はじめに はじめまして。株式会社ピクセルグリッドの外村です。今回この連載では、マークアップエンジニアやデザイナを対象に、『jsdo.it -Share JavaScript,HTML5 and CSS-』（以下、jsdo.it）というサイトを使ってユーザ参加型のJavaScriptやCSS3の学習コンテンツを提供していきます。今回は初回ですので、jsdo.itというサイトの概要や連載に向けての事前準備を解説します。 jsdo.itとは jsdo.itというのは2010年に株式会社カヤックがリリースしたWebサービスで、Web上でHTML5、CSS、JavaScriptを書いてその場で実行することができます。書いたコードは誰でも見ることができ、トップページに並んでいる人気のコードを見るだけでも楽しむことができます。 また、単にコードを書いたり人が書いたコードを見たりするだけでなく、他にも
[CSS]画像を使用せずに、背景をストライプやチェック柄にするスタイルシート | コリス
Checkerboard, striped & other background patterns with CSS3 gradients [ad#ad-2] 対応ブラウザはFirefox 3.6+, Chrome, Safariです。 デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。 デモページ [ad#ad-2] スタイルシートは下記のようになります。 CSS：ストライプ 全てのベースとなる指定です。 L.8-10で、ストライプのサイズを指定します。 .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-siz
その場で動かして体験できるCSS3の実験場「CSS3 Playground」:phpspot開発日誌
CSS3 Playground by Mike Plate その場で動かして体験できるCSS3の実験場「CSS3 Playground」。先日ブックマークで紹介しましたが、もう一度改めてご紹介です。 表示されているスライダーや色をクリックで調整するだけでその場でプレビューが表示されて、どういうCSS3コードをかけばどんな風になるかという部分を確認できます。 素人の方でも、こんなことが出来る、という部分をしっておく場合に使ってみるとよさそう。単純にコードジェネレーターとしても便利です。 どんどん便利なものが出てきますね。 関連エントリ 便利なCSS3ツール6つ＋α ピュアCSS3で3Dアニメーション IE6-8でもCSS3が使えるようになる「CSS3 PIE」 近未来に頻繁に使われるであろうCSS3サンプル１０
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YouTube人気急上昇
Loading
CSS3で作るドロップシャドウ – creamu
CSS3で作るふわっと浮き上がるツールチップ – creamu
NameBright - Coming Soon