Copy Click to change examples github.com/tipsy/bubbly-bg
![Bubbly demo](https://cdn-ak-scissors.b.st-hatena.com/image/square/b262c6e6de23dc47657173965b4c12b51dd1e450/height=288;version=1;width=512/https%3A%2F%2Ftipsy.github.io%2Fbubbly-bg%2Fimg%2Fconfig0.png)
使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく
実際のプロダクトで使われているソフトウェアは実践でもまれている分、より細かなニーズに応えられるようになっています。理想的な形ではなく、より実践的な視点で構築されているものでしょう。 今回紹介するOffice UI FabricはMicrosoftの提供するOffice 365で使われているフロントエンドフレームワークになります。 Office UI Fabricの使い方 Office UI Fabricのデモです。よくありそうな動画一覧画面です。 メニュー表示。 アイコン。 フォーム。 トグル。 テキストフィールド。 テーブル。 パーソナルカード。 写真付きのリスト。 パネル。 より詳細な設定ができるリスト。 カレンダーピッカー。 コマンドバー。 Office UI Fabricはフラットかつ落ち着いた色合いがちょっとだけ使われているといった白い部分がより強調されているフレームワークとなっ
みなさんは、CSSアニメーションどのように使っていますか? ウェブサイトのちょっとした演出でCSSトランジションを使用している方が多いと思いますが、類似のCSSアニメーションはどういった使い道があるのかよくわかっていない方も多いのではないでしょうか。実は、CSSアニメーションを使うとキャラクターアニメーションを作ることができます。 今回はシンプルな変形アニメーションを組み合わせて、1枚の画像で実現できるキャラクターアニメーションを制作しました。オリジナルのキャラクターをアニメーションさせていますが、CSSのコードのコピー&ペーストで他のキャラクター(画像)にも簡単に適応できます。 商用・個人問わず無料で利用できるMITライセンスで公開していますので、ウェブサイトやコンテンツ制作に是非ご活用ください。 伸びるアニメーション 上方向に「ぷるんっ」と伸びるアニメーションです。scale()でタイ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 文字の一部だけ色を変えて欲しい、そんな要望がクライアントから出たらどうしますか?一番単純なのは画像を使うことでしょう。しかしそこで諦めてしまったら試合終了です。 そこで参考にして欲しいのがCSS SANSです。スタイルシートで作られたフォントになります。 CSS SANSの使い方 CSS SANSはいわゆるサンセリフのフォントになります。今のところ大文字のAからZまでですが、小文字や数字、記号への対応がまたれます。 使い方もシンプルで、 <!-- Latest CSS --> <link rel="stylesheet" type="text/css" href="css-sans-1.0.0.css" /> <!-- A --> <div class="A"></div> <!-
<article> <section> <h1>1ページ目</h1> </section> <section> <h1>2ページ目</h1> </section> <section> <h1>3ページ目</h1> </section> </article> 改ページ ここにCSSを当てていき印刷すると綺麗にページが分かれるように組んでいきます。 まず、<section>タグに.print_page、<article>タグに.print_pagesというクラスを付けていきます。 ついでにprint.cssというスタイルシートを読み込みます。 <link media="print" rel="stylesheet" href="print.css"> <article> <section class="print_page"> <h1>1ページ目</h1> </section> <sectio
最近、CSSフレームワークが多く出てきましたよね。Bootstrapもいいですが、目的やデバイスに応じて選択しても良いのかも知れません。また、あまり多機能なフレームワークは逆に束縛になる可能性もあるので注意が必要です。 スマートフォンやタブレット向けにサイトを作るならばHeart.cssをベースにしても良さそうです。必要最低限の機能に止めつつ自由度を維持してくれているCSSフレームワークです。 Heart.cssの使い方 デモのアドレス帳。これはタブレット向けと言えるデザイン構成の場合です。 こんな感じのモーダルもサポートされています。 編集時の画面。ちょっと表示が違います。 こちらはスマートフォンの場合。 デザインはレスポンシブです。 こちらはAndroid風。タブレットサイズです。 こちらは同じデザインのスマートフォン版。 メニュー表示もサポートされています。 Heart.cssは実用
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
Bienvenue sur le blog d’une ancienne designeuse motivée et passionnée ! Ma vie est rythmée par de nombreuses passions que j’ai eu l’opportunité de découvrir pendants ces nombreuses années tournées autour du design. Le bricolage, la décoration et la mode sont quelques-unes de ces passions que j’ai apprise à découvrir. Si vous aussi, vous partagez ces mêmes passions, alors vous trouverez sur ce blog
Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways. Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it i
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
Here at DHTMLSite, you will find a directory of useful AJAX/DHTML scripts and tutorials. Articles 10 Useful Web Tools and Links - From The Knowledge Academy. CSS + Javascript Calendars - 10 Free Css and Javascript Calendars. Image Galleries - List of Image Galleries and Slideshows. CSS Graph Resources - Free CSS Graph generators and resources. Icons - A list of free 16x16 pixel icons
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く