Creating rounded corners


Description: クロスブラウザで画像不使用の角丸コンテンツを実装するプラグインです。非常に軽量で使いやすいかと思います。
Sample: demo
Tutorial: Creating rounded corners (the “Deviant art’s” way)
License: -

Sample

主な特徴

既存の百科事典や他の類似のプロジェクトと比較した場合、ウィキペディアには次のような特徴がある。
従来、専門家によって監修、編集される百科事典を一般のインターネット利用者が匿名で編集できるようにしていること。参加者の資格制限などを行っていないため、年齢、職業、国籍などの点で多様な執筆者がボランティアで編集に関わるが、これは百科事典の開発プロジェクトとしては革命的なことであった。
コピーレフト用のライセンスGFDLを採ったオープンコンテント方式を採用し参加者によって投稿された内容を、複製・配布・改変することが容易にできる。ただ、GFDLが課す複雑な制約や、GFDL自体の排他性のため、厳密にライセンスに従った利用は難しい(Wikipedia:著作権#投稿者の権利が限定される場合を参照)。
ウィキシステムを採用し、パソコンのブラウザを使い誰もがいつでも簡単に執筆、編集できるプロジェクトであること。
投稿履歴が公開されており、いつ誰がどのような編集をしたかが把握できるようになっている。
利用者間の議論はなされるが、その全ては百科事典の作成を目的にしていること。この点で、例えば議論や情報交換を行う場である掲示板や ネットニュース(USENET)などと異なっている。
立候補や推薦で選ばれた管理者は一般ユーザーに行使できない機能(「ページの保護」や「投稿ブロック」など)を持つが、一般ユーザーの意見よりも管理者の意見の方が重要だとはみなされないこと。
広告などによる商業的収入を持たず、寄付により運営されている。
ウィキメディア財団のスタッフなどの一部の者を除き、編集から運営・管理に至る人々の大部分がボランティアである。
Wikipedia

Note

/*
	Deviantart's Rounded Corners Tutorial
	by Ignacio Ricci (The CSS Blog)
*/

	$(document).ready(function(){

		/* The top corners code */
		var topCorners = '<div class="c t t1"><span></span></div><div class="c t t2"><span></span></div><div class="c t t3"><span></span></div><div class="c t t4"><span></span></div><div class="c t t5"><span></span></div><div class="c t t6"><span></span></div>';

		/* The bottom corners code */
		var bottomCorners = '<div class="c b b1"><span></span></div><div class="c b b2"><span></span></div><div class="c b b3"><span></span></div><div class="c b b4"><span></span></div><div class="c b b5"><span></span></div><div class="c b b6"><span></span></div>';

		/* The content inside the cornered box */
		$('.cornerBox-content').each(function(){
			$(this).before(topCorners);
			$(this).after(bottomCorners);
		});

	});

jQueryと上記コードで動作します。非常に軽量ですね。

Related snippet :

  • Description: Read moreコンテンツを実装。といってもAjaxで呼び出す等ではなく、spanタグで囲ったテキストを最初は非表示させておく、というものです。 ...
  • Description: シンプルにアニメーションするメニュー。簡単なコードで実装することが出来ます。クロスブラウザにも対応しており、ちょっとしたインパクトも与えることができ ...
  • Description: バー全体が降りてくるタイプのドロップダウンメニューです。横並びに羅列されるので、下部コンテンツを邪魔することもありません。クロスブラウザで動作します ...
  • Description: ページ内アンカーリンクをグラフィカルな目次にして表示します。縦長のページ内の目次として使うことができそうですね。jQueryUIを必要とします。 ...
  • Description: クロスブラウザに対応したシンプルで使い勝手の良いギャラリー系プラグインです。マークアップもシンプルで導入も手軽に行えます。 Sample: ...
  • Description: クリックでドロップダウンするメニューコンテンツを実装します。スムーズにダウンし、戻りもスムーズです。IE6でもIE7でも全く同様の動きをしてくれます ...
  • Description: サムネイルに応じて画像がスライドします。ナビゲーションも一緒にスライドするのは印象的でいいですね。動作も軽快で汎用性がありそうです。コードも軽量でc ...