画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！ 今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
WEB色見本 原色大辞典 - HTMLカラーコード
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた : akiyan.com
リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた 2007-10-01 別に2カラム原理主義者というわけではないのですが、カラム変更オプションが無くなったのでついカッとなって書いてみました。 目次 適用前、適用後 適用前 適用後 解説 Firefox向けで、ユーザースタイルシートの適用は「Stylish」拡張をインストールすると便利です。 2カラムにするだけではなく、個人的にほとんど使わない機能へのナビゲーションまで削除しちゃってるので、ちょっと注意が必要です。リニューアル後のmixiのHTMLはid名とclass名が変態的なまでにきっちり設定されているのでCSSがわかる方はソース眺めつつ調整してください。ユーザースタイルシートの内容は以下の通り 調整 全体の横幅 750px化 全体を中央揃え フッターリンク左右の余白調整 非表示 右カラム全部 ロゴ
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
Webデザイナー/開発者が覚えておくとよい２５のテクニック:phpspot開発日誌
25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい２５のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー
100％、CSSのみで構成されるメニューの作り方 - GIGAZINE
JavaScriptがオフになっているブラウザでも問題なく利用できるメニューです。なおかつ操作性は損なわれていません。ほとんどのDHTMLをサポートしているブラウザで動作してくれます。 作り方や実例は以下から。 Pure CSS menus http://www.howtocreate.co.uk/tutorials/testMenu.html 以下も同じ種類のメニューです。 Pure CSS Menus http://meyerweb.com/eric/css/edge/menus/demo.html CSS / DHTML Hybrid Navigation Bar http://www.brothercake.com/scripts/navmeister/page.php CSSだけでもけっこうなんとかなるものですね、めもめも。
CSS Cheat Sheet (V2) - Cheat Sheets - Added Bytes
Overview The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for. This is the second version of the CSS cheat sheet. The previous version can be found at http://www.addedbytes.com/cheat-sheets/css-cheat-sheet-version-1/.
Web Color 以外の色 - 色名指定が可能な色の見本
この一覧について 色名での指定ができる色の一覧です。 この一覧の色はモニタ設定が24bit以上でないと正しい色が表示しません。 モニタ色数の設定が256色の場合の表示色を表記しましたので参考にして下さい。 但し、環境によって必ずしもこの色になるとは限りませんので、目安としてお考え下さい。 HTMLで色指定する際は、[16進数]もしくは[色名]で色を指定します。[10進数]は使用しませんが、他の用途で使用する場合があるので、表記しておきました。（左からR,G,B） [色見本]部分は、[BGCOLOR]に16進数で指定した上に更に文字も色指定しています。文字部分は、左半分(■名■)を[色名]で、右半分(■16■)を[16進数]で色指定しています。（どれで指定しても同じ色に見えるかどうかの確認のため） (*)マークの[aliceblue]を使用する際は、ブラウザによっては全く別の色(#A0CE0
CSS Tips for はてなダイアリー：構造詳細
ここでは、はてなダイアリーの構造を少し詳細に解説しています。 そもそもCSSって何？ と云う方がいきなり見てもチンプンカンプンかもしれません。HTMLおよびCSSについては、以下のリソースが参考になります。 仕様書 CSS1の仕様書の原文(英語) CSS2の仕様書の原文(英語) CSS2の仕様書の翻訳(日本語) Ａ CSS2の仕様書の翻訳(日本語) Ｂ W3Cの仕様書等の文書の日本語訳集 リファレンス、バグ ごく簡単なHTMLの説明 スタイルシート1 - スタイル設定の方法 ばけらの CSS リファレンス CSSバグリスト＠CSSバグ辞典スレッド また、記述されたCSSが仕様に適合しているかどうか検証してくれるサービスがあります。 W3C CSS 検証サービス なにぶんミスの多い人間なので、誤字・脱字・不適切なマークアップ或いは完全な間違いなどの不備がありましたら、はてなの日記（Run,
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
はてなダイアリーガイド「ヘッダやフッタに何かを入れる」とは コミュニティの人気・最新記事を集めました - はてな
（ヘッダとフッタ自体の説明は活用編「ヘッダとフッタ」からご覧ください。） 『管理ツール > デザイン > 詳細デザイン設定』のヘッダ欄やフッタ欄を見ると、なにやら<divナントカとかいう文字列が書いてあります。それの意味については飛ばしますが、それを消すと日記の表示が崩れちゃうのでご注意ください。ヘッダやフッタをいじるときは、前の状態をどこかにコピーして保存しておきましょう。 さて、文章やモジュールのタグをヘッダ・フッタ欄に書きたいとき、まずこの欄のどこに書けばいいのでしょうか。一般的なテーマで、“かんたんデザイン設定でサイドバーを表示した状態”で、ヘッダ欄とフッタ欄は下のようになります。（サイドバーがない状態の初期設定では、ヘッダに<div class="main">、フッタに</div>があるだけですが、（1）〜（4）の表示位置の説明はだいたい同じです。） ページのヘッダ(HTMLタグ
とほほのスタイルシート入門
CSSリファレンス トップ > CSSリファレンス [ABC順] 概要 CSS入門 リンク サンプル 表記について CSS3関連規約 セレクタ * { ... } E { ... } ns|E { ... } E, F { ... } E.class E#id E F { ... } E > F { ... } E + F { ... } E ~ F { ... } E || F { ... } [attr] [ns|attr] [attr="val"] [attr~="val"] [attr|="val"] [attr^="val"] [attr$="val"] [attr*="val"] :any-link :link :visited :local-link :target :target-within :scope :hover :active :focus :focus-visi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sidebarとは はてなの人気・最新記事を集めました - はてな
Web Color 216 色データ
http://msugai.fc2web.com/web/tips/CSS-border.html
はてな[日記タイトルを画像にする・日記タイトルに背景画像を入れる2]