Bubbly demoCopy Click to change examples github.com/tipsy/bubbly-bg
死んだCSSを見つける方法 - Qiita
使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく
Office UI Fabric - Office 365で使われているフロントエンドフレームワーク MOONGIFT
実際のプロダクトで使われているソフトウェアは実践でもまれている分、より細かなニーズに応えられるようになっています。理想的な形ではなく、より実践的な視点で構築されているものでしょう。 今回紹介するOffice UI FabricはMicrosoftの提供するOffice 365で使われているフロントエンドフレームワークになります。 Office UI Fabricの使い方 Office UI Fabricのデモです。よくありそうな動画一覧画面です。 メニュー表示。 アイコン。 フォーム。 トグル。 テキストフィールド。 テーブル。 パーソナルカード。 写真付きのリスト。 パネル。 より詳細な設定ができるリスト。 カレンダーピッカー。 コマンドバー。 Office UI Fabricはフラットかつ落ち着いた色合いがちょっとだけ使われているといった白い部分がより強調されているフレームワークとなっ
コピペで使える！ CSS Animationだけで実現するキャラクターアニメーション - ICS MEDIA
みなさんは、CSSアニメーションどのように使っていますか？ ウェブサイトのちょっとした演出でCSSトランジションを使用している方が多いと思いますが、類似のCSSアニメーションはどういった使い道があるのかよくわかっていない方も多いのではないでしょうか。実は、CSSアニメーションを使うとキャラクターアニメーションを作ることができます。 今回はシンプルな変形アニメーションを組み合わせて、1枚の画像で実現できるキャラクターアニメーションを制作しました。オリジナルのキャラクターをアニメーションさせていますが、CSSのコードのコピー&ペーストで他のキャラクター（画像）にも簡単に適応できます。 商用・個人問わず無料で利用できるMITライセンスで公開していますので、ウェブサイトやコンテンツ制作に是非ご活用ください。 伸びるアニメーション 上方向に「ぷるんっ」と伸びるアニメーションです。scale()でタイ
CSS SANS - テキストでも画像でもない文字表現
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> <!-
CSSで印刷レイアウトをコントロール
<article> <section> <h1>１ページ目</h1> </section> <section> <h1>２ページ目</h1> </section> <section> <h1>３ページ目</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>１ページ目</h1> </section> <sectio
Heart.css - シングルページアプリケーションに。スマートフォン/タブレット向けデザインフレームワーク MOONGIFT
最近、CSSフレームワークが多く出てきましたよね。Bootstrapもいいですが、目的やデバイスに応じて選択しても良いのかも知れません。また、あまり多機能なフレームワークは逆に束縛になる可能性もあるので注意が必要です。 スマートフォンやタブレット向けにサイトを作るならばHeart.cssをベースにしても良さそうです。必要最低限の機能に止めつつ自由度を維持してくれているCSSフレームワークです。 Heart.cssの使い方 デモのアドレス帳。これはタブレット向けと言えるデザイン構成の場合です。 こんな感じのモーダルもサポートされています。 編集時の画面。ちょっと表示が違います。 こちらはスマートフォンの場合。 デザインはレスポンシブです。 こちらはAndroid風。タブレットサイズです。 こちらは同じデザインのスマートフォン版。 メニュー表示もサポートされています。 Heart.cssは実用
Foundation for Sites | The most advanced responsive front-end frameworks in the world.
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
Pure.css
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
ex-designz : Un blog de design mais pas que !
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
Pagination Gallery: Examples And Good Practices | Design Showcase | Smashing Magazine
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
何かと役立つCSSの技 || Cool Web Window
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
DHTMLSite - Ultimate Resource on DHTML/AJAX Scripts and Tutorials
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS] 葉っぱがひらひら落ちるアニメーション![[CSS] 葉っぱがひらひら落ちるアニメーション](https://cdn-ak-scissors.b.st-hatena.com/image/square/7954456078ad8d6a7f02bfa13a597bbdd240df33/height=288;version=1;width=512/https%3A%2F%2Famateur-engineer.com%2Fwp-content%2Fuploads%2F2021%2F04%2Fleaf.png)
Fullscreen Overlay Styles & Effects | Demo 1
http://cssglobe.com/post.asp?id=903