Home > スポンサー広告 > おサルでもできるPure CSS トリック自分用まとめ

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-




Leave a Comment

Trackback+Pingback:-

TrackBack URL for this entry
http://denzy523.blog40.fc2.com/tb.php/422-f85e9467
Listed below are links to weblogs that reference
スポンサーサイト from Happy Life of Things

Home > スポンサー広告 > おサルでもできるPure CSS トリック自分用まとめ


Home > HTML/CSS(ウェブ言語) > おサルでもできるPure CSS トリック自分用まとめ

おサルでもできるPure CSS トリック自分用まとめ


screen1.gif

hate-if6

iphone4 grad-logo-png

luv-grad.jpg

screen9.gif
screen8.jpg

夏はぶっとい黒文字を見ると暑くるしい。誰でもカンタンにテキストを涼しくオサレにする方法ってないか?うん。あった。 
HTML Markup

<h1><span></span>CSS Gradient Text</h1>


The CSS
The key point here is: h1 { position: relative } and h1 span { position: absolute }

h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}



jQuery prepend version (for semantic lovers)
If you don’t want to have the empty tag in the heading, you can use Javascript to prepend the tag.
JQueryでもできる。Prepend method を使ったヴァージョンこれ。

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

//prepend span tag to H1
$("h1").prepend("<span>>/span>");

});

</script>


これで少しiOS4 のadに近いクリスタルな感じになった。夏になるとシースルーや透き通るようなレースなファッションをしたくなるでしょ。WEBも同じ。それをCSSだけでカンタンに作れるようになったのね。これは山のようにあるテクニックの中の一つの例だけど、Grossy系ホワイト、グレーなどのちっちゃなTransparent PNG (透過PNG)を使うだけでキレイなグラデーションが表現できます。すてき。当然のことながらIE6、それまえVer.では特別なコードをハックしないと表示されない。今どき使ってるヤツなんて頭おかしい。でも父の知り合いでWIN 2000とか使ってるおっちゃんいたなそういえば。こういうおっさんがいるからいつまでも古いものを引きずることになる。
Webkit系 /chromeの進化と統一でこれから時代はどんどん変わっていくんだね。楽しいことがたくさんおこりそう。Webデザイン系情報サイトではPURE CSSだけでいろんなトリックができるチュートリアルの最前線です。このwebの変化の波についていけるか乗り遅れるか?それもきっと自分のやる気次第なんだな。。。第一せんで活躍してるwebデザイナーさんたちには本当に頭が下がります。

オリジナル提供サイト Mr. DesignerWallのアドバンスCSSはホント参考になります。目からうろこ→なんでうろこっていうのかな? 

Via http://www.webdesignerwall.com


あと国内ではこの人 
いいこというよ、マジで。どんな世界でもそう。自分の信じる法則に従って宇宙レベルでものを考えられる人。先見の明がある人。これは共通してわたしが尊敬できる種類に入る。

☆プロのWebデザイナーの方へ

HTML5やCSS3はまだ発表された仕様じゃないけど、十分に調べる価値があるものです。
AppleやGoogleの標準化に対する思いをなめちゃいけません。
ここはひとつ、原典となる仕様書(の邦訳でも)を見て勉強する良い機会じゃないですか?プロのWebデザイナーも、「現場でまだつかえないから」とかいって時代が変わるのを待っていたり、誰かが「まとめ記事」を作るのをまっていると、いつまでたってもテクニックを後追いする情報奴隷から抜け出せませんよ。興味があって時間もあるのに何もしないひとは、勉強するのが面倒くさくて後回しにしてるだけですよね? だとしたらなかなか3流な「プロのWebデザイナー」ですね。

自分でテクニックや方法論を考えられるのは、なかなか貴重な機会なんですよ。発見されたばかりのまだ誰も真剣に読んでない魔法書のようなものに自由に無料でアクセスできるんですからね。あなたの見つけたテクニックが長い目で実用的かそうじゃないかなんてのは深く考えなくてもいいんです。だって今ある「実用的」なテクニックを見渡しても、いろんな人が考えだした(結果的に)実用的じゃなかったテクニックの積み重ねの上に、「ポン」と乗っかっただけのものばっかりなんですから。

いいですか、
「IE6だけを視野の中心に置いている人はプロじゃないっす。☆☆☆☆」

HTML5やCSSに関して調べているひとも、見つけたテクニックを後ろポケットにいれて、どこで出そうか考えてぐずぐずしていると、すぐに俺も見つけて先に公開しちゃうからね!

少し具体的なものをあげます。

「IE6を考慮しない」としたとき、最も大きく変わるのは実はこの記事のような「見栄え」に関するデザインではなく、「CSSのコーディング」デザインのほうです。理由は、セレクタの種類が圧倒的に増えるからです。

CSSにおいて「セレクタ」とは、対象となる文書構造を特定する重要なルールで、スナイパーライフルでいえばスコープにあたります。IE6を考えないコーディングの場合は、このスコープの精度が突然に、そして極端に上がります。
以下の「選択肢 セレクタ」のページをみてください。http://zng.info/specs/css3-selectors.html#selectorsこの辺はいまもうその使い方ぐらいは覚えておいたほうが良いと思いますよ。

☆Webデザインを趣味でやってる方へ

プロのウェブデザイナーたちが「現場主義」で新しい情報に触れてない間に、
SafariやGoogle Chormeを使ってCSS(2でも3でも), HTML(4でも5でも)を勉強しちゃてはどうでしょう? 
CSSを勉強しているひとは、まずは実装が正確なブラウザを中心に使って表示を確認するのが大事です。1つのブラウザしか考えなくていいので、とても勉強しやすいんじゃないでしょうか。

参考になるサイト
HTML5 differences from HTML4 W3C Working Draft 24 June 2010

HTML5 日本語サイト
http://www.html5.jp/ 


この内容はすでに1年まえに書いてる。ツボっ



関連記事

nippon blogmura female trader

Comments:0




Leave a Comment

Trackback+Pingback:0

TrackBack URL for this entry
http://denzy523.blog40.fc2.com/tb.php/422-f85e9467
Listed below are links to weblogs that reference
おサルでもできるPure CSS トリック自分用まとめ from Happy Life of Things

Home > HTML/CSS(ウェブ言語) > おサルでもできるPure CSS トリック自分用まとめ

AUTHOR


不定期ですがInstagramの画像も上げてます、Flickrとクロスポストしてます。iPhoneユーザーは一緒にシェアして遊びましょう。


✐ RECENT COMMENTS
MAILFORM
Contact me ▶

javascriptオフの場合はこちら▽

TRAFFIC FEED
Feeds

Back to Top