[B! CSS] kambaraのブックマーク

kambara id:kambara

CSSに関するkambaraのブックマーク (7)

Components · Twitter Bootstrap
Sleek, intuitive, and powerful front-end framework for faster and easier web development. Download Bootstrap GitHub project Examples Extend Version 2.3.2
kambara 2011/08/22
CSS

Design
リンク
IDEA * IDEA
ドットインストール代表のライフハックブログ
kambara 2011/08/20
CSS
リンク
WEB色見本原色大辞典 - HTMLカラーコード
原色大辞典とは原色大辞典は1997年にオープンしたネットの色見本サイトです。9種類の色見本と色に関する各種サービスから構成されています。色見本コンテンツはブラウザで定義されているHTMLカラーネーム、日本の伝統色、世界の伝統色、 Webセーフカラー、パステルカラー、ビビッドカラー、モノトーン、地下鉄のシンボルカラー、国鉄制定の塗装色の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。文字列と背景色の組み合わせを試せる配色大辞典、規則性のある組み合わせから色を選べる配色パターン。色見本の他にも、今日のラッキーカラー、コトバから色を解析して調合する成分解析、ストライプを生成するストライプメーカー、グラデーションを生成するグラデーションメーカー、あなたの好きな色と色を調合する色調合、サ
kambara 2011/07/01
配色

CSS
リンク
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
kambara 2011/03/03
CSS
リンク
CSSだけを使って三角形を作る
最初﹁CSS triangles﹂を見たとき、ええ？本当？？って思ったんですけど、どうやらCSSだけで三角形が作れるようです。CSS3とか必要ありません。右に表示している三角形は、全てCSSのみで描かれています。画像ではありません。 CSSソース上矢印のCSSです。 div.arrow_up { width:0px; height:0px; margin:0 auto; border-left:35px solid transparent; border-right:35px solid transparent; border-bottom:35px solid #2f2f2f; } CSSで三角形を作るポイントとしては、 width, height, marginは、他のどの矢印の場合も同じ。矢印の方向のborderは、CSSを書かない。︵この例だとtop︶矢印の方向の逆の部分で
kambara 2011/02/24
CSS
リンク
枠線付きの吹き出し
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！　みよう！　みよう！Demo: Bordered Speech Bubble枠線は単なるsolidなborderで少し角を丸めただけ。尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;
kambara 2011/02/24
CSS
リンク
Lucky bag: : blog: CSS デザインギャラリー
世の中には (X)HTML + CSS の素ん晴らしいデザインでレイアウトされている方なんつうのはそりゃ沢山いるわけで、そんなサイトを集めたデザインギャラリー（ショーケース）サイトってのを見ていると、おいおいフォトショップ腕自慢かよって感もあるけど、結構インスパイアされたりされなかったり。そんな CSS デザインギャラリーサイトで自分が知っているものをちょっとまとめてみた。（ちなみに順不同） CSS Vault » The Web's CSS Site CSS Beauty | CSS Design Showcase Unmatched Style | CSS Design Gallery and Design Inspiration. CSS Drive css thesis: sites, that's all. » screenspire.com | the leading full
kambara 2010/11/18
CSS
リンク
1