タグ

cssとtoolに関するkakeiのブックマーク (11)

  • 画像をData URI schemeでテキストに変換するツール

    読み込んだ画像をData URI schemeでbase64のテキストに変換するツール。 画像をテキストに変換することでHTMLCSSの内部に画像データを直接埋め込むことができます。 まず最初に、テキストに変換したい画像を読み込みます。 ボタンを押すと読み込むファイルを選択するためのダイアログが表示されるので、変換したい画像ファイルを選択してください。 画像ファイルをボックスに直接ドロップすることでも選択できます。 読み込みが完了すると、画像は自動的にテキストに変換されます。 テキストボックス内に表示された「data:image/png;base64…」から始まるテキストがbase64で変換された画像データです。 このテキストを任意の場所に貼り付けることで画像を埋め込むことができます。

    画像をData URI schemeでテキストに変換するツール
    kakei
    kakei 2016/03/29
  • base64エンコード、インラインイメージ

    動作環境(2022-08-28時点) ・Google Chrome 104 ・Microsoft Edge 104 ・Mozilla Firefox 104 ・Apple Safari 15.6 base64: base64とは、制御コード等を含む印字不可能なバイナリデータやマルチバイト文字を、64種類の英数字のみを用いてエンコードする方式です。 MIMEによって規定されていて、7ビットのデータしか扱えない電子メールにて広く利用されています。 エンコード後のデータ(文字列)は、A-Z,a-z,0-9までの62文字と、+-の記号2つ、パディングの為の記号=の1個、合計64文字+1となります。 データ量は4/3(約133%)になります。MIMEの基準では76文字ごとに改行コードが入る為、この2バイトを含めるとデータ量は約137%になります。 インラインイメージ(インライン画像)について: 「d

    base64エンコード、インラインイメージ
    kakei
    kakei 2016/03/29
    data URI scheme / data:image/png;base64
  • 数値文字参照用変換スクリプト

    転載者注 : このリソースは以前 http://www.eris.ais.ne.jp/~haza/css/ref および http://www.eris.ais.ne.jp/~hiro/css/ref にて公開されたスクリプトを転載しています。 文字参照変換スクリプト JavaScriptのcharCodeAtメソッドを利用してunicodeコードを収得している為JavaScriptを利用できない環境では変換は出来ません。 css 入力 空白で区切る 結果 cssの参照方法は、末尾に区切り子がないため参照コードの後ろに16進数で使われる語句0-1,A-F,a-fが続いた場合、違う文字を参照してしまう恐れがあります、6桁にそろえ紛れをなくすか、後ろを半角空白で区切って回避するのが安全です。 16進数直後の半角空白はひとつ無視されることに気をつけて下さい。半角を表現したい場合は半角空白を2つ続

    kakei
    kakei 2015/11/04
    CSSの参照
  • CSS Gradient Animator

    @-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

    CSS Gradient Animator
  • CSS3 Button Generator – This site was closed.

    LR icons https://en.lricons.com/ CSS Button Creator https://cssbuttoncreator.com/ Button Maker https://css-tricks.com/examples/ButtonMaker/ CSS Button Generator for your pleasure http://www.dextronet.com/css-buttons-generator/ 2.5dBUTTON http://noht.co.jp/2_5dbutton CSS3 Typeset Style Generator http://www.sciweavers.org/i2style Button X https://www.bestcssbuttongenerator.com/ CSS button generator

    kakei
    kakei 2010/11/02
  • テキストをハイライトすると絵が出てくる! - sta la sta

    ※Firefox(推奨)またはSafariでご覧ください。(未確認ですがFlockでも良いようです。) via http://metaatem.net/highlite/ まずは以下のテキストをマウスでハイライトさせてみてください。(あるいはCtrl+Aでテキスト全選択ですね。) One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches int

    テキストをハイライトすると絵が出てくる! - sta la sta
    kakei
    kakei 2008/02/06
    手作業でやってたのに!/Flockで見てます。Mozilla系ブラウザなら大丈夫。
  • テキストエディタでWebサイト構築をガンバル人へ(1/3) ― @IT

    テキストエディタでWebサイト構築をガンバル人へ:どこまでできる? 無料ツールでWebサイト作成(6)(1/3 ページ) 「あえて」テキストエディタでWebサイト構築 今回はテキストエディタと組み合わせることで、開発をより便利にできるツールについて考えてみよう。 現在「あえて」テキストエディタでの開発を行われている方には、現在使っているエディタを選択するまでの“経緯”や“こだわり”があると思う。筆者もこれまでにさまざまなテキストエディタを試し、「この程度のもので十分だ」と感じるテキストエディタを現在使っている。 テキストエディタ+α そこで今回は、テキストエディタ自体とそのプラグイン/拡張機能に関する紹介は行わないこととし、「どのようなテキストエディタを使っている場合でも、組み合わせて使うことでより簡単にWebサイト構築ができるツール」という観点で紹介したいと思う。もちろん、Webオーサリ

    テキストエディタでWebサイト構築をガンバル人へ(1/3) ― @IT
    kakei
    kakei 2008/02/06
  • XHTML-CSS Validator

    Just type or paste an URL in the form above, and click on "check it" to see the magic. If you want to fine tune your validation, click on the "advanced" link. That's it! An Idea: The Social Media Algebra I used to be very good at maths. I really was. Then I started studying computer science stuff (which is normal for a computer scientist) and as time goes by, I forgot many of the coolest stuff I l

    kakei
    kakei 2007/12/14
  • CSSMENUMAKER.COM

    Get a price in less than 24 hoursFill out the form below. One of our domain experts will have a price to you within 24 business hours.

  • [ws] Color Scheme Generator 2

    Brand New Version Available & Moved! The Color Scheme Designer application has been moved to its own domain: http://ColorSchemeDesigner.com Please update your bookmarks. Newest version: http://colorschemedesigner.com Previous version list: http://colorschemedesigner.com/previous Nová verze & Přesunuto! Aplikace Color Scheme Designer byla přesunuta na svou vlastní doménu: http://ColorSchemeDesigner

  • マイクロソフト製サイト作成ソフト「Expression Web」日本語ベータ版

    以前まで「Microsoft Expression Web Designer」という名称だったモノで、日語ベータ版は無料で利用できます。ウリとしては、Web標準へ準拠しており、なおかつ洗練されたCSSページレイアウトが可能という点。 個人的には、Wordで作ったHTMLを最適化する機能やCSSなどのチェック機能、アクセシビリティの検査機能がなかなかお役立ち。使用感はDreamweaverっぽい。 というわけで、ダウンロードして実際に動かしてみました。 Microsoft(R) Expression(R) Web 日語ベータ版 起動にはMicrosoft .NET Frameworkが必要で、上記ページにダウンロード用のリンクが用意されています。 インストール可能な環境はWindows XP + SP2、Windows Server 2003 + SP1、Windows Vista。推奨

    マイクロソフト製サイト作成ソフト「Expression Web」日本語ベータ版
    kakei
    kakei 2006/09/13
    知人に教えるのによろし。
  • 1