Styling & Customizing File Inputs the Smart Way | Codrops
A tutorial on how to style and customize <input type=”file”> in a semantic, accessible way using the <label> element and some JavaScript. There are quite a few techniques for “customizing” the <input type="file" /> element. I tried most of them, but none was good enough to have on Readerrr (for importing feeds by uploading a file). Probably the worst technique was the one where the input element i
25 Snippets That Demonstrate the Power of Canvas & SVG
Discover 25 CSS and JavaScript snippets that demonstrate some of the amazing effects you can create using SVGs and canvas elements. Open source code has ushered in a new era of frontend web development. Beginners and experts alike can save time and stress by working with pre-built code snippets. The following gallery consists of 25 different snippets for creating animated effects with pure CSS. Al
コピペで実装！CSS3でオシャレなデザインのサンプルコード47選
2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG https://liginc.co.jp/web/h
LESSとSASSとRECESSとCompassとかを整理した | kanonjiのブログ
大元のCSSのメタ言語でよく名前が挙がってる2つが、LESSとSASSです。この2つの違いを知って、どのツールがどっち用なのかを見ればすっきり理解出来るはず。 CSSメタ言語の他にCSSプリプロセッサーと呼んだりもするらしいです。 http://lesscss.org/ JavaScript系でビルドするにはnodeを使います。SASSと比べるとCSSの書き方から外れない、シンプルな書き方、らしいです。 <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script> サーバー側でビルドしなくても、クライアントサイドでCSSに変換してそのまま適用する仕組みもあります。 http://sass-lang.com/ R
ブルブル震える。ふなっしー好きにはたまらん狂気のCSSアニメーション
jQueryやCSSで、サイトの雰囲気をすこし賑やかな感じにしたいなあ。アニメーション効果を探していたところ、「こ、これは？」なCSSライブラリを見つけました。 使い方は非常に簡単。対象はなんでもOK。こんなふうに、CSSでClassにひとことふたこと付け加えるだけで、ブルブル震えてくれます。 <div class="shake shake-constant"></div> 動きはまるで「ふなっしー」 スマホの人は、スクロール中は動かないので、少しずつスクロールを止めて見てください。 なぜ、フナ？ アニメーションの動きがまるで「ふなっしー」なので。本当はふなっしーのイラストや写真を例に紹介したかったのですが、版権的にヤバいかなーと思って。 動きかたには、いくつか種類があります。上のは「垂直」。CSSで指定すれば、「マウスを重ねるとストップする」、あるいはその逆、「マウスオンでブルブル震えだ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まだ中央寄せで消耗してるの？ - @yoshiko_pg
CSSのすぐに使える小技から驚きのスゴ技まで！CSSアニメーションの素晴らしいアイデアのまとめ | コリス
CSSStyleSheet: insertRule() メソッド - Web API | MDN
CodePen - Front End Developer Playground & Code Editor in the Browser
range.css
Flipsblog.jp