[B! CSS3] m_takashiのブックマーク

知っておくと何かと応用が利くCSS3を使った表現テクニックいろいろ

Experimental Page Layout... / Code a Fantastic Animate... / Fluid CSS3 Slideshow wit...他...全8件

m_takashi 2012/05/10

リンク

[CSS]画像にちょっと素敵なエフェクトを与えるスタイルシートのまとめ

デモページ [ad#ad-2] HTML img要素とメッセージのp要素をdiv要素に内包します。 <div class="polaroid"> <p>Sarah, Dec '02</p> <img src="http://lorempixum.com/200/200/people/1" /> </div> デモで使用しているメッセージの手描き風のフォントは「Kaushan」です。フォントを利用する場合はhead内に下記を記述します。 <link href='http://fonts.google apis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> CSS ポラロイド風のスタイルを適用するために、3つのセレクタを使用します。 .polaroid { position: relative; width: 2

m_takashi 2012/04/03

リンク

CSSだけで画像をシャレオツにしてしまう４つのエフェクトサンプルコード:phpspot開発日誌

4 Fun CSS Image Effects You Can Copy and Paste | Design Shack CSSだけで画像をシャレオツにしてしまう４つのエフェクトサンプルコード。次のように、画像を一瞬にしてオシャレにするCSSコード例が紹介されています。数年前に同じような事を画像編集ソフトでやっていた人がいそうですが、もう一瞬でCSSでできる時代ですよ奥さん、という声が聞こえてきますね数年後には、もう正直どうやってやってるかわからないけどライブラリ使ったらこうなった的なブラックボックスにどんどんなっていくんでしょうね関連エントリ HTMLをアップするとCSSのスケルトンを自動生成してくれる「bearcss」 facebookのタイムラインをjQueryとCSSで作るチュートリアル Youtubeのカーソルを合わせるとポップアップするボタン実装CSSサンプルシンプ

m_takashi 2012/02/18

便利だけど、Web屋には厳しい時代がすぐそこに…

css3
effect

リンク

シリコンバレー発的なカッコいいボタンを瞬時に作れる「Live Tools - Button Builder」:phpspot開発日誌

シリコンバレー発的なカッコいいボタンを瞬時に作れる「Live Tools - Button Builder」 2012年02月17日- Live Tools - Button Builder シリコンバレー発的なカッコいいボタンを瞬時に作れる「Live Tools - Button Builder」。パラメータを調整するだけで簡単にボタンが作れちゃいます。どういじってもなんかカッコよくなっちゃうところがいかしてます。ジェネレーターでも、なんか変なボタンになっちゃった、みたいな物もありますが、こういうジェネレーターこそ理想ですね。デザインにこだわりがない人がとりあえず作ったけど、なんかカッコいいみたいなものが増えればWEBはどんどんカッコよくなっていく、と電車に乗った人が言ってました。コードを瞬時にジェネレート。貼りつけて完了関連エントリ HTMLをアップするとCSSのスケルトンを

m_takashi 2012/02/18

効率的で尚且つ素敵！

リンク

CSS3ビギナーでも分かりやすく解説された、ユーザーが使いやすいボタンを実装するチュートリアル

CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 Styling Button Links With CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイルオプション:テキストの選択を不可にまとめ:全スタイルシート Step 1:ボタンの実装ボタンの実装には、シンプルなテキストリンクを使用します。 HTML テキストリンクにclassを付与します。 <p><a class="button-link" href="#">Button Link</a></p> テキストリンクをボタンに見えるようスタイルしていきます。ボタンがクリックしやすいように、paddingの値を充分に設定します。 .butto

m_takashi 2012/02/06

リンク