[CSS]画像にも負けないクオリティのボタンを実装するスタイルシート | コリス
CSS3を使用して、ディテールにこだわったボタンを実装するスタイルシートのチュートリアルをInferenceから紹介します。 Creating a Realistic Looking Button with CSS3 実装されたデモは、元記事の下「Show and Tell」で確認できます。 対応ブラウザはFx3.6, Safari4, Chromeで、IE8では角丸とアクティブ時のスタイルが欠けます。 実装：HTML ディテールにこだわっているため、HTMLは煩雑なものになっています。これらはCSSの指定に意味をなします。 <textarea name="code" class="html" cols="60" rows="5"> <a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a> </textarea>
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
RedLine Magazine : DW用 CSS3対応セレクタコードヒント
DW用 CSS3対応セレクタコードヒント 2010.04.04追記 このエントリ書いて寝て起きたら修正版が出てた！仕事速い！このエントリの下の方で属性セレクタがなんたらかんたら…と書いてる部分に対して、修正してくださってます。 CSSセレクターコードヒント修正 - dwlog.net （「 [ 」 を入れたら属性セレクタが出てくるようになったバージョン） が、しかし、今度は「：」を押しても反応がなくなったので作者さんのブログにコメント送ってみたところなう。(2010.04.04 10:58) 2010.04.04 12:19 さらに追記 自己解決 上に書いた「：」を入れても反応しないの件、Configuration/CodeHints/css_selector.xmlの50行目辺りに<menu pattern=":" DOCTYPES="CSS">に対する閉じタグ</menu>を追加したら
[JS]マウスホバーでボックスの真ん中にリンクを表示するスクリプト -Middle Box Links
デモページ 四つのコンテンツボックスは高さが異なりますが、リンク箇所はそれぞれの真ん中に配置されています。 HTMLはシンプルでdiv要素のコンテンツボックスにp要素でテキストを配置しているだけです。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div class="widget widget-one rounded"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
CSS3で作るナビゲーションメニュー集「15 CSS3 Navigation and Menu Tutorials and Techniques」
TOP > WebDesign > CSS3で作るナビゲーションメニュー集「15 CSS3 Navigation and Menu Tutorials and Techniques」 次世代のコードとして、すでに利用している所も徐々に増えてきたCSS3。従来のCSSと比べて格段に表現できる幅が広がっており、今までどうしても画像を利用したり、FLASHで表現していた部分がCSSのみで実現できるようになっています。今日紹介するのはそんなCSS3を使ったナビゲーション集「15 CSS3 Navigation and Menu Tutorials and Techniques」を紹介したいと思います。 jQuery Style Vertical Menu with CSS3 – No Javascript 様々な表現のCSS3ナビゲーションがまとめられています。今日はその中からいくつか気に
CSS3で作るドロップダウンメニュー「CSS3 Dropdown Menu」
通常アールの効いたデザインでドロップダウンメニューを制作するときはFlashだったりjavascriptだったり何らかなスクリプトと画像を使って、組み上げるというのが現状では主流だと思いますが、今日紹介するのはCSS3で実現するドロップダウンメニュー「CSS3 Dropdown Menu」です。 CSS3 Dropdown Menu DEMO ドロップシャドウなど細かなデザイン処理はCSS3で制御されていますので、デザイン部分もCSS側で細かく調整できます。 詳しくは以下 また上記のように少し形態は変わりますが、CSS3に非対応のブラウザでも一応動作するようになっていますので、互換性が気になるという方も安心して利用していただくことが可能です。 ソースファイルはダウンロードできませんが詳しいく解説されており、またデモページもそのままコピーしてつかえるようにシンプルな作りになっていますので、参
[CSS]CSS3グラデーションの表示サンプルと指定方法のまとめ
現在、Firefox, Safari, Chromeで利用できるCSS3グラデーションの表示サンプルと指定方法のまとめをDynamic Driveから紹介します。 CSS Library:CSS3 Linear Gradients 下記は各ポイントをピックアップしたものです。 CSS3グラデーションの基礎知識 CSS3グラデーションをサポートしているブラウザは現在のところ、下記の三つです。 Firefox 3.6+ Safari 2+ Chrome CSS3グラデーションの対応エレメントは、下記の二つです。 background background-image CSS3グラデーションの指定方法はmoz系（Firefox）とwebkit系（Safari, Chrome）で異なり、下記のようになります。 moz系
CSS3のコード生成と対応ブラウザが分かるジェネレーター -CSS3 Generator
Border Radiusの各ブラウザの対応状況 Firefoxの対応バージョンは3.0+ CSS3 Generatorは現在、下記のコードを生成・確認することができます。
ベーシックなCSS3を取り入れてみよう！ | Nutspress
CSS3の基本中の基本、RGBA による色と透過率の指定、Text Shadow による文字の影、Border Radius による角丸、Box Shadow によるボックスプロパティに対する影、以上の4点を Web Designer Wall で詳しく説明してくれています。CSS3を取り入れることで、画像を使わずにデザイン的要素を取り入れることが可能となります。 ただし、IEは対応していないので、IEに対しても同じ見せ方をする場合、画像やJavascriptを使ったハックが必要となります。 RGBA background: rgba(255, 255, 255, 0.2); 始めの3桁の数字が色を表します。左からR：赤、G：緑、B：青、A：透過率となります。0が透明、1=100%透過なしとして透過の割合を設定していきます。使える要素はフォントカラー、背景色、ボーダー色、シャドウなどなど
25 Useful CSS3 Techniques and Tutorials - DzineBlog.com
Css3 have a capacity to revolutionize the way we design/develop website. css3 is intoducing loads of new and exciting features. Most of the browsers such as Firefox, Safari already support some of the CSS3 properties It is essential today for a web designer to know about CSS3 and there are many tutorials and resources for the CSS3. Below i’ve listed 25 Useful CSS3 Techniques and Tutorials to get y
【レビュー】HTML5やCSS3もサポート -「XHTML/HTML+CSSスーパーレシピブック」活用法 | クリエイティブ | マイコミジャーナル
「XHTML/HTML+CSSスーパーレシピブック」を読む 書籍「HTML/HTML+CSSスーパーレシピブック」 エ・ビスコム・テック・ラボ著 2,940円 エ・ビスコム・テック・ラボの新作「XHTML/HTML+CSSスーパーレシピブック」は、イマドキのWebデザイナーは避けて通れないXHTMLとCSSによるWebページのコーディングについて300ページに渡ってじっくりと解説された技術書だ。Webページは、様々なブラウザから閲覧される。ちゃんとコーディングしたつもりが、他のブラウザで見たら崩れていたという経験はWebデザイナーなら、一度や二度ではないはずだ。これら様々なブラウザの特性を経験的に知っているベテランのWebデザイナーならともかく、全てを把握するのは困難だし、それぞれのブラウザで検証を行なっていくのは少々しんどい。この書籍に書かれているような、先人の知恵を使うほうが効率的とい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]CSS3グラデーションを美しく効果的に使用したチュートリアル
[CSS]画像を使用しないでもCSS3ならここまでできる実用的な実装サンプル
http://shoonm.com/2010/03/html5css3.html
dwlog.net
CSS3を使用した美しいフォームが簡単に作成できる -FAARY
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
IDEA * IDEA
http://www.css-lecture.com/log/css3/css3-gradient.html
css-lecture.com