W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills.
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
CSSをシンプルに書くことができるLESS使ってみた CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。 投稿日2011年12月13日 更新日2011年12月13日 ネスト(階層)化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px #999; padding: 1px; } div.section h3 { background: #999; font-size: 131%; padding: 10px; } div.section h3 a { color: #fff; } div.section h3 a
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
Icojoy this tutorial we will try to make round button in one of Windows Vista styles. WindowsVista風のガラス風ボタンを作成するPhotoShopチュートリアル。 次のようなボタンを作成するチュートリアルがムービー付きで公開されています。 以下がそのムービーです。 ガラスのような質感を作成する場合に参考になる良いチュートリアルですね。 このVista風のボタンもカッコいいのでサイトに盛り込んでカッコいいサイト作りに役立てられそうです。 関連エントリ 56のクールなPhotoShop用レイヤースタイル集 PhotoShopでMacOS、Leopard風ロゴを作るチュートリアル
PSDTuts - Photoshop Tutorials and Links - Create a Spectacular Flaming Meteor Effect on Text Take typography one step further by having text falling from the sky in a burning inferno. テキストに迫力ある隕石風エフェクトをかけるPhotoShopチュートリアル。 次のような隕石風のエフェクトがかかった画像をフィルタなどを駆使して作っていくチュートリアルです。 雲模様の描画と変形などで次のような隕石の摩擦効果を作成する部分はテクニックとして色々使えそうです。 フィルだだけでもここまでやれる、というのは驚きですね。 関連エントリ Photoshopで幻想的なファイナルファンタジー風のロゴ作成チュートリアル
PSDTuts - Photoshop Tutorials and Links - A Slick Supernatural Text Effect In this tutorial we'll be creating a smokey night effect on text to give it an eerie supernatural sort of feel. Photoshopで幻想的なファイナルファンタジー風のロゴ作成チュートリアル。 次のようなロゴを素材を使わずに1から作成していくPhotoShopチュートリアルが公開されています。 フィルタのみで星空を作ったり、波形フィルタを何度もかけて煙のようにしていくテクニックは色んな場面で使えそう。 チュートリアルを辿って次のような画像を作成してみました。 チュートリアルをこなすことで様々なテクニックを身に付けられるので一度こなして
線を組み合わせてリボン状に加工し、美しい画像を作成するPhotoShopチュートリアル 2007年11月21日- CornOnCob : SwooshyLines Tutorial In this tutorial, I will show you how to make an abstract ribbon-like effect using only Adobe Photoshop 線を組み合わせてリボン状に加工し、美しい画像を作成するPhotoShopチュートリアル。 次のような美しい画像を作成するチュートリアルです。 PhotoSohpであれば、素材を使わずとも、こういった美しい画像が作れます。 応用することで、オリジナルの美しい画像が幾通りも作れそう 関連エントリ PhotoShopでMacOS、Leopard風ロゴを作るチュートリアル 煙風エフェクトをカッコよく作るPhotoS
スパークしている光、光源・光線・光跡などの美しい「光」を描いた、Photoshopのチュートリアルの紹介です。
さいそうです。 前回さぼりました。 てへ(^▽^) けんすう先生がかなりご立腹されていた模様なので、 今日はいつもより三時間早くアップしてみたいと思います。 今日はライトセイバー作りました。 春先ごろからずっとマスターレプリカ製のライトセイバーが欲しかったのですが、 永遠に学生をやりつづけている僕としてはお金がなさすぎて買えませんでした。 そんな中、僕から僕に朗報が入ったのです、さっき。 スターウォーズ ライトセイバーを描く方法 おおおおお! こんなにすばらしいtipsなのに(しかもphotoshop系ではかなりわかりやすい方!)、 はてぶが僕だけ! どんだけ! というわけで、これなら余裕で作れるぜ思いながら作ってみました。 苦戦しました。 細かい作り方は上記の記事に任せるとして、 僕が苦戦したところだけお伝えしたいと思います。 その前に今回加工した写真の元です。 まずはs
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く