タグ

css3とcssに関するgeektsqのブックマーク (8)

  • HTML5+CSS3 入門

    Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ AppleHTML 5 に賭けているのか: ウェブの歴史 [Page 2] よ

    HTML5+CSS3 入門
  • CSS3だけでつくるWebボタン!押さずにはいられないボタン簡単3ステップ

    インターンシップにきています。 こんにちわ。(・`д・ノ)ノ 面白法人カヤックでインターンシップ中のどうもぽんたです。 先週、鎌倉社から自由が丘支社に移りました。 自由が丘に来たのは初めてなので、「丘ないなぁ。」って思いました。 そしてこちらはインターン研修で、書いているエントリーです。 どうか柔らかいまなざしで見守って下さいませ! 今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹介したいと思います。 といっても僕自身つくったことがないので、一緒に挑戦しましょう!! つづきからどうぞ! すごいよ!CSS3 ≫ CSS3のみでつくっているボタンを紹介している凄いサイトがあります。 ラムネのようなテイストのボタンですな。 これを画像なしでつくってるっていうからスゴイ! ここまでレベルの高いボタンはつくれないので、 基重視のシンプルなCSSボタンをつくろうと思います。 まずはC

  • 今日からCSS3アニメーションを使えるようになるチュートリアル

    CSS3のアニメーションってスゴい! 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか?CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew 

  • Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える

    Webサイトの基要素 見出し・リスト・引用文のスタイルを整えるWebサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください! 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用の HTMLCSS コードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらっても OK です :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Sa

    Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
  • [CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集

    CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste [ad#ad-2] 対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系(Chrome, Safari)のみとなっています。 Letterpress(レタープレス) Small Caps(スモールキャピタル) CSS Coupon(クーポン券) Stitched(ステッチ) Gloss(グロス) Stroked Text & @font-face(@font-faceを使ったストローク) Double Stroked Text(二重のストローク) Letterpress(レタープレス) レタープレスのエフェクトには、3つのカラーが必要です、背景のbackground、テキストのcolor、テキストの影のtext-sha

  • borderプロパティを使用した華麗なる四つのエフェクト | コリス

    <textarea name="code" class="css" cols="60" rows="5"> .shadow { padding: 20px; border: 1px solid #f0f0f0; border-bottom: 2px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } </textarea>

  • CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」:phpspot開発日誌

    Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3の擬似クラスがIEでも使えて効率的なスタイリングが可能になります。 jQuery, prototype, mootools等と同時に使うことができ、 使えるプロパティはライブラリごとに違うようで、サイト上にそれぞれ掲載されています。 完璧ではないようですが、便利なものが多く使えるということで、活用してみてもいいかもしれませんね。 関連エントリ 便利なCSS3ツール6つ+α IE6-8でもCSS3が使えるようになる「CSS3 PIE」 ピュアCSS3で3Dアニメーション IE6-8でもCSS3に対応するライブラリまとめ

  • 1