HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
CSS Gradients with background-blend-mode
The CSS background-blend-mode property blends the backgrounds of an element: colors, images, and gradients, together with Photoshop-like blend modes (multiply, screen, overlay, etc). It is very new and is curently supported by the latest releases of Chrome, Firefox, and Opera. The property is coming to Safari soon but not available in Internet Explorer. CSS gradients are already immensely powerful
Inline Anchor Styles
It had been my luck to live en famille with some herder Lapps once before in North-Western Norway. I had some elk shooting and some fishing up there, and I came across the tribe one day poaching red char from one of my own hired lakes. When we actually did get under weigh, our outfit consisted of one inferior double-barrelled 12-bore shot-gun by an anonymous maker, one good Marlin ’45 repeating ri
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.
12種類 CSS3アニメーションで枠線に楽しい動きをつけてみた | Stronghold Archive
どうもこんにちは。Toshikuraです。今回のTipsは【12種類 CSS3アニメーションで枠線に楽しい動きをつけてみた】です。Flash主流時代にはよく見たので作ってみました。実装は比較的簡単ですのでよろしければ遊んでみてください。まずはデモ（クラス切り替えでの実装）｜デモ（マウスホバーでの実装）を見ていただけると内容が把握できるかと思います。 実装方法 実装には下記HTMLが必要になります。枠線とは書きましたが正確にはそれぞれ上下左右に配置されたDIV要素になります。 HTML <div class="box"> <h1>1</h1> <div class="bd1 bd"> <div class="bdT"></div> <div class="bdB"></div> <div class="bdR"></div> <div class="bdL"></div> </div> </
Effeckt.css
From Below From Above Slide In (top) Slide In (right) Slide In (bottom) Slide In (left) Newspaper Side Fall Sticky Up 3D Flip (horizontal) 3D Flip (vertical) 3D Sign Fade In 3D Slit 3D Rotate Bottom 3D Rotate In Left Blur Let Me In Make Way! Deep Content Slip From Top From Top, Tilt Fall From Top to Bottom From Bottom to Top From Left to Right From Right to Left From Above to Below From Below to A
WebGL無しiOSでも簡単軽快3D。three.jsとCSS3DRendererでDOMを3D化
Warning: preg_replace(): Compilation failed: invalid range in character class at offset 4 in /home/koj/www/sites/0017_tettori.net/wp-content/plugins/crayon-syntax-highlighter/crayon_langs.class.php on line 340 Warning: preg_replace(): Compilation failed: invalid range in character class at offset 4 in /home/koj/www/sites/0017_tettori.net/wp-content/plugins/crayon-syntax-highlighter/crayon_langs.cl
Why moving elements with translate() is better than pos:abs top/left - Paul Irish
Update (2016): The more canonical writeup of this technique is at High Performance Animations - HTML5 Rocks. TL;DR: Only transform & opacity; never top/left! In modern days we have two primary options for moving an element across the screen: using CSS 2D transforms and translate() using position:absolute and top/left Chris Coyier was asked why you should use translate. Go read his response which c
Animated Media Queries | CSS-Tricks
If you apply a transition on an element for a particular supported property, and that property ever changes, it will use that transition. If a class name on that element changes and the new class changes that property, it will transition (assuming what that class does isn’t remove the transition). If JavaScript literally changes the that style property, it will transition. Likewise, if a new media
透明ノイズと紙テクスチャ。
ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。このブログにも背景にうっすらノイズ画像を敷いてます。真っ白にするよりも何となく柔らかい感じになって好きなんです;)。 そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみます:)。 透明ノイズ 「透明ノイズ」とは、ノイズ画像を半透明にしたPNG画像のこと。僕が勝手にそう呼んでるだけですけど。 Firefoxで、画像を右クリックして「画像だけを表示」を選んだ時に開くページの背景にも使われてました（※下図は2013年9月現在。今は透明じゃないノイズになってます）。 Firefoxの「画像だけを表示」 body要素のスタイルに、下記のように指定されてました（※下記ソースコードは2013年9月現在）。 body { background: #222
Create CSS3 - Easy CSS3 Generator & SASS Compass CSS3 Generator
Knowing your way around CSS is absolutely necessary if you want to have a half-decent looking website. In a lot of ways, having good CSS fundamentals is the great equalizer - if you know your stuff, your sites will look good, regardless of whether you're a freelancer or a bigger agency. Think about it this way: You could be one of the best SEO agencies in the world, but if the sites you're ranking
CSS3 Animation Cheat Sheet - Justin Aguilar
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum euismod odio quis pretium hendrerit. Pellentesque fringilla suscipit ipsum ut euismod. Phasellus quis porttitor eros, vitae luctus est. Vivamus ut porta massa. Suspendisse id erat placerat, pulvinar nunc at, fringilla risus. Aliquam erat volutpat. .slideUp Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum euismod
Creative Button Styles
Note that on mobile devices the effects might not all work as intended. Button Button Button Button Button Button Button Button Button Button Button Button Button Button Yes No Add to cart Bookmark Favorite Settings Send data Continue Return Continue Return Add to cart Delete Settings Add to cart Delete Settings Button Button Button Button Button Button Button Button Button Button Button Button Cl
CSS3での日本語縦中横を考える - ちくちく日記
【問題】 日本語縦組で文字が縦中横されたとき、組まれた文字の文字幅はどうなっているのが正解か A. 1文字の幅（1em）に納める B. 何もせずそのままの幅にしておく ▲（左）A. 1文字の幅（1em）に納める （右）B. 何もせずそのままの幅にしておく 何の話をしているのかというと、これ、、CSS Writing Modes Level3で定義される日本語縦組での縦中横の処理の話である。 先日、村上さん、小形さんお二人の呼びかけで「fantasai（ファンタサイ）さんを囲む夕べ」という飲み会が開催されました。 W3C CSSWG Tokyo F2Fのため来日中のfantasai twitter.com/fantasai/statu… を囲む夕食会を来週に計画してます。興味ある方は私にDMください。— 村上真雄 MURAKAMI Shinyuさん (@MurakamiShinyu) 201
» スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった | negic
パララックスなサイトを作る際に、スクロールに応じてJSで要素を動かすと思うのですが、その時にある場所でCSS3 Animationsが動いていると、スクロールがカクついてしまい、FPSが残念な状態になります。 そこで、スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3 Animationsを再度動作させるという処理を加えれば、スクロールがカクつくことなく、スムーズになります。 スクロールや、リサイズといったJavaScriptのイベントは連続で処理されます。そういったイベントの「開始した時」「動作している時」「停止した時」の状態が取れるjQueryのプラグインを作成しました。 jQuery.MovingState このプラグインを使い、CSS3 Animationsを動的に操作してみたいと思います。 CSS3 Animationsを一時的に停止
CSS3 Geometry
CSS3 playground originally inspired by geometrydaily.tumblr.com (but now includes all kinds of geometry!) Curated by Lara Swanson (@laraswanson) Pearl / Pin Icon - One Element by Jitendra http://dribbble.com/shots/1222185-Pearl-Pin-Icon See the Pen Pearl / Pin Icon - One Element by Jitendra (@berdejitendra) on CodePen. April 03, 2014 by jeet5 Permalink Rollers! (infinitely unwrapping prisms; 3D, p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dropthebit - A Bitcoin platform on-the-rise
CSS3 Keyframes Animation Generator
Sidebar Transitions
CSS３の３D変換用matrix3dのX,Y,Z座標への回転・移動・拡大の変更できるジェネレータ | アバニエス