無人島にある日本版ストーンヘンジ「王位石」の謎 - デイリーポータルZ：@nifty

2015/03/19 74 users デイリーポータルZ nifty 巨石 無人島 鳥居

長崎県は野崎島に、「王位石（おえいし）」という日本版ストーンヘンジとも言うべき謎の巨石がある。 サークル状にこそなってないものの、巨大な石が鳥居のように積み重なっている。その大きさは高さ24メートル。上に乗ってるテーブル状の石の大きさが5m×3m。人工物なのか自然にできたものなのかすらわかってないという。 これに間近まで迫ってきたのでレポートしたい。 続きを読む

[JS]このホバーエフェクト楽しい！シールのようにぺらっとめくるスクリプト -Sticker.js | コリス

2014/02/17 125 users コリス jQuery ホバーエフェクト スクリプト ぺら

写真画像やアイコンなどを配置したベタ塗りのボタンなどをサークル状にし、ホバーするとシールのようにぺらっとめくれるようにするスクリプトを紹介します。 実装は非常に簡単で、jQueryなどの他のスクリプトは必要ありません。 Sticker.js Sticker.js -GitHub Sticker.jsのデモ Sticker.jsの使い方 Sticker.jsのデモ デモはChrome, Safari... 続きを読む

ディテールの作り込みやカラースキームが素晴らしいUIエレメントが揃ったPSD素材のまとめ | コリス

2014/01/07 91 users コリス エレメント 半透明 UIエレメント PSD素材

次のプロジェクトで使いたくなるようなワクワクするUIエレメントが揃ったPSD素材を紹介します。 全てPSDファイルがダウンロードでき、UIエレメントだけでなく、PSDファイル自体もしっかりと作り込まれているものばかりです。 GerduKreatip - Agency Portfolio Theme 目に優しいグリーンをアクセントカラーにしたフラットなスタイルで、サークル状のエレメントや半透明、アイ... 続きを読む

商用利用無料、スマフォ向けユーザインターフェイスの引き出しを増やすPSD素材 -Flatastic Mobile UI Kit | コリス

2013/12/05 115 users コリス psd 区分け PSD素材 エレメント

ソリッドなライン、半透明のパネル、サークル状のエレメント、囲み線を使わない情報の区分けなど、美しくデザインされたスマフォ用のUI要素が100以上揃っており、しかも使用しているフォントやアイコンもセットになっているPSD素材を紹介します。 Flatastic Mobile UI Kit ダウンロードできる素材のフォーマットはPSDが2種類。 .psd (Retina Display) .psd (S... 続きを読む

[CSS]サークル状のエレメントにかわいいアニメーションを与えるスタイルシート -CSS3 Circle Animation | コリス

2013/11/20 63 users コリス Firefox Chrome アニメーション ホバー時

シンプルなHTMLでサークル状に実装したエレメントのホバー時に、かわいいアニメーションを与えるスタイルシートを紹介します。 実際の動作は、下記ページで確認できます。 Chrome, Firefoxなどのブラウザでご覧ください。 CSS3 Circle Animation アイデアの元となったのは、こちらのサイトの中央のサークル。 Vibrant Villages サークルのアニメーションは、ここで... 続きを読む

[JS]画像を使わずに、テキストをかわいくサークル状に配置するスクリプト -CircleType | コリス

2013/10/23 99 users コリス スクリプト テキスト 画像

幅780pxで表示 CircleTypeの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト、Lettering.jsを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <s... 続きを読む

4辺が違う色のボーダーにborder-radius:50%を加えると…｜Webpark

2013/03/28 88 users border-radius Webpark Tra ボーダー

タイトルのままですが、4辺が違う色のボーダーにborder-radius:50%を加えてサークル状にするとどうなるか知っていますか？私は先日知ったので紹介します。 border-radius:50%を加えてサークル状にするとこんな感じになります。border-radiusはIE8以下非対応ですので、下のは画像にしています。 かなり印象は変わります。当たり前といえば当たり前な気もしますが。で、tra... 続きを読む

[JS]さまざまな動きが楽しくてかわいい、サークル状のナビゲーションを実装するスクリプト -Circle Menu | コリス

2012/01/18 100 users コリス スクリプト ナビゲーション Timing デモ

デモページ: Timing, Reversed 上のデモでの逆順です。 Circle Menuの使い方 HTML 各アイテムはリスト要素です。 <ul> <li><a href="#">+</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#"... 続きを読む

画像を矩形以外の形状で表示したい人のためのチュートリアル | コリス

2011/10/19 60 users コリス チュートリアル サムネイル CSS 枚数

デモページ もう一つのサークル状のデモは、下記ページのギャラリーのサムネイルとして使用されています。 Roundfolio 画像の枚数が少ないのであれば個別に画像を作成してもよいかもしれませんが、このデモのように数多くあると、このテクニックを使用した方がより効率よく実装できます。 サークル状に使用する画像3種類 制作：HTML, CSS, JavaScript HTML ロールオーバーとマスク用に... 続きを読む

[CSS]CSS3の美しいエフェクトを備えたナビゲーション -Circle Navigation Effect | コリス

2011/10/10 75 users コリス jQuery アロー 半透明 CSS

デモページ 写真画像の下の半透明のパネルには画像の説明文とナビゲーション（アローとテキスト）が配置されており、ホバーするとサークル状にアニメーションで拡大しながらサムネイル画像に変わります。 実装 画像ギャラリー自体はjQueryをベースに作られており、ここではナビゲーションのエフェクトの実装方法を紹介します。 HTML ナビゲーション箇所はテキストと画像をa要素で内包します。 <div clas... 続きを読む

2D、3Dの多彩で面白いエフェクトを備えたスライダーのスクリプト -Flux slider

2011/06/16 52 users スライダー スクリプト iPhone jQuery エフェクト

iPhone, iPadなどにも対応した、画像のスライド時にCSS3アニメーションを採用し多彩なエフェクトが楽しめるスライダーを実装するjQueryのプラグインを紹介します。 画像の変更時は、上記のバー状のものをはじめ、ブロック状、サークル状など、2D、3Dのダイナミックなアニメーションが用意されています。 Flux sliderの実装 HTML 各画像をdiv要素で内包します。 続きを読む