CSSでアニメーションする馬をパカパカ走らせるイリュージョン:phpspot開発日誌CSSでアニメーションする馬をパカパカ走らせるイリュージョン。 まずは以下のムービーを参照 この原理をCSSで応用してみたのが、このページ(モダンブラウザで確認)。 ブラウザの幅を変えると馬がパカパカ走ります。 上記ムービーのように、内容を変えてみて面白いものが作れるかもしれませんね。 利用者が、ブラウザの幅を変えるようなシチュエーションを作っておいて、変えた途端「おぉー」という状況を作れます。
印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]
印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。 印刷用デザインをどうするか。 当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。 さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。 ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方（基本編）もかなり（むしろほとんど）参考にさせてもらいました。そのポイントを以下の7つにまとめました。 なお、文末にアックゼ
![印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f625aab20ef8abfef513499376656cecc29a08ae/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Faratako0%2F20080518%2F20080518141449.png)
IEで「position:fixed;」を使う方法 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 あんまり綺麗な方法じゃないのだけど、5分でできる。 （サンプルファイル） #fixedElement { position: fixed; top: 100px; left: 80px; /* IE5 later && javascript-on */ position: expression('absolute'); top: expression(documentElement.scrollTop + 100 + 'px'); left: expression(documentElement.scrollLeft + 80 + 'px'); } note: max
長～いURLによるカラム落ち、に対処する - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 長いURL(半角英数字）を強制改行させるには、CSSで「word-break: break-all;」を指定すれば良い。これはIEの独自拡張で、IE5.0から対応しています。 通常のボックス要素の場合だと、Opera/firefoxではボックスを突き破りはしても、ボックスを拡張したりはしない。 幅が指定されたボックス要素を拡張してしまうのはIEのバグなので、通常は「word-break: break-all;」で大きな問題は無いです。（レイアウトが崩れない、て意味ね） ただし、table要素に詰まっていると、ややこしくなります。table要素は特殊なブロック要素で、中
CSS Sprites化と画像減色でサイトを高速化 - エスカフラーチェLLC
開発裏話1、開発裏話2、と紆余曲折を経てリリースした Twister Alternative ですが、今回はgihyo.jp の連載記事にも関連し、デザイン面からみたサイトの高速化のお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。 デザイン面でサイトの高速化というと不思議に思われる方もいらっしゃるのではないでしょうか。 Google App Engine のリクエスト制限 Twister では当初、Google App Engine で動いていました。Google App Engine ではリクエスト数に制限があるので、1回のページ読み込み時に発生するリクエストは最小限にしなければなりません。サイトの至るところで使われている一つ一つの画像はリクエストを増やしてしまう原因となります。 そこで
JSレスでピュアCSSの超カッコいいプログレスバーのサンプル:phpspot開発日誌
Pure CSS Animated Progress Bar | Css Globe Here's a simple demonstration of how you can create animated progress bar using pure css. JSレスでピュアCSSの超カッコいいプログレスバーのサンプル →デモを見る - ズイズイアニメーションしていきます。 何とこれ、ＪａｖａＳｃｒｉｐｔを使っていません。 CSSとHTMLオンリーです。 仕組みは、GIFアニメーションで100%までプログレスする画像を作成しておき、進捗部分までを画像で塗りつぶすというもののようです。 CSSだけじゃ無理だと思うようなところもCSSのみでやっちゃうのは感動してしまいますね。 関連エントリ JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート
CSS Cursors - CSS tutorial
Microsoft Internet Explorer 4+ and Netscape 6+ supports customized cursors defined with CSS. Although the cursors will not have the customized look in other browsers it usually doesn't ruin anything. These browsers will simply show the normal arrow-cursor which would be same case as if you refrained from customizing cursors at all. So unless the page really doesn't work without the customized curs
CSS の「値」とは何か - IT戦記
この前 以下のようなエントリを書きました CSS の名前の整理 - IT戦記 今回は CSS における この「value（値）」という言葉の意味、そして曖昧さについて書きたいと思います。 6 つの値 CSS において「値」は曖昧な言葉です。 なので、「値」という言葉を使って CSS の説明をするのは非常に効率が悪かったりします。 たとえば、「ここの値って、 hogehoge の意味の値？」「いやいや、ここの fugafuga の意味の値が piyopiyo なんだよ」というように、まったく無駄な会話が繰り広げられるわけです。 ですので、今日からはちゃんと CSS の「値」をちゃんと説明できるように、「値」に以下の 5 つの名前を付けましょう。 Declared values Cascaded values Specified values Computed values Used valu
How to Create Beautiful and Elegant HTML Lists Using CSS (Development) — Kaspars Dambis
HTML list have become one of the most used HTML elements for marking-up various semantic content structures — navigation, comments and even image galleries. This article will explain and show you how to style lists inside blog posts, articles or other basic HTML documents. Before we start, it is necessary to understand the importance of using specific HTML tags <ul> and <ol>, instead of simple num
clip プロパティで画像をトリミング
phpspot 開発日誌さんで、「CSS の Overflow を応用して画像を綺麗にリサイズ表示するサンプル」 という記事が上がっていたのですが、この手の一部トリミングだったら clip プロパティがちゃんと用意されてるんでそっちを使ってもできるんじゃないかということで、clip プロパティを使用したサンプルを簡単に紹介してみます。 いきなりですが、サンプル。 clip プロパティで画像トリミングサンプル 通常は画像の一部のみが表示され、マウスオーバーで全体が表示されると思います。 ソースは下記。まずは XHTML ソース。 <p class="clipSample"> <a href="***"> <img src="***" width="240" height="180" alt="" /> </a> </p> CSS は下記のとおり。今回のサンプルは画像のサイズが、240px ×
テキストスタイルをジェネレートできる CSS Type Set[to-R]
テキストスタイルをジェネレートできる CSS Type Set CSS Type Setはテキストのスタイルをジェネレートできるサイトです。 デザインなどをしているとき、テキストに違和感を感じることがありますが、そういう時に使えそうです。 line-heightやletter-spacing、word-spacingも一緒にシュミレートできるので、色と文字間隔の関係やフォントと行間の関係なども簡単に確認できるので非常に便利です。 ただ残念なことに日本語フォントに対応してないようですので、日本語フォントに対応させる為のブックマークレットを作っておきました。 CSS Type Setに日本語を追加 上のリンクを右クリックでお気に入りに追加(IE)/このリンクをブックマーク(Firefox)でお気に入りに登録して、CSS Type Setでそのお気に入りを実行することで利用できます。 気に入った
![テキストスタイルをジェネレートできる CSS Type Set[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/73d23b415d523c6c2684f2de451727e98b5b4e8d/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimg%2F20080215_01.jpg)
CSS Import™ | The CSS Gallery
Web app development tutorials and tools
wordpress-471323-1479269.cloudwaysapps.com – Just another WordPress site
It seems like you’re running a default WordPress website. Here are a few useful links to get you started: Migration How to use WordPress Migrator Plugin? Migrate WordPress from Siteground to Cloudways Migrate WordPress from GoDaddy to Cloudways General How do I take my website live from Cloudways? How to manage WordPress via WP-CLI on Cloudways? How to configure WordPress Multisite on Cloudways? H
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tanreisoftware.com
IzzyMenu - Menu Builder - Build your pro CSS/DHTML Menu!（CSSメニューの自動生成ツール）
[CSS]印刷用のCSSのフレームワーク -Hartija | コリス
[CSS]チェックしておきたい50のCSSのテクニック | コリス
CSS Vault » The Web's CSS Gallery & Site
CSS Beauty | CSS Design, News, Jobs, Community, Web Standards
CSS Drive- Categorized CSS gallery and examples.