[B! css] little_jpのブックマーク

Online StyleSheet Generator | OneClickCSS

What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッタースペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare

little_jp 2013/03/08

リンク

Change Text Link Hover Effect Using CSS3

2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！目次ちょっと予備知識文字色をふんわり変える背景色をふんわり変える文字をぼかす光を放つグロー効果背景を角丸にレインボーカラーに拡大・縮小角度を変えるくるっと回転 1. ちょっと予備知識今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、

little_jp 2013/02/01

*web
css

リンク

[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント

ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。 CSS Reset 下記は各ポイントを意訳したものです。 2012年人気のあったCSSリセットどのCSSリセットを使うべきか判断するポイント CSSリセットを上手に使うポイント 2012年人気のあったCSS Reset まずは、2012年に人気のあったCSSリセットベスト5！ CSS Reset経由で最もダウンロードされたものです。 Eric Meyer's "Reset CSS" 2.0 コードとドキュメント HTML5 Doctor CSS Reset コードとドキュメント Yahoo! (YUI 3) Reset CSS コードとドキュメント Universal Selector '*' Reset コ

little_jp 2012/12/20

リンク

ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ

ウェブ制作、主にフロントエンドの開発者に役立つチートシートを紹介します。順番は、iOS, HTML5, CSS, jQuery, WordPress, .htaccess, Git です。 HTML5での美しいコードの書き方、Sass、Zen Coding、jQueryのパフォーマンス、Gitの使い方などもありますよ。

little_jp 2012/10/16

リンク

画像を一切使わずCSSで描かれた「けいおん！」の澪がマジですごい！

今回紹介するのは、画像を一切使わずにhtml+CSSだけで「けいおん！」の秋山澪を描いた技術デモ作品です。実際に作品を見てもらえば分かると思いますが、ものすごくクオリティが高くて普通に画像にしか見えないレベルです。久しぶりにCSSで絵を描く作品で驚かされたので、これはぜひ紹介せねばと思い記事を書きました。「けいおん！」（K-ON!）は、軽音楽部で4人の高校生たちがガールズバンドを組み、音楽活動を行っていくストーリーで人気のかきふらい氏による4コマ漫画作品です。2年前にアニメ化、今月12月より映画が公開されている人気作品ですね。秋山澪はその作品に登場するキャラクターです。その秋山澪をまったくの画像なしで、html+CSSのコードだけで表現しています。私も以前にCSSでドラえもんなど様々な作品を描いたりしましたが、はっきりいってhtml+CSSのコードだけで絵を描くのはとても大変です

little_jp 2011/12/19

リンク

CSSスプライトのコードをインタラクティブに取得できる『Sprite Cow』 | 100SHIKI

CSSスプライトのコードをインタラクティブに取得できる『Sprite Cow』 June 22nd, 2011 Posted in 便利ツール（ウェブ） Write comment ちょいとマニアックだが、便利かつ、細かいところが使いやすかったのでご紹介。 Sprite Cowを使えば、いわゆるCSSスプライトのコードを簡単に取得できてしまう。使い方は簡単で、まずは画像をアップし、どの画像のコードを取得したいかを指定するだけだ。それだけで画面下部にCSSコードが表示される。なんとも気が利いているのが背景部分を自動的に認識し、クリック一発でアイコンやらを認識してくれる点。また元画像に透過チャネルがなかったとしても「透明にしたい色」を指定すればOKだったり、複数の離れている画像（文字とか）はドラッグして範囲指定できたりと、細かい部分の使い勝手が素晴らしい。他にも似たようなツールはあるが