こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか?PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションま
CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、 CSS3で新たに定義されたプロパティを色々と使ったサンプルを作ったので、それを紹介したいと思います。 サンプルページは、CSS3のプロパティの練習として作っていたので、 表示の対象はこれらのプロパティを先行実装しているWebKitエンジンのブラウザーの中でも、 描写速度が激的に改善されている開発者向けのWebKit Nightly Buildsになります。 Safari4やGoogle Chromeでも見られますが、アニメーションはスムーズに再生されません。また、HTML5のaudio要素に対応していない場合は音が出力されないようです。非常に高負荷な処理が盛
デザイナーとプログラマーの間に優劣なんかない。あるのは役割の違いだけ。なのになんでHTMLコーダーとかデザイナーとかをバカにするプログラマーが多いのかサッパリわからない。 HTMLコーダーやWebデザイナーをバカにしているプログラマーは全員腹切って死ね。 web業界にも様々な職種があり、最近では分業化も進んでるみたいだが、 だからって「自分はHTMLコーダーですから、プログラミングには興味ありません」は通用しない。 HTMLコーダーやデザイナーも、プログラミングは勿論サーバーやネットワークの知識を持つべき。 まぁデザイナーは別業界でもある程度潰しがきくかもしれない。 プログラミング知らないHTMLコーダーがダメな理由 なんでやねん。なんのために仕事が分かれていると思ってんねん。デザイナーがサーバやネットワークを知らないといけないような状況って、プログラマーがクソなだけだろ。 そんないうんや
HTML::TreeBuilder で HTML 文書の断片を構文解析して元に戻すと,余計な html タグなどをつけてくれる。回避する方法はないか調べてみると,一風変わったな名前のメソッドが見つかった。 HTML::TreeBuilder の話の続き。先の記事は,HTML::TreeBuilder の出力が strict になる方法についてだった (nlog(n): HTML::TreeBuilder で構築した木が元の HTML に戻らない)。もちろん,これはオリジナルのドキュメントにちゃんと書いてある。そんなものを「再発見」してどうするのだという気もするが,嵌{はま}りやすいことでもあるので,強調しておくことに多少の意味はあるだろうということで,深く考えないことにする。さて,今回は,HTML 文書の一部 (断片) を構文解析して元に戻すと,「戻りすぎる」という話である。これもドキュメ
2007年11月05日23:30 カテゴリLightweight Languages 紹介 - 一つのファイルでperl,javascript,HTMLそしてGIF takesako['www']++; TAKESAKO @ Yet another Cybozu Labs: Real UNIX MAGAZINE Day ライトニングトーク 若輩者ながら、昨今のAjaxの技術のGIF89a(ハック)について newtype と oldtype の話を交えながら、ライトニングトークさせていただきました。これが、問題のソース。ちょっとだけ改変してあります。以下のリンクを追ってお試しあれ。 polyglot.(html|gif|pl) GIF89a(q=/*=);sub GIF89a{ print "Hello, Perl!"} __END__#*/1);function GIF89a(){ale
ネイルで使う材料で、DIY時の木割れやネジ跡を派手にしたらかわいい OSB合板でちょっとしたボックスをつくりました。 ビス止め下手すぎて木を割ったり穴あけすぎたりした場所に、好きな派手色の樹脂を詰めてパテ代わりにしてみました。 ちょっと某HAYっぽみ出て可愛かったので、自分用にメモです。 手順 塗装 派手色グミジェルで失敗部分…
Shibuya Perl Mongersテクニカルトーク#8 で発表した「続イメージファイト」の資料を SlideShare で公開しました。 Shibuya.pm#8 続イメージファイト - HTML 2.0 New Browser Detection JavaScriptやCSS Hacksを一切使わずにHTMLでブラウザを判別するハックの紹介です。 HTML 2.0 - Browser detection [3] ブラウザ判別のデモのページにアクセスすると、使っているブラウザの画像が表示されます。 このimgタグのsrc属性はfirefox2.0、firefox1.5、その他のGeckoエンジンを搭載したブラウザ、Safari2、Safari3、Opera、ie、w3m、lynxなどのブラウザの判別に対応しています。 テキストブラウザの判別
つい先週pop*popで紹介されていた写真+HTMLタグと同じアイデアかと思ったが、よくみるとちょっと方向性が違ってた。 イレズミで彫ったHTMLタグの写真 HEADタグの帽子とかBODYタグのTシャツなんかは、まだ軽いお笑いグッズだと思うんだけど、彫るのはなあ… 確かめたくもないけど、お尻に閉じタグはあるんだろうか [関連] TシャツにHTMLタグというのは、Tシャツ屋のサイトを探すと大量にある この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘いただければ幸いです。最新の状況を調べて新しい記事を書くかもしれません
Flickrには「The Visual HTML Jokes Pool」という愉快なコミュニティがあります。そこでは写真でHTMLタグを表現してみよう、という遊びが行われています。 » The Visual HTML Jokes Pool (Flickrのグループ) これは実物を見てもらった方がわかりやすいですね。下記に何枚かご紹介。 ↑ まさしく地平線は「区切り」ですね。 ↑ 「強調」です。うまいですね。 ↑ 「ヘッド」タグです・・・・。むしろ、この顔は誰の顔なのかが気になります。 ↑ 「ヘディング」タグ。よくできました。 ↑ ジェットリーの「リー」という名前に脊髄反射して付けられたタグだと思われます。本来はリストの「li」ですね。 ↑ 「ストライク!」。ノリだけで作成したという意気込みがひしひしと伝わってきます。本来は打消し線ですね。 みなさん、なかなかクリエイティブですね。さて、この
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く