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

RefineSlide

Features A few transitions to play with Responsive down to mobile scale CSS transition & 3D transf orm support Javascript fallback fade transition Auto-formatted, responsive thumbnails Good browser support (IE7+) HTML captions Hardware acceleration on supported browsers Free to use and abuse as you like Simple, semantic markup Lightweight: 12k minified (4k gzipped) Installation - Essential steps -

pistaro 2012/06/20

リンク

html5-memo.com

pistaro 2012/06/13

css

リンク

[CSS]タイプライターのように一文字ずつアニメーションで表示するスタイルシート

JavaScriptは使用しないで、CSS3アニメーションでタイプライターのように一文字ずつ表示するスタイルシートを紹介します。デモページ実装両デモの実装方法を紹介します。 HTML HTMLは共通で、h1要素でテキストを実装するだけです。 <h1>Typing animation by Lea Verou.</h1> CSS:モダンブラウザ対応版 CSS3のsteps()を使用して一文字ずつ順番に表示します。フォントはアニメーションのタイミングを同じにするため等幅（monospaceなど）で。 Pure CSS3 typing animation with steps() @-webkit-keyframes typing { from { width: 0 } to { width:16.3em } } @-moz-keyframes typing { from { width

pistaro 2012/02/27

リンク

「シンポジウム電子書籍の組版を考える」の発表内容が公開 - もじのなまえ

昨年8月に開催された文字の学校主催﹁シンポジウム電子書籍の組版を考える﹂での発表全文が公開されています。電子書籍の御利益というと、真っ先に浮かぶのがリフロー表示ですが、リフローしても見やすい画面表示︵組版︶を確保するには、まずそのための組版ルールが必要の筈です。本来はこれほど衆知を集めるべきテーマはないと思うのですが、残念なことにこれを正面から取り上げたのは、この半年も前に開かれた上記のシンポジウムが希少例というのが現実です。その貴重なシンポジウムの内容が、ようやく公開されました。シンポジウム電子書籍の組版を考えるじつは、このシンポジウムのレポート原稿をずっと書いているのですが、なかなか完成できずにいます。上記のページは、その原稿用に作成した音声起こしが元になっています︵もちろん、発表者の皆さんがチェックを入れているので、そのままではありません︶。ここで示されている考察は、リフ

pistaro 2012/02/27

リンク

CSS3Generator by @RandyJensen

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, rem aining essentially unchanged. It was popularised in the 1960s w

pistaro 2012/02/21

リンク

Ultimate CSS Gradient Generator from ColorZilla

background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */

pistaro 2012/02/21

リンク

Layer Styles

LayerStyles v 0.1 just like your favorite graphics editor but in your browser. And it creates CSS.

pistaro 2012/02/21

リンク

画像を使わずに見出しを水平線で挟むCSS小技

ちょっと素敵だったので備忘録。CSS で見出しを水平線で囲むテクニックです。本とかでよくある表現方法ですが、これを画像を使わず実装しよう、というもの。クロスブラウザで動作しますので汎用性もありますね。これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。demoこんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。 h1 { border-top: 1px solid black; margin:23px 0 0; text-align:center; padding:0; height:24px; } h1 span { position: relative; top: -24px; padding: 0 20px; background:white; }borderを使って実装。h1にborderを付けて位置を下げ、spanで

pistaro 2011/11/05

jQuery
css

リンク

[CSS]サイズが分からない要素を真ん中に配置するテクニック

width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。 Centering in the Unknown [ad#ad-2] 下記は各ポイントを意訳したものです。要素のサイズが分かっている場合要素のサイズが分からない場合まとめと対応ブラウザ要素のサイズが分かっている場合「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。 CSS .centered { position: fixed; top: 50%; left: 50%; margin-t

pistaro 2011/11/03

リンク

JavaScriptなし!! CSSだけで実現する3Dアニメーション | HTML5GOGO

CSS3のアニメーションサンプルで、立方体を扱ったものは数あれど、それ以上の多面体のサンプルが見当たらなかったので、倍の12面体を作りました。イメージ概要今回はそのサンプルを題材に、CSS3で新たに追加されたアニメーション系のプロパティをご紹介します。 ※今回ご紹介するプロパティは、執筆時点では全て要ベンダープレフィックスです。 ※対応ブラウザ‥Chrome12～, Safari 5～ Mozillaは﹁現時点ではZ軸はサポートされていないため 3D の回転や 3D 拡大縮小、3D 変換はサポートされていません。﹂だそうです。 MDN – CSS transf ormsの利用 ※グラフィックボードが3Dの表現に対応している必要があります。 ※動作にはCPUパワーが少々必要になります。 HTMLサンプル ※各面はリンクになっています。回転方向を指定できるコントローラー付きのサン

pistaro 2011/10/15

iPhoneで見てるけどすごい！ますますcss嫌いになりそうw

リンク

著作権放棄・シンプル・軽量で、iPhoneなどにもレイアウトを調整できるレスポンシブWebデザイン対応のHTML5フレームワーク・Fluid Baseline Grid

なかなか凄いフレームワークがあったので反射的にメモ。パブリックドメインというのが何より太っ腹ですねー。自由に使用できて、シンプルで汎用的、しかも軽量で iPhoneやiPadにもレイアウトを自動調整するレスポンシブWebデザイン対応のHTML5フレームワークです。これ、凄く良い感じです。いいもの全部詰め込んだ、みたいなソフトウェアですね・・・ちゃんと使いこなせるようになりたいかも。 Media Queriesを使ったレスポンシブWebデザイン対応のCSSフレームワークです。3カラム構成で組めるようにもしてあります。マークアップはHTML5+CSS3ですが、jsを使ってIEにも対応してくれています。以下にざっと特徴を。著作権放棄(パブリックドメイン)軽量(CSSは9kb)ベースライングリッドに揃済みグリッドレイアウト対応iPhoneやiPadなどにも自動でレイアウトを調整HT

pistaro 2011/09/23

リンク

CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js

3連休も今日で最後ですねー。今日はゆっくり過ごす方も多そうですね。さて、休みですし、ちょっとネタ的なライブラリをご紹介。カーニングをCSSで出来るようにしたJSライブラリです。 jQueryやmootoolsなどにも依存していないようです。これだけ聞くとかなり使えそうなんですけど。でも個人的にこういうチャレンジは称えたいので敬意を示すつもりで記事にします。 CSSで出来る、と言っても独自の記述法を加える事でテキストコンテンツでのカーニングを実現するタイプなので好みが分かれそうですね。まだちょっとよく分かってないんですけど適当にデモ作ってみました。一応違いが分かるように少し大袈裟にしたつもりです。クオリティは無視です。 ※右上でjsのオン/オフが出来ます。Chrome推奨 Sample css#example01 {/*文字詰め*/ -letter-kern: 1px 1px 0

pistaro 2011/09/20

リンク

日本語組版処理の要件（日本語版）

1.1 この文書の目的すべての文化集団は，独自の言語，文字，書記システムを持つ．それゆえ，個々の書記システムをサイバースペースに移転することは，文化的資産の継承という意味で，情報通信技術にとって非常に重要な責務といえよう．この責務を実現するための基礎的な作業として，この文書では，日本語という書記システムにおける組版上の問題点をまとめた．具体的な解決策を提示することではなく，要望事項の説明をすることにした．それは，実装レベルの問題を考える前提条件をまず明確にすることが重要であると考えたからである． 1.2 この文書の作成方法この文書の作成は，W3C Japanese Layout Task Forceが行った．このタスクフォースは，次のようなメンバーで構成され，ユーザーコミュニティーからの要望と専門家による解決策を調和させるために様々な議論を行ってきた．日本語組版の専門家︵“JIS

pistaro 2011/07/19

リンク

CSSセレクタ20個のおさらい

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版﹁Selectivizr﹂で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

pistaro 2011/06/16

CSS3
css

リンク

[CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック | コリス

「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS：シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd

pistaro 2011/06/15

css

リンク

CSSを一撃分割　Cascader - Cleaning Up The Web

pistaro 2011/05/05

インラインCSSのHTMLをCSSファイルと分割

リンク

インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」

とある理由から、インラインでCSSが書かれているHTMLを、綺麗にCSSファイルと分割させたいというときもありますよね。しかし、これを手作業で進めるのはとても手間がかかり、0から作り直したほうが速いことがほとんど。今回は、そんなときに一撃でCSSファイルと分割できるサービスをご紹介します。組織のマインドマップツールをマインドマイスターにすべき理由伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!!インラインCSSのHTMLをCSSファイルと分割する﹁Cascader﹂﹁Cascader﹂は、インラインでCSSが書かれているHTMLファイルを、一発でCSSファイルと分割してくれるオンラインサービス。ひとつひとつ分解しなくても、HTMLをコピペするだけで分割できてしまうのが非常に便利です。 HTMLタグを貼り付けるだけで分割 ↑たとえば、画像のようにイ

pistaro 2011/05/05

これはすごい。便利そう！

リンク

[CSS]ブラウザのスタイルを初期化するスタイルシートの総まとめ -2010年版

ブラウザごとに異なるデフォルトのスタイルを初期化するスタイルシートの歴史を振り返りつつ、2010年の最新のCSS Resetまでのまとめを紹介します。 A Comprehensive Guide to CSS Resets [ad#ad-2] ユニバーサルセレクタから始まったCSS Resetの進化の過程をたどり、最近リリースされたCSS Resetを紹介します。下記は、各ポイントを意訳したものです。 (X)HTML "Hard" Reset undohtml.css -2010 version Poor Man's Reset Siolon Reset Inman Reset Tripoli Reset Dan Schulz's Reset Thierry Koblentz's base.css Simple Reset CSS Mini Reset Soft Reset Less i

pistaro 2010/12/16

リンク

ピュアCSSでonclickイベントをシュミレーションするデモ:phpspot開発日誌

Quick Tip: Mimic a Click Event withCSS | Nettuts ピュアCSSでonclickイベントをシュミレーションするデモ。 :target 擬似クラスを利用して、クリックイベントをシュミレーションしたデモが公開されていました。﹁Zoom In﹂を押すと画像がアニメーションしながらズームします。Chrome等のWebkitベースのブラウザで見てみてください。デモページ一昔前ならどう見てもJavaScript でやってるように思うのですが、一切使っていません。しかも意外と簡単にできるので覚えておいてもよさそうです。関連エントリ CSSでアニメーションする馬をパカパカ走らせるイリュージョン CSSとJavaScriptでアニメーションがカッコいいメニューを実装﹁FreeStyle Menus﹂ピュアCSSでTwitterのメンテナンスモードの

pistaro 2010/12/15

リンク

[CSS]シンプルなHTMLに付箋紙のデザインを適用するスタイルシート

Sticky Notes with CSS3 デモ：左、デモ：右 [ad#ad-2] 付箋紙はどんな背景にも適用できます。デモ画像無しで付箋紙 Sticky Notes with CSS3 by accidental hacker 付箋紙の実装上記の当サイトに設置したデモのコードを紹介します。リスト要素で実装します。p要素は付箋紙には必要ありません。 <ul id="notes"> <li> <p>画像無しで付箋紙</p> </li> <li> <p>Sticky Notes with CSS3<br />by <a href="http://www.accidentalhacker.com/sticky-notes-with-css3/">accidental hacker</a></p> </li> </ul> [ad#ad-2] CSS3のグラデーション、ボックスシャドウ、回

pistaro 2010/12/15

リンク

はてなブックマーク

タグ

関連タグで絞り込む (50)

cssに関するpistaroのブックマーク (44)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス