CSS Regionsを使った新しいCSSレイアウトの可能性について、CSS Regionsの基本的な考え方と応用例を紹介します。 at HTML5 Conference 2013 (Nov 30, 2013)
CSS Property Advent Calendar 2013、6日目の記事です。「CSS のプロパティに関することだったら何でも OK です」 とのことでしたが、広く使われているプロパティについて今さら書いても仕方ないし、多分他の人とかぶるしってことで、最近になってブラウザが対応したあまり一般的じゃないプロパティを選択してみました。 それが今回取り上げる、background-blend-mode プロパティです。 Compositing and Blending Level 1 W3C Last Call Working Draft 10 October 2013 3.4.3. The 'background-blend-mode' property ： Compositing and Blending Level 1 background-blend-mode プロパティとは？
The following is a guest post by Marcel Shields. Marcel was in a difficult place where he needed to change the image on a page but didn’t have access to the HTML. Rare, but I’m sure we’ve all be in weird situations like this. He explains how he managed to replace that image without needing to access the HTML or JavaScript. Also turns out to be a pretty good way to replace anything with an image. I
誰かがこのタイトルで書くだろうと思っていたけど誰も書かないのでセルフ実行。 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
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-
↑の画像のみたいな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
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’s fairly small at 4K, but as we know around here, it is also another HTTP request. Let’s reproduce the effe
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
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
12月17日付けで、HTML5, Canvas 2D Contextが勧告候補として公開されました。 HTML5 HTML Canvas 2D Context 「勧告候補 (Candidate Recommendation)」とは、レビューが広く行われ、実装を呼びかける段階と判断された仕様です。HTML5という巨大な仕様がおおまかに固まったことから、プレスリリースを伴うニュースとなりました。 もっとも、HTML5についていえば、それ以前よりWHATWGでの仕様策定が進んでいたこと、ブラウザーでの実装や利用が進んでいることもあり、実装の開始という意味合いは薄いです。大きな変更が想定されないところまで、HTML5仕様が安定したと判断されたことが大きいでしょう。 HTML WGは今後、2014年の勧告にむけ、テストスイートの作成と検証を進めていきます。大きな仕様ですから、すべての機能に対しテスト
css3ではアニメーションを設定することが可能となっております。 アニメーションの設定の方法はkeyframeを設定したアニメ、transitionを設定したアニメなどがございます。 transitionアニメーションに関しては以下の記事を参照してください。 css3 transitionアニメーション https://www.webcyou.com/?p=1937 これらをJavascriptと連携させることによって様々な表現をすることが可能になってきます。 その際、良く利用するのが、webkitAnimationEndとwebkitTransitionEndのイベントとなっております。 webkitAnimationEndとwebkitTransitionEndは、それぞれアニメーションとトランジションが終わった時に起きるイベントで 以下の様にして取得することができます。 elemen
GraphicalWeb Advent Calendar 2012 の 7日目の記事です。 この記事では、CSS Shaders、つまり CSS Filters の custom 関数を利用したとき、何が行われるのかを知ります。 なお、この記事以降に登場する CSS Shader は、2012年 12月現在、Chrome Canary でしか動作せず、かつ、CSS Shader の設定を有効にしておく必要があります。実際の demo を表示したい場合にはこの記事の末尾で解説する手順で Chrome Canary をインストールし、設定を有効にしておいてください。 CSS Shader を使うcustom 関数は、CSS Filters の他の関数と違い、その引数はすこし複雑です。この記事執筆段階の草案には次のように示されています。 custom(<vertex-shader> <fragm
Firefox 16、Opera 12.10、そしてInternet Explorer 10がリリースされました（Windows 7のIE 10はまだですが）。 その中で、CSSのベンダー接頭辞が外れたものをまとめてみます。 CSS Gradientsliner-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()の4つ。 IE 10から。標準構文。IE 9以下はCSSグラデーションに対応していない。Firefox 16から。標準構文。-moz-付きのは古い構文扱い。Opera 12.10から。標準構文。-o-付きのは古い構文扱い。Chrome、Safari は-webkit-が必要。古い構文。CSS Transformstransform, transform-sty
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
