MoreCSSは、スクリプトや複雑なスタイルシートを使用しないと実装できないものを、スタイルシートで簡単に指定するだけで実装できるようになるスクリプトです。 MoreCSS ライセンスはCC3.0 Unportedのため、クレジットを消さない限り利用はフリーです。 下記は、MoreCSSで実装できるサンプルの一例です。 ※下記以外にも、たくさんの機能が実装されています。
CSS Text Wrapper The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle.テキストを自由な位置で折り返せる「CSS Text Wrapper」。 テキストを円形等、好きな形の範囲内に収める仕組みが考案されたようです。 次のように、円形の中にテキストを並べる等、まさに自由自在です。 昔はこういった形でのテキストは空白を挟んだりして実現は難しいと思っていましたが、実現できるんですね。 デザイン系のサイトなんかで活用できそうな仕組みです。 こんな仕組みがあるとは知らない人に見せたらアッと驚くこと間違いないでしょう。 ちょっとしたサプライズを与えたい場合に使えますね。
デスクトップアプリケーションを開発していると、ウィンドウの大きさに合わせてウィンドウのメイン部の中身の大きさが動的に変わったりします。しかし、Webアプリケーションでは、なかなかそういう風に作ったりはせずに、画面が小さければ、スクロールバーで移動することが多いです。 でも、やっぱりそういう事をしたいときもあるので、ブラウザの画面の高さを100%使い切って表示してみます。 とりあえず動かしてみる とりあえず動作画面。表示したウィンドウを大きくしたり小さくしたりしてみてください。真ん中の部分が大きくなったり、小さくなったりしていると思います。 ポイント 標準化されていないもののJavaScriptではViewPortを取得する事ができます。クロスブラウザ用のソースコードはここを参照させていただきました。 var getViewPort = function() { var width, hei
「curvyCorners」はフリーのJavaScriptで、角が丸いコーナーをDIV要素で簡単に作ることが可能。特徴は画像を使ったのと同じくらい角がなめらかに丸くなる点と、いたって利用が簡単な点。 どれぐらい丸くなるのかという実例とコードのダウンロード、設置方法は以下を参照。 例その1、3ピクセルの白いボーダーを使い、角は半径20ピクセルで丸くなってます 例その2、固定幅と高さで画像を固定し、角は半径20ピクセルで丸くしている例 ダウンロードはこちらから 使い方は以下を参照 http://www.curvycorners.net/ ほとんどのメジャーなブラウザをサポートしているので汎用性も高く、使い勝手もいい感じです。
badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例) <scrip
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く