« Prev || 1 | 2 | 3 |...| 22 | 23 | 24 || Next »

CSS3のgradientを簡単に生成できるスグレモノ。

カテゴリー
css
投稿者
nonukes
コメント
書く

前回CSS3のグラデーションについて書いたので、今日はそれに関連した簡単なtips。

タイトルにもあるように、CSS3のgradientを簡単に生成できるスグレモノをご紹介。

Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/

ultimate_css_gradient_generator.png

画像が少し小さくて見えにくいと思うが、直感的なインターフェイスで簡単にグラデーションのCSSコードを吐き出してくれるウェブサイト。

background: #cedbe9; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#cedbe9), color-stop(17%,#aac5de), color-stop(50%,#6199c7), color-stop(51%,#3a84c3), color-stop(59%,#419ad6), color-stop(71%,#4bb8f0), color-stop(84%,#3a8bc2), color-stop(100%,#26558b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* IE10+ */
background: linear-gradient(-45deg,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

こんなコード、手書きではとてもじゃないがムリ。

残念ながらIEでは表現しきれないので、ご覧になるならIE以外のブラウザでどうぞ。

ぐらでーしょん♪

今日はここまで。

IE9でCSS3にちょっとハマった。

カテゴリー
css
投稿者
nonukes
コメント
7件

~前回のあらすじ~

IE8以下でもCSS3を!

そんな願いを叶えてくれるドラ○もん的なライブラリがこの世に数多と存在する。

その中の一つが、“CSS3 PIE”なのである。

ひゃっほい!

なぜだかテンション↑↑である。

これで念願の角丸が、、、!

、、、あれ?

一部、角丸にならないぞ?

、、、あれあれ?

グラデーションをかけようと思ったら、IE9でのみ効かないぞ?

、、、あれあれあれ?

なんでやね~~~~ん!!!!!!

さて。

今回はその続きである。

»Read More

CSS3 PIEを使ってみた。

カテゴリー
css
投稿者
nonukes
コメント
書く

前回の記事“たまにはhtml5+CSS3について。”で触れたように、近年HTML5 CSS3でのコーディングが増えてきている。

このサイトもそうだが、ボクはこれまでずっとXHTML 1.0 Strictにこだわってコーディングを続けてきた。

予備校の一化学講師(ボクね)が“ビョーキ”になり、授業ができなくなったことでいきなりウェブ担当となったのだが、何を隠そう我が家にはいわゆる“ネット環境”なるものがなかったため、インターネットなるものにもほとんど触れたことがない人間がHTMLもCSS(当時はCSSなんてほとんど使わず、テーブルレイアウトが主流だったが)なんてものが分かるはずもなく、前任者が残したソースの“日本語部分”をただ書き換えるだけ、ってなカンジで遣り繰りすること数か月、これじゃイカンということで一年勃起もとい一念発起してネットの記事や書籍を読み漁り、どうやらこれからの時代はXHTML+CSSの時代だと悟り、それならばXHTMLを究めてやるということで半年ほど独学で勉強しまくり、ウェブ担当となって1年が経とうという頃にXHTML+CSSでこれまでのサイトを完全リニューアルし、HTMLとCSSは大体身に着いたから次は何だろうと考えたときに当時の各種申込フォーム(これまた前任者がperlで書いたもの)がなんだかショボかったため、そうだこれを何とかしようと考えてプログラミング言語を調べたところphpというものの存在を知り、perlよりもhtmlとの親和性が高く初心者にも習得しやすいというところに惹かれてphpを独学で勉強しまくり申込フォームを作り直し、その後マイページを作るということになってphpでのコーディングに没頭し、ほぼ完成間近というところで“ビョーキ”が再発し、約1年の休職期間を経て今度は別の会員制サイトを手掛けることとなり、phpとMySQLとの連携もほぼ身に着いた辺りでそれが最近ようやく一段落ついたため、改めて世間の動向を調べたところどうやらいつの間にかにXHTMLの時代は去りつつあり、HTML5+CSSの時代が到来していることに気が付いたのだが、ボクのこの仕事の原点は“XHTMLを究める”ということだったし、特に以前市場のシェアが高いIEがHTML5の実装にかなり遅れをとっているということもあり、いやいやまだHTML5は早かろうと自分自身に言い聞かせ、まだしばらくはXHTMLで十分でしょうと考えていたのである。(お疲れ様)

»Read More

たまにはhtml5+CSS3について。

カテゴリー
html
投稿者
nonukes
コメント
書く

会社で構築している会員制サイトのシステム部分(phpでアレコレ)に関しては一段落が着いたので、html(+CSS)部分をちょっといぢってみようと思った。

巷ではhtml5+CSS3でのコーディングが注目を浴び始めているが、html5は対応ブラウザの問題が非常に頭を悩ませる。

HTML5 & CSS3 Support
http://www.findmebyip.com/litmus/

上記サイトにおいて各ブラウザのhtml5実装状況を見てみると、IE9ではいくつかの機能が実装されている(とはいえ、他のモダンブラウザと比較するとかなりエグイ)が、IE8以下は壊滅的状況である。

会員制サイトのユーザー環境をGoogle Analyticsで調べてみると全体の70%近くがIEユーザー、しかもその内の60%近くがIE8以下(IE8:40%、IE7、IE6:各10%ずつ程度)なので、ざっと全体の40%近くがIE8以下で閲覧していることになる。

これでは、html5はとてもじゃないが、である。

一方CSS3に関して同じく上記サイトで調べてみると、モダンブラウザにはやや(?)劣るもののhtml5に比べればまだ実装が進んでいるようである。

で、問題はIE8以下。

こちらも、まあ当たり前であるがやはり壊滅的である。

»Read More

“サイト構築”とは関係ないけど、桜井さんは神です。

カテゴリー
総合
投稿者
nonukes
コメント
1件

ついに。

行っちゃった。

ナニに?

ぐふ❤

聞きたい?

むふ❤

え?

聞きたいよね?

でへ❤

それはね。

»Read More

« Prev || 1 | 2 | 3 |...| 22 | 23 | 24 || Next »
track feed