[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した
角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました！ デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書いたりしていました。 illustratorで角丸を扱う際の注意点 ※追記しました | ナナメウエblog 私も以前デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素という記事を書いたとき、角丸についてはさらっと触れるに留めたのですが、いずれもっとがっつり言語化したいものだと考えていました。 気になることもあったし、ちょうど良いので今回便乗して記事にしてみようと思います。 形状としての
![[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した](https://cdn-ak-scissors.b.st-hatena.com/image/square/9068d7a52b34c4de9a5be296ee0a927a28903d59/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fdesign-rounded-corner-13-150x150.png)
IE6～ でもドロップシャドウ、角丸、透過とか書けちゃう『CSS3 PIE』がけっこう素敵でした。 / Maka-Veli .com
超今さらなヤツらしいですけど、でもこれ、楽チンだなー。 ※2013/2月現在、2.0betaも出ていました。 という事で、このサイトにも一部だけ実装してみました。 微妙に見え方が違う・・・ 使い方 DLした「PIE.htc」というデータをサーバにアップ behavior: url("/PIE.htc"); を、指定したいCSSに記述 ※htcファイルをアップした場所を指定して下さいね div { border-radius:3px; border-shadow:1px 1px 1px #CCC; behavior: url("/PIE.htc"); } ※色に関しては、#CCCCCC 等、16進数で指定して下さい。 black とか、カラーネームはダメらしい。 独自プレフィックスで透過もOK -pie-background: rgba(100,100,100,0.5); というよ
Photoshopで角丸矩形の四つの角丸を個別に編集できるようにする機能拡張 -Rounded Rectangle Radius Resizer
Photoshopで角丸矩形を作成する時、シェイプツールをよく使用すると思いますが、その角丸の矩形の四つの角丸を個別に数値で編集することができる機能拡張（スクリプト）を紹介します。 対応は、CS5, 6みたいです。CS6のWin, Macの日本語環境で動作しました。 Rounded Rectangle Radius Resizer Rounded Rectangle Radius Resizerのインストール Rounded Rectangle Radius Resizerの使い方 Rounded Rectangle Radius Resizerのインストール インストールは簡単です。 ダウンロードして解凍した「Rounded_Rectangle_Radius_Resizer.jsx」を、Photoshopフォルダ内の「/Presets/Scripts/」内に移動します。 Photosho
[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ
一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ボックスシャドウ -box-shadow 角丸 -border-radius 対応ブラウザ ボックスシャドウ -box-shadow HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
