60 Web Design Galleries for Design Inspiration « AcrisDesign – Web Design Resources and InspirationCloud-hosted WordPress tool, with an inbuilt SEO suite and content generation assistant, for top-notch website optimization.
5分でわかるCSSグラフィック
知って得する、Webブラウザ上で利用できるグラフィック関連技術。アニメーションや3Dが表現できる「CSS3」をハックしよう CSSで多彩な表現が可能に 本連載では、Webブラウザ上で利用できるグラフィック関連技術を、読み切りの形で、なるべく分かりやすく紹介していきます。第1回である今回はWebの基本技術の1つであるCSSで実現するグラフィック表現を取り上げます。 従来のCSSはWebページのフォントやレイアウトを整える機能がほとんどで、「グラフィック技術」というには物足りないものでした。しかし、CSS3と呼ばれる近年の拡張によって、アニメーションや3D表現を含む多彩な画面効果が実現できるものに進化しています。 この記事は、そうしたCSS3のグラフィック関連機能の基本的な使用方法をまとめて学習することを目的としています。 ベンダプレフィクスについて CSS3の多くの機能はまだ規格策定段階のも
画像を一切使わずに、CSS3だけでスタイリッシュな吹き出しをつくろう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、はやちです。 今回はcss3を使って簡単に作れる吹き出しを紹介したいと思います。 HTML 土台はこんな感じ <div id="textarea"> <div class="textinner"> <p>css3</p> </div> <!--/textinner--> <div class="triangle"></div> </div> <!--/textarea--> textinnerがボックス部分でtriangleが矢印部分になります。 ボックスを作る グラデーションの調整をcss上でやるのは面倒なので、ジェネレーターでちょちょいっとつくっちゃいます。 今回使用したジェネレーターはこちら □Grad3 http://grad3.ecoloniq.jp/ ブラウザ上でグラデーションとシャドーを細かく指定できるのですごく便利です＾＾ 自動生成されたソースをはっつけます。
borderに画像を使用したcss3プロパティをサクッと生成するジェネレーター・border-image-generator - かちびと.net
今まで知らなかったんですが、 css3ってborderに画像を使える んですね・・・勉強不足でした。 border-image-generatorはその css3による画像borderをサクッと 作ってくれるWebジェネレーター です。勉強がてら触ってみるのも いいかも。 css3便利ですねぇ・・もちろんIEでは使用できません。webkit系(safariとかChrome)とmoz系(Firefoxとか)に対応しています。 直感で使えるので使い方は割愛します。使用したい画像のアップロードも出来るのでいろいろテストできそうです。 以下のようなプロパティでborderに画像を指定するんですね。 .border-images{ border-width: 28px 27px; -moz-border-image: url(abc.png) 28 27 repeat; -webkit-border
[CSS]ハッシュリンク先がどのエリアなのかを分かりやすくするスタイルシート
ハッシュリンク（#hoge）をクリックすると、その先頭はページ上部に表示されるので分かりますが、どこまでがそのエリアなのか分かりやすくするスタイルシートのテクニックを紹介します。 デモページ: 1に移動 [ad#ad-2] 実装 HTML HTMLはシンプルで、ナビゲーションをnav要素、コンテンツをsection要素、各ハッシュリンク先はdiv要素で実装します。 <nav> <a href="#one">1</a> <a href="#two">2</a> <a href="#three">3</a> </nav> <section> <div id="one"><h2>One</h2>Pellentesque habitant morbi ...</div> <div id="two"><h2>Two</h2>Pellentesque habitant morbi ...</div>
IEでもそこそこできる！CSSで作る画像のようなボタン
#button { width:320px; color:#e4eef8; background:#337fcc; font-size:28px; font-weight:bold; text-shadow:0 -1px 1px #143352; text-align:center; display:block; text-decoration:none; border:1px solid #225588; padding:12px 0 8px 0; border-radius:12px; background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1)); background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5
[CSS]スマートフォンで表示した際、サイドバーの広告を効果的な配置にするテクニック
当サイトのようにサイドバーに広告を掲載している人には朗報のテクニックを紹介します。 下記のようなサイドバーをもったレイアウトをスマートフォンなどの小さいサイズで表示する際、サイドバーのレイアウトをどのようにしますか？ 通常（デスクトップ）時のレイアウト サイドバーを全部、下に移動しますか？ [ad#ad-2] サイドバーを全部下にしてしまうと残念な感じになるので、サイドバーの各広告をコンテンツの間に配置するテクニックを紹介します。 Content Folding スマートフォンなどのレイアウト [ad#ad-2] デモ 実装 デモ このCSSのテクニックはCSS3 Regionsを使用しているため、Chrome16+, Safari5.2でご覧ください。 IE10もおそらく対応しています。 デモページ：幅800pxで表示 実装 HTML HTML5を使っての実装です。 ポイントとなるのは、
スマートフォン向けサイトのラジオボタンを良さ気な感じに。
昨年後半辺りから、iPhoneやAndroidなどのスマートフォン案件を実際にやる機会が増えて、今年はもっともっと増えるんだろうなぁと思う今日この頃。 なので今回は、スマートフォン向けサイトのフォームを作成する時に使うかも知れないラジオボタンにフォーカスした記事なんぞを。 ラジオボタンといえば、よく見かけるのは性別の選択とかでしょうか。 何にせよ、下記のような感じです。 ラジオボタン1 ラジオボタン2 んで、これをiPhoneとかで見ると、何の変哲もない普通のラジオボタンですが、iPhoneってラベル部分をタップしても選択できなかったりして使い勝手が悪いと思ったりしませんか？ ボクが持ってる、iPod Touch では反応してくれなかったです。 そこで、ラジオボタンをもっと良さ気なボタンっぽくしてみたら良いんじゃないかと思ったのでやってみました。 サンプルはiPhoneかwebkit系ブラ
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
#page
Bourbon - A Lightweight Sass Tool Set
CSS3で影をつける際に役立つ、ドロップシャドウバリエーションいろいろ