CodePen - Front End Developer Playground & Code Editor in the BrowserBuild, share, and learn JavaScript, CSS, and HTML with our online code editor. Discover web applications and hire talent from the world’s largest community of front end developers and designers.
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ページを開く
