この発想はすごい！ モダンCSSで実装する、ボーダーをアニメーションさせるテクニック

2022/08/09 121 users ボーダー モダンCSS 発想 テクニック デモ

モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと... 続きを読む

div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui | コリス

2019/09/18 149 users コリス ユーザーインターフェイス class div要素 形状

Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。 下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされ... 続きを読む

斜めに写った画像をCanvasで矩形に補正する - すぎゃーんメモ

2018/09/03 211 users canvas すぎゃー 人力 ラベル 素材

将棋駒画像分類の話の続きのような、あんまり関係もないような。 memo.sugyan.com memo.sugyan.com 結局、素材を組み合わせて自動で生成しただけの駒画像ではやはりデータが足りていないようで、「やはりもっと様々な画像から人力でラベル付けしてデータセットを作っていく必要がありそう」ということになった。 とはい... 続きを読む

[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック | コリス

2018/03/27 64 users コリス box-shadow シャドウ CSS 実装

ボタンや矩形などの要素にシャドウを付ける時は「box-shadow」が便利ですが、1色または重ねても全体が均一のカラーでしかシャドウを適用することができません。 2色の美しいCSSグラデーションでシャドウを適用するPure CSSの実装を紹介します。 Gradient shadow in pure CSS デモ 実装 デモ まずは、実際の動作から見てましょう。 2色の美しいグラデーションを伴ったシ... 続きを読む

[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック | コリス

2018/02/26 211 users コリス border height width CSS

パンくずでよく見かける三角形の実装方法に注目です。 今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしまいます。 リンク可能なエリアが、三角形の見た目と同じにする実装方法を紹介します。 Breadcrumb with arrow shaped links 三角形をborderで実装 ... 続きを読む

最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ | コリス

2018/02/02 239 users コリス ヘッダ ナビゲーション ランディングページ イメージ

ランディングページやブログなど、最近のWebサイトで見かけるヘッダのアイデア・実装方法を紹介します。 スクロールすると、ヘッダのイメージがズームしたり、フェードしたり、ヘッダの形が矩形でなかったり、ナビゲーションだけがス ...記事の続きを読む 続きを読む

[CSS]ワンランク上に！Webページのレイアウトを美調整するスタイルがまとめられたスタイルシート -fractures | コリス

2017/07/10 94 users コリス パディング Grid Flexbox CSS

float, flexbox, gridのレイアウトでよく使うスタイル、マージンやパディングを調整するスタイル、矩形・角丸・円形を実装するスタイル、幅や高さを調整するスタイル、要素を配置するdisplayやpositio ...記事の続きを読む 続きを読む

これは楽しい！本格的なピクセルアートが簡単に描けるPhotoshopの無料ブラシ | コリス

2017/04/21 73 users コリス 円柱 Photoshop 円形 ドット

ピクセルアートを描く時に使うラインやドットで構成されたさまざまなイラストのパーツ・エレメントが収録されたPhotoshopのブラシ素材を紹介します。 ピクセルアートならではのギザギザの斜めのラインをはじめ、L字、Y字、矩形、円形、四角柱、円柱、三角柱、マス目など、いろいろ揃っています。 NASC Photoshop Pixel Art Brush Set Photoshop Pixel Art B... 続きを読む

[CSS]デスクトップ・スマホ対応、浮かんだり光ったりアニメーションするボタンを簡単に実装できるスタイルシート | コリス

2017/03/28 61 users コリス 鋭角 円形 CSS グラデーション

外部ファイルを一つ加えるだけで、さまざまなボタンを簡単に実装できるスタイルシートを紹介します。 鋭角や角丸の矩形、楕円形、ハンバーガーメニューに使われる円形、グラデーションやフラット、ゼリーみたいなボタンもあります。 B ...記事の続きを読む 続きを読む

これぞプロのデザインテクニック！簡単なのにすごい、アイコンを作るテクニックのまとめ | コリス

2017/03/07 612 users コリス ライセン アイコン テクニック デザインテクニック

オリジナルのアイコンを作るシンプルで簡単なデザインテクニックを紹介します。 円や矩形などの基本的な形を組み合わせたり、変形させたりして、さまざまなアイコンを作成します。 作業に慣れてしまえば、どれも1分もかからずにアイコンを作成できます。 The Super Simple Guide to Iconography 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセン... 続きを読む

配色のセンスも参考になる！今チェックしておきたい「ソリッド」を効果的に使ったUIキット・ページレイアウトのまとめ | コリス

2014/08/05 114 users コリス ソリッド エレメント ダイアモンド PSDファイル

ソリッドなラインを使ったアイコン、テキストを矩形で囲ったゴーストボタン、ラインで描いた幾何学模様など、ソリッドを使ったUIキット、Webページやアプリのレイアウトやテンプレートを紹介します。 いくつかはPSDファイル（無料/有料）もダウンロードできます。 BrandaLoka 斜めのグリッドをはじめ、ダイアモンドやサークル状のエレメントなどにソリッドを取り入れたスタイリッシュな縦長1ページ用のテン... 続きを読む

[JS]画像やパネルの上をクリックしたら上辺が、中央なら全体が押されたようなエフェクトを適用できるスクリプト -whichTriangle | コリス

2014/07/09 50 users jQuery コリス 上辺 傾き エフェクト

パネルや画像など一つの矩形の要素は通常、矩形全体が一つのホットスポットですが、四辺それぞれと中央の計5つのクリックできるホットスポットにし、それぞれ異なるアクションやエフェクトを仕込めるjQueryのプラグインを紹介します。 ↓のように、中央だと全体がへこみ、上だと上辺が傾き、右・下・左もそれぞれの辺が傾くといったこともできます。 whichTriangle.js whichTriangle.js... 続きを読む

[JS]スタイルシート初心者にも優しい！要素を天地左右中央に配置できる簡単超軽量スクリプト -Midway.js | コリス

2013/06/03 209 users コリス スクリプト 天地左右 デモ HTML

デスクトップやスマフォ・タブレットのレスポンシブ対応で、画像やテキストなどを天地左右の中央に簡単に配置できる超軽量（1KB）のスクリプトを紹介します。 作業は、HTMLに2つ追加するだけです。 Midway.js Midway.jsのデモ Midway.jsの使い方 Midway.jsのデモ 天地左右中央配置は表示サイズを変更しても、変わらずに天地左右中央配置になります。 デモは、ブルーの矩形の中... 続きを読む

Photoshopで角丸矩形の四つの角丸を個別に編集できるようにする機能拡張 -Rounded Rectangle Radius Resizer | コリス

2012/12/06 142 users コリス Photoshop 個別 角丸 機能拡張

Photoshopで角丸矩形を作成する時、シェイプツールをよく使用すると思いますが、その角丸の矩形の四つの角丸を個別に数値で編集することができる機能拡張（スクリプト）を紹介します。 対応は、CS5, 6みたいです。CS6のWin, Macの日本語環境で動作しました。 Rounded Rectangle Radius Resizer Rounded Rectangle Radius Resizerの... 続きを読む

[CSS]画像やパネルに斜めにしたリボンを重ねるスタイルシート | コリス

2012/05/09 142 users コリス 並列 jpg CSS div要素

「New」「新着」などのちょっとした情報を単に矩形で添えるのではなく、斜めにしたリボンで添えるスタイルシートを紹介します。 デモページ：div要素 ※当方作成 実装 実装はimg要素もdiv要素もほぼ同じです。 HTML:img要素版 リボンのテキストはimg要素と並列に配置し、div要素で内包します。 <div class="side-corner-tag"> <img src="1.jpg" ... 続きを読む

[CSS]ol要素を美しくスタイルし、アニメーションをちょっとだけ加えるテクニック | コリス

2012/02/19 97 users コリス ポパー アロー Safari CSS

デモ 実装 対応ブラウザ デモ デモはIE9, Firefox, Chrome, Safariでご覧ください。 擬似要素のアニメーションは、Firefoxのみサポートしています。 デモページ：Demo 1 数字を矩形にスタイルし、ホバーで数字からアローが伸びます。 ※アニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルで、ol要素を入れ子にして実装するだけです。 <o... 続きを読む

[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic | コリス

2011/08/28 482 users コリス script SONIC circle Square

HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、... 続きを読む

[JS]角丸を簡単な記述で実装するスクリプト -Roundcorners Canvas | コリス

2008/03/10 236 users コリス document READY Look div

Roundcorners Canvasは、タブ・ボタン・テーブルなどの矩形に、簡単な記述で角丸を実装できるスクリプトです。 Roundcorners Canvas デモページ 上記のキャプチャ画像のように、divの矩形(赤の箇所)と、リストのタブ(Lookの箇所)を角丸にするには、下記のコードを使用します。 $(document).ready(function() { $(”#mainblock”... 続きを読む

2007年ウェブデザインの６つのトレンド | コリス

2007/12/14 263 users コリス テクスチャ マスコット トレンド 暗い背景

2007: More Web Design Trends & Cliches 紹介されているトレンドは、海外のデザインのため(だと思います)、日本語圏内ではあまり見られないデザインですが、キャンペーンサイトやブログなどではちらほら見かけたりします。 かわいいマンガのマスコット 複雑な回転模様や滴の飾り罫 矩形ではない自由な境界線 とても大きいRSSアイコン 高品質なテクスチャ 暗い背景に使用する鮮... 続きを読む

黄金比をサイトのデザインに取り入れる簡単な３つの方法 | コリス

2007/03/29 1302 users コリス みろ モナリザ パルテノン神殿 ギリシア

その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して1... 続きを読む