Webデザイン最新トレンド ~イマドキUIのつくりかた
第10回 CSS3で自由なボーダーデザインを実現する
神は細部に宿る
「おっ」
近代建築の三大巨匠の一人である
Webデザインにおいても,
人がやっていないようなところに手が施されたデザインは,
たとえば,
テクスチャや配色にセンスを感じるデザインですよね。
記事を読んでみると,
これは,
CSS3なら簡単に実現できる
今回は,
この線は,
CSSソース
border: 1px solid #666;
-webkit-border-image: url(../img/bdr.png) 15 / 15px repeat;
-moz-border-image: url(../img/bdr.png) 15 / 15px repeat;
-o-border-image: url(../img/bdr.png) 15 / 15px repeat;
border-image: url(../img/bdr.png) 15 / 15px repeat;
注意点は2つ。
1つ目は,
2点目は,
- Firefox 3.
6以上 - Google Chrome 5以上
- Safari 5以上
- Opera 10.
6以上
そのため,
CSS3 Generatorで発想を試してみよう
CSS3では,
もちろん,
- モニターサイズによるwidth
- 一般的なファーストビューのheight
- CSSによるブラウザごとの表示の差異
- プロパティの対応状況
また,
しかし,
今回解説したサンプルファイルがダウンロードできます。
バックナンバー
Webデザイン最新トレンド ~イマドキUIのつくりかた
関連記事
- 2022年3月第2週号 1位は,中国語と英語でのアプリUIの違いの考察,気になるネタは,LAN用メッセンジャー「IP Messenger」に初の商用版Pro
- 2021年12月第4週号 1位は,UIデザインにおける6つの段階とその内容,気になるネタは,ドコモ,キャリアメールの持ち運びサービスを12月16日に開始 月額330円
- 2021年10月第3週号 1位は,プロトタイプによってユーザーエクスペリエンスを最適化するヒント,気になるネタは,情報共有ツール「notion」日本語対応 日本ユーザー急増で
- 2021年8月第3週号 1位は,モバイルファーストとデスクトップファーストの現状,気になるネタは,Zoom,生徒は先生の顔しか見えなくなるバーチャル授業向け機能を追加
- 2021年6月第4週号 1位は,CSSでの縦横比の設定方法,気になるネタは,Spotifyがライブオーディオアプリ「Greenroom」を提供開始,Clubhouseのライバル誕生