CSS Shaderで遊ぶ | CSS-EBLOG
CSS Shaderで遊ぶ カテゴリ：CSSテクニック 2013年5月16日 09:25 久々の更新です。さらに、ものすごく久々にCSSのネタですｗ 今回はCSS Shaderについて触れたいと思います。 内容がだいぶ濃いので、徐々に調べながら何回かに分けて書いていこうと思っています。 CSS Shaderについて詳しく話すと膨大な量になる上に、そもそもそこまでまだ詳しくない（ｗ）ので、今回はどんなことができるの？ どうやるの？ というのが分かる程度の記事にしたいと思います。 CSS Shaderとは CSS Shaderとは、CSSでOpenGL ES2.0のGLSL（シェーダ記述言語）を利用し、DOMを様々な形に変形、演出することができる仕様です。（ちなみにOpenGLのGLは「Graphic Library」の略） OpenGL ESはWebGLのシェーダ部分でも利用されているので、
素敵なposition: sticky
誰かがこのタイトルで書くだろうと思っていたけど誰も書かないのでセルフ実行。 Webkitにposition: stickyが実装されましたね。 というわけで試してみましょう。 現在、Chrome 23.0.1247.0以降（今はCanaryのみ）とWebkit Nightlyで見ることができます。 Sticky Positioning サンプルをダウンロード HTMLとCSS は次のようになっています。 <div class="container"> <div class="column-left"> <section> <h2>Lorem Ipsum</h2> <p> Lorem ipsum dolor sit amet... </p> </section> <section> <h2>Cupcake Ipsum</h2> <p> Cupcake ipsum dolor sit amet
Typhooon
2つのセレクトボックスを連動させる時に初めて気づいた問題です。 次のようなものを実装しようとしていました。 セレクトボックスAとセレクトボックスBには同じ値がセットされていて、セレクトボックスAで値を指定すると、その値を除いたものだけがセレクトボックスBに表示されるというものです。 実装の方法として、セレクトボックスAが選択された時に、セレクトボックスBの値と比較して同じものだけを非表示にすればよ […]
セレクタ、詳細度、カスケード
同じ要素に対して複数のスタイルを割り当てたとき、どのように表示されるのか？ ― CSSを使っていると誰もが一度は抱くこの疑問について、『CSS完全ガイド』の著者が明快に答えます。 CSSセレクタのグループ化、クラスセレクタ、IDセレクタ、属性セレクタ、疑似セレクタなど、スタイルの指定対象となるさまざまなセレクタについて、また割り当てられたスタイルがどのように重みづけされ、評価されて表示されるかについて、"CSS: The Definitive Guide 4th Edition"（未刊行）の一部となるべく書かれたテキストを、コンパクトな分量で抽出した書籍です。なお本書はEbook版のみの販売となります。 セレクタ、詳細度、カスケード まえがき 本書で使用されている表記規則 サンプルコードの使用について 本書に関するお問い合わせ 1章 セレクタ 基本ルール グループ化 クラスセレクタとIDセ
Hyperspace
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
csscss by zmoazeni
What is it? csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations. What is it for? One of the best strategies for me to maintain CSS is to reduce duplication as much as possible. It’s not a silver bullet, but it sure helps. To do that, you need to have all the rulesets in your head at all times. That’s hard, csscss is easy. Let it tell you what is
CSSメディアクエリの正しい使い方（動画）
メディアクエリを正しく使うとWebページがどのデバイスでも正しく表示されます。OSや画面の大きさに関わらずデザインがレスポンシブになり、CSSがメンテナンスしやすくなります。このビデオでサンプルページを利用してメディアクエリの正しい使い方（つまりブレークポイントの利用）をご紹介します。
Flexible BoxでGrowlみたいな通知UIを実装する - slowjet
↑の画像のみたいなGrowlぽい通知UIを作るときに、一筋縄ではいかなそうなところと言えば右上から下へ順に流れていってウィンドウに収まりきらなくなったら、列が変わって左へ流れていくようなレイアウトを作るところでしょうか。言葉が下手すぎたので図を見てください・・・ こういうやつ。 CSS力がめっきり減ってきてるので、確かこういうやつCSSで出来たと思うんやけどなーぐらいの感じだったんですけど、これこそFlexible Boxですね。 Flexibile Boxの詳細はわざわざ説明するのもアレなので以下の仕様書とかサイトを見て把握すればいいと思います。 CSS Flexible Box Layout Module CSS Flexbox Please! Using CSS flexible boxes HTML <div class="mod-notifications"> <div clas
Uniqlo Stripe Hovers | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! For the larger promotional boxes in the design of Uniqlo.com, they use animated stripes that reveal on hover. It’s kind of awesome, if you ask me. Perhaps because they wanted to share the awesome with as many different browsers as possible, they used an animated GIF to produce the effect. It
27 Fresh CSS3 Tutorials
Since the advent of CSS3, designing has become a lot easier and quick. This style sheet language had made designing a lot more fun too and is usually used in combination with JavaScript or jQuery. It allows you to create amazing designs in a hassle free way and efficiently. It is used for stylizing and controlling the layout of your web pages. The possibilities of what you can create using CSS3 ar
CSS selectors - mobile
Here are almost all CSS2 and 3 selectors, and the CSS3 UI selectors (mostly structural pseudo-classes). This is the mobile table. See also the desktop table. Last major update on 1 October 2013. I'm writing a CSS book. Basics Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox 6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS A
Bulletproofな@font-face記述だと、Androidでウェブフォントを適用できない
安全な@font-faceの書き方(抄訳)を参考に @font-face { font-family: Textar; src: url('/media/fonts/textar-min.eot'); src: local(Textar), url("/media/fonts/textar-min.woff") format("woff"), url("/media/fonts/textar-min.ttf") format("truetype"), url("/media/fonts/textar-min.svg#Textar") format("svg"); } というCSSを書いて、GoogleのWebFont Loaderでウェブフォントを適用するというテストページを作ったのだが、Xperiaだとうまく適用されないという報告をいただいた。 「なんで？」と思って、AndroidSDK
CSS Selectors Level 4: The Path to CSS4 — SitePoint
Recently I had published an article on SitePoint showcasing different examples of the use of CSS3 2D and 3D transform. CSS3 excites us so much, you could be forgiven for thinking this is the most advanced version of CSS available. Not so. Even now, just as you are still learning to use CSS3 and HTML5, those talented folks at W3C have released a working draft of the Level 4 standards of CSS Selecto
さらばmozとoのdevice-pixel-ratio - fragmentary
そういえば、Firefox 16とOpera 12.10からメディアクエリーのresolutionとdppxが使えるのを思い出した。 これらを使うと、Retina displayはじめ高密度なディスプレイに対応するコードがけっこう短くなる。 これまではこんな感じ。 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1) { .foo { background-image: url(image-2x.png); } } } device-pixel-ratioはもともとWebKitの拡張だったもの。それをMozillaとOperaも取り入れたのだけど、ベンダー接頭辞の面倒さに加えてmin-/max-のつき方、値の書き方がばらばら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://brkcan.net/fun/macbook/
Popular CSS Libraries - CSSDB
Code smells in CSS | en.ja | Translated Articles for Front End Developers
adakoda.com
roole.org
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術
