[B! design][CSS] kulamochiのブックマーク

CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集 - かちびと.net

cssとHTMLタグのマークアップのみで実装出来るテクニック集です。クロスブラウザ対応のみをcss-playから探したので、ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。シンプルなドロップダウンメニューシンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション webkit系でもmozでもIEでもcssのみでグラデーションを実装。 Cross-Browser CSS Gradient ハック、テーブルも使用しないドロップダウンメニューシンプルなドロップダウンメ

kulamochi 2011/02/28

リンク

【レポート】HTML5の機能を知るための15のデモンストレーション | エンタープライズ | マイコミジャーナル

Tech Drive-in - Techno logy, Linux, Ubuntu FTW 主要ブラウザの対応が進んでいることもあり、HTML5の技術を活用したデモンストレーションサイトが増えている。現在主流の技術と互換性が高いことから、すでにHTML5を採用すべきという意見もある。ブラウザの更新頻度は早まる傾向にあり、HTML5/CSS3の対応は日進月歩で進んでいくことになるとみられる。 HTML5やCSS3のデモンストレーションサイトやテクニック紹介ブログはこれまで何度も取り上げてきた。15 HTML5 Demos Showcasing Prowess of HTML5 Over Adobe Flash - Tech Drive-inにおいて、HTML5デモンストレーションサイトがまとめられており参考になる。中にはこれまでマイコミジャーナルで取り上げたサイトも含められている。紹介されて

kulamochi 2010/08/24

リンク

23 jQuery FadeIn and FadeOut Effects Plugins

There are lots of people who really like to play with jQuery. But the number of persons is not small who want to stay away from coding. They like to use jQuery code just using a plugin. And jQuery plugins make their lives easier. Moreover, sometimes it is easy to customize without having programming knowledge. Now come to the point about the main aim of my today’s post, here I gathered 23 really u

kulamochi 2010/06/24

リンク

CSS3 Dropdown Menu - Web Designer Wall

While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow wi

kulamochi 2010/06/22

リンク

Demo: Pure CSS3 Gradient Dropdown Menu (No Image Used)

CSS3 Dropdown Menu by Web Designer Wall

kulamochi 2010/06/22

CSS
design

リンク

CSS3 「gradient」と「@font-face」

CSS3 「gradient」と「ウェブフォント（@font-face）」このページは背景画像を一切使用していません。背景のストライプ模様はCSS3のbackground-image:gradient、フォントはCSS3の@font-faceでサーバー上に置いたフォントを読み込んで表示しています。これによって、閲覧者のパソコンにインストールされていないフォントも表示する事が出来ます。また、画像文字ではないのでコピーする事も可能。 SEOの一環としても有効です。 2010年1月現在、InternetExplorerとOperaではまだgradientに対応していない為、これらのブラウザでは背景は単色になります。フォントファイルはうっかり領収書５部ダメにできる筆圧を誇るふいさんの作った「まきばフォント」をお借りしています。フォントの為のスタイル指定 @font-face { font

kulamochi 2010/06/17

CSS
design

リンク

東京分室 - Webサイト制作株式会社カナリヤグラフィックス

◆(X)HTML+CSSによるWeb標準に準拠したセマンティックなサイト制作、Webデザインをご提案します。published on August 09, 2009 - 06:57 PM 美しいコーディングと確かなデザインでWebサイトを構築します。カナリヤグラフィックスはWebサイト制作のプロとして、コーディングが正しくアクセシブルなのはあたりまえ、だから美しくユーザビリティ・ファインダビリティに優れたコーディングを。デザインが美しいのはあたりまえ、だから高いクオリティと信頼感のある確かなデザインを。そう考え制作業務を行っています。» 制作ポリシー東京分室を作った理由このサイトは、Web制作会社カナリヤグラフィックスのサテライトサイトです。日頃お世話になっている方々、今後おつきあいしていただくクライアントや代理店の方々に、カナリヤグラフィックスがWeb制作に対して何をどう考え作業し

kulamochi 2010/06/16

リンク

TRANS [hatena] - 印刷用CSSをまとめてみた。

以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度