これは覚えておきたい！ CSSの三角関数で斜めのレイアウトを実装するテクニック

2023/04/17 163 users CSS 三角関数 レイアウト ヘッダ テクニック

ヘッダやコンテンツの区切りを斜めにしたいとき、どのように実装していますか？ CSSの三角関数が主要ブラウザのすべてにサポートされたことで、今まではかなり複雑なCSSやJavaScriptが必要だった斜めのレイアウトがシンプルなCSSで実装できます。 コンテンツ自体を斜めにすることも、水平のままにしておくことも可能です... 続きを読む

VRの研究をしたい人へ　〜VRの研究分野マップ〜｜yunoLv3｜note

2019/01/22 51 users 研究 Twitter 一助 ゆう 大学生

どうも、ゆうのLv3（Twitter）です。自己紹介は記事末尾に書いてあります。 センター試験お疲れ様でした。VRに興味のある高校生、大学生に向けて、進路選択の一助となればと思って筆をとった次第。この記事では、日本のVR技術の水平を押し広げてくれるあなたへ、VRの研究分野のマップをお届けします。あ、本記事ではVRを... 続きを読む

[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ | コリス

2013/10/01 760 users コリス jQuery スクリプト エフェクト スライド

最近よく見かけるかっこいいコンテンツやエフェクトを実装できるjQueryのプラグインを紹介します。 fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォ... 続きを読む

[CSS]コピペで簡単に使える、パネルの表と裏をくるっと水平・垂直にひっくり返すスタイルシート -CSS Flip Boards | コリス

2013/05/16 207 users アニメーション コリス テキスト 全部 デモ デモ

パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。 くるっとなるのは水平だけでなく、垂直にも対応しています。 CSS Flip Boards CSS Flip Boardsのデモ CSS Flip Boardsの実装 CSS Flip Boardsのデモ デモは全部で、4種類のくるっがあります。 前半2つはテキストを配置したパネルで、上：垂直、下：水平にくるっ... 続きを読む

[CSS]パネルをくるっと気持ちよく回転させるスタイルシート6種 -Fun with CSS | コリス

2013/03/31 65 users アニメーションgif アニメーション マウス デモ 回転

デモはCSS3アニメーションを使用しているので、最新のモダンブラウザでご覧ください。 各パネルをマウスでホバーすると、くるっとします。 Fun with CSS 回転のアニメーションは、左上から順に。 垂直：下方向 垂直：上方向 水平：右方向 水平：左方向 垂直：下方向：半回転 斜め 見えない人用に、デモをアニメーションGIFでどうぞ。 続きを読む

[JS]画像やコンテンツを水平・垂直に気持ちよくスクロールさせて表示することにこだわったスクリプト -Sly | コリス

2012/10/30 276 users Sly FRAM コリス jQuery スクリプト

水平・垂直に配置した画像やコンテンツを気持ちよくスクロールさせることと次に表示するアイテムのロジックにこだわったjQueryのプラグインを紹介します。 IE6にも対応してるのがびっくりです！ 特徴は気持ちのいいスクロールだけでなく、ナビゲーションのロジックも直観的で、次に表示するべきアイテムを自動的に先頭に配置します。クリックでアクティブにしたアイテムも常に保持します。 操作は上部のバー、FRAM... 続きを読む

[JS]並べて配置したパネルを滑らかなアニメーションで伸縮させるスクリプト -Kwicks for jQuery | コリス

2012/10/21 82 users コリス イージング jQuery スクリプト mootools

水平・垂直に配置したパネルをイージングやバウンドなどの滑らかなアニメーションで伸縮させるjQueryのプラグインを紹介します。 Kwicks for jQuery Kwicksは元来、MooToolsのエフェクトでしたがjQuery用にし、アニメーションのスムーズさ、コントロール、イベントのインタラクションなどを改善するために今回ゼロからリライトされました。 Kwicksのデモ Kwicksの使い... 続きを読む

リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)

2012/03/12 1325 users Fireworks エッチング フェンリル テクスチャ くら

iCloud 風アイコン iCloud 風アイコン2 こんにちは、イメージ担当の長谷川です。 今回は iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラ... 続きを読む