タグ

css3に関するmellow_punchのブックマーク (13)

  • IEでもCSS3ドロップシャドウのアップデート

    こんばんは、martinです。以前、IEでもCSS3のドロップシャドウ(text-shadowやbox-shadow)を使いたいということで、それを可能にするスクリプトを書きました 。 で、コメント で、IE7以下では、text-align:centerを指定すると影がすごくズレるというご指摘をいただきました(IE8では問題ない)。調べてみると、どうも「text-align:centerの指定が内包されるボックス要素にも適用されてしまう」という、懐かしいIEのバグが原因のようなので、それを修正しました。ついでに、画面のリサイズ(window.onresize)にも対応させました。以下のスクリーンショットのように、Firefox3.6など今時のブラウザに引けを取らない感じで、ボックスシャドウやテキストシャドウが可能になります。

  • pk10计划人工在线计划-快3网投平台

    地址:浙江嘉兴嘉善县卫巷008号 电话:072-55269409 传真:072-55269409 邮箱:308676405@008.com pk10计划人工在线计划作为2017年3月29日三星发布的旗舰手机���,把过已经过去了快三年时间�� ��。 27����、年年仁济南院开诊时间� �:周一至周六全天停诊时间���:周日部分诊疗项目暂停服务情况���:口腔科实行全预约����,暂取消拔牙���、补牙����、洗牙业务���。pk10计划人工在线计划10�����、案件第六人民医院医院自2月3日起开诊�����。 2���、呈高预约就诊����:所有门诊(包括普通门诊)均推行实名制预约���。把过(五)其他��� :门诊入职体检暂停��� �。年年1)网站预约���:①上海医联预约平台https�����:pk10计划人工在线计划//yuyue.shdc.org.cn/� ���。 详

  • CSS - 立体的なボタン(CSS3)|及川WEB室

    画像を使わずに、CSSで立体的なボタンが作れます。 そのCSSCSS3)をご紹介。 ※IE6,IE7,IE8 向け改良版も追記しました(2012/05/29)。 表示例 及川治建築設計室 Internet Explorer ではIE9しかきちんと見れていない。 IE6,IE7,IE8 ではグラデーションと影は見えていない。 (IE8 以下の対応については「IE6,IE7,IE8 向け改良版」参照。) HTMLのソースコードとCSS サンプル 及川治建築設計室 a.btn { /* 文字色、ボタンの横幅など */ color:#5F2500;padding:5px 0;display:block;width:200px;text-align:center; /* 背景のグラデーション */ background: linear-gradient(to bottom, #FFF, #CCC)

    mellow_punch
    mellow_punch 2012/07/27
    IE対応
  • Untitled Document

    Demo CSS3 Image Styles Tutorial by Web Designer Wall. Normal Image (without jQuery background image wrap) Basic Circle Card Style Embossed Style Soft Embossed Style Cutout Style Morphing + Glowing (mouse over images here) Glossy Overlay Reflection (mouse over images here) Tape Style Glossy + Reflection Morphing + Tinting (mouse over images here) Feather Circle

    mellow_punch
    mellow_punch 2012/06/12
    円や角丸形状でのクリッピングとアニメーション
  • Border-width animation fun - December 1st, 2011 | HTML5 and CSS3 Advent 2011

    Of course you know about the css3 transition property. But did you know it works on borders too? These are some fancy effects you can create by transitioning the borders. Examples See more dusty old cars The border effect in it's simplest form (try hovering it) Go to our super car selection Round looks much better, also we leave a 2px border after the transition Check out this orange monster It wo

    mellow_punch
    mellow_punch 2012/06/12
    border-width、border-radiusを使って円形に切り抜き&トランジションも
  • IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット|Web Design KOJIKA17

    IEでCSS3の効果を出せる。 クロスブラウザ対応 CSSスニペット 2011-02-01 影をつけたり、角丸にしたり、便利なCSS3。モダンブラウザは続々と実装されています。 しかし依然としてIEのシェア率が多い現在では、「CSS3を使うのは、ちょっと・・・」と思っている方も多いと思います。 そこでIEのfilterを利用し、JavaScriptや画像を使わずに、CSS3に近い効果を表現できる、 実用的なCSSのスニペットを紹介致します。 Opacity 指定したボックス自体の不透明度を変えることができます。 また指定した要素の下位の要素に対しても、効果が継承されます。 imgのロールオーバーなどの使い道があります。 Opacity Sample .opacity { opacity: .5; /* FireFox, Webkit, Opera */ -ms-filter: "progi

    IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット|Web Design KOJIKA17
  • [CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック

    CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 How to create slick effects with CSS3 box-shadow デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたようなエフェクト 対応ブラウザ box-shadowプロパティとは 「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることができるプロパティです。フォーマットは下記のようにオフセット、サイズ、ブラー、カラーの値を指定します。 <shadow> = inset? && [ <length>{2,4} && <color>? ] 簡単な例をみてみましょう。 box-shadow: 3px 3px

  • [CSS]画像に美しい角丸とボックスシャドウを適用する方法

    img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ(Safari)のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左:角丸と外側にシャドウ、右:角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。

  • CSS Box Shadow | CSS-Tricks

    Used in casting shadows off block-level elements (like divs). .shadow { box-shadow: 3px 3px 5px 6px #ccc; } The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be b

    CSS Box Shadow | CSS-Tricks
  • スマートフォン向けサイトの作り方 | ユージック

    スマートフォン向けサイトの作り方 2011年1月22日 iPhoneAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px~640px、横向きで480px~960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px(縦)を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px(横)で作成すれば問題ないといえますが、iPhone4、4SやAn

    スマートフォン向けサイトの作り方 | ユージック
  • 手軽にボタンを作れるCSSフレームワーク10選 | Web活メモ帳

    CSSで手軽にボタンを作る方法を探している。 そんな方におすすめなのが、「CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need)」。 ボタンを作るCSSフレームワークが10点紹介されています。 エントリーの中から気になったのを、いくつかご紹介。 CSS3 Buttons With Simple Markup 非常にシンプルなボタン。18種類あり。 GitHub-Style CSS3 Buttons 以前に紹介しましたが、Github風のボタンを作れるCSSフレームワーク。 四角、角丸、アイコン付きでボタンが作れるようになります。 Zardi Zardiを使うと、角が少しだけ丸い物と、もっと丸いボタンから形を選ぶ事ができます。 わずか4kbで作られているようですね。 BonBon

    手軽にボタンを作れるCSSフレームワーク10選 | Web活メモ帳
  • Blogger

    Google のウェブログ公開ツールを使って、テキスト、写真、動画を共有できます。

  • css-eblog.com - このウェブサイトは販売用です! - css eblog リソースおよび情報

    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.

  • 1