タグ

CSS3に関するKimuraのブックマーク (8)

  • [CSS]水平に配置したセクションを分けるスタイルのさまざまな素敵なテクニック

    1ページに複数のセクションを水平に配置した際に、それらの区切りとなるさまざまなスタイルを紹介します。 縦長の1ページで構成されたプロモーションサイトやポートフォリオなどで見かけるものだけでなく、こんなこともできるのかとアイデアが素晴らしいものもたくさん! デモページ 各デモと共にそのスタイルを紹介します。 まずはHTMLから。基となるのは、2パターンです。 1つ目は、section要素にclassをつけるだけ。 <section class="ss-style-hogehoge"> コンテンツ </section> 2つ目は、svg要素を使用します。 <section> コンテンツ </section> <svg id="hoge"> SVGの中身 </svg> sctionだけの場合はclass、svgを使用するものはidになっています。 以下、各デモとそのスタイルです。 HTML/C

    Kimura
    Kimura 2013/10/07
    水平配置の各セクションのボーダー表現いろいろ。CSSだけでここまで出来ちゃうんだ。。。でも難しくてソース丸写ししか出来ない気がする。
  • CSSだけで簡単に吹き出しを作成する方法4つ!

    こんにちは、橋です。 今日はCSSだけでお手軽に吹き出しを作る方法をご紹介したいと思います。 今回ご紹介するサンプルは4つ 一般的な三角の吹き出し 一般的な三角の吹き出し(ボーダー付き) ぽわわーんとした吹き出し 丸い(曲線の)吹き出し 4つのサンプルの実行結果は、ここで確認できます。 IE9以上とIE以外のブラウザであればちゃんと表示されるかと思います。 IE8以下はborder-radiusが使用出来ないため、サンプル3とサンプル4がちゃんと表示されません。 それでは1つ1つ見て行きましょう。 1.一般的な三角の吹き出し まずはソースから。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapp

    CSSだけで簡単に吹き出しを作成する方法4つ!
    Kimura
    Kimura 2013/03/11
    これ使えそう!いや、マンガは書かないけど。
  • msto.jp - it転職 リソースおよび情報

    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.

    Kimura
    Kimura 2013/01/04
    displayの値に-webkit-boxを指定すると、親要素のサイズに合わせて段組されちゃう。マジか。CSS3の機能だけで?できちゃうの?
  • CSS で作るスマートフォン向け片手操作メニュー

    ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UICSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UICSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox

    CSS で作るスマートフォン向け片手操作メニュー
    Kimura
    Kimura 2012/03/07
    うぉぉっ、すごいなCSS3って。それよりなによりこういうUIをul, li で作れるんじゃないかって思いつくのがすごいけど。
  • つなビィのブログページをスマフォ対応にしてみた、ちょっとだけ技術的なまとめ。 | トリアエズぶろぐ

    一定期間更新がないため広告を表示しています

    つなビィのブログページをスマフォ対応にしてみた、ちょっとだけ技術的なまとめ。 | トリアエズぶろぐ
    Kimura
    Kimura 2011/07/22
    jQueryMobileなしで、CSS3を駆使して作るスマフォサイト。CSS3って、難しそうと思っていたけど、やってみれば何とかなりそうな気がしてきた。
  • Red Team Design

    About our web design school Our Web Design School was created in 2015 to help people learn new professions and companies find competent specialists. The school program is aimed at studying modern web design technologies.

    Kimura
    Kimura 2011/07/06
    jQuery+CSS3で、エラーメッセージなどが上からスルっと降りてくる。
  • [CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例

    CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。

    Kimura
    Kimura 2011/01/29
    CSS3からはスタイルシートの適用に条件をつけることが出来るのか。。。
  • CSS3 buttons by Chad Mazzola

    This is a collection of CSS3 buttons that use the simplest possible markup. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers falling back to a less-styled button. These buttons are now implemented using Sass, with help from Bourbon. The generated CSS for all the buttons is also available. Classic buttons This is the original set of buttons, showing a vari

    Kimura
    Kimura 2010/09/30
    CSS3でこんなボタンができちゃうのか。。。でもIE8だと角丸とか影はダメですね。Firefoxはおけ。
  • 1