タグ

webデザインに関するcochidiのブックマーク (72)

  • 注目!Flashを応用してHTML&CSSだけでは通常作れない画像効果を得る「swfIR」:phpspot開発日誌

    注目!Flashを応用してHTMLCSSだけでは通常作れない画像効果を得る「swfIR」 2007年02月27日- swfIR: swf Image Replacement When you start to use swfIR, you’ll need the ability to style it, the same way that you can do with regular images. Flashを応用してHTMLCSSだけでは通常作れない画像効果を得る「swfIR」。 こういった仕組みで、久しぶりに感動させられました。 Ajaxにこだわらず、Flashも応用することでこんなことも出来るんだ、と思わせられたものでした。 なんと、<img src="〜"> な画像タグがあったとして、この画像に、動的に角丸やシャドウ効果、回転効果やボーダーを直接かけることが出来ます。 次の

  • CSSと一枚の画像だけで透明感のある角丸パーツをつくる方法 | S i M P L E * S i M P L E

    ※ 下記の記事に誤りがありました。謝罪&修正記事はこちらへ。 あいかわらず流行っている角丸系パーツですが、新しいテクニックが紹介されていたのでエントリー。 » Even More Rounded Corners With CSS – Schillmania.com 一つの透過処理されたPNG画像とCSSだけで下のようなパーツを作れてしまいます。 PNG画像を縮小したりしているみたいですね。もちょっと複雑なデモページはこちら。スクリプトのダウンロードもできます。 » Even More Rounded Corners (Fluid, Alpha-transparent, Single Image Approach) Using CSS 透過処理もされていてなかなかきれいですが、一長一短があるアプローチなので用途に合わせてお使いください。

    CSSと一枚の画像だけで透明感のある角丸パーツをつくる方法 | S i M P L E * S i M P L E
  • 無料で使える写真素材 - 厳選12サイト | DesignWalker

    無料で使える写真素材 - 厳選12サイト | DesignWalker
  • 無料で200個以上のウェブサイトテンプレートを配布する「OpenDesigns.org」 - GIGAZINE

    現時点で約200個以上のウェブサイトテンプレートが無料でダウンロード可能になっており、ライセンスも商用利用可能なものからGPLライセンス、CCライセンスまでいろいろ。 特筆すべきは検索機能の充実具合で、XHTML準拠、ライセンス別、明るい系か暗い系か、幅は固定かそうでないか、カラムの数、色名を組み合わせて絞り込みが可能。 詳細は以下の通り。 Open Design Community - Download Free Web Design Templates - OpenDesigns.org http://www.opendesigns.org/ 強力な検索機能の利用は以下から。 Search Designs ・ OpenDesigns.org 以下からサムネイル画像でテンプレートのプレビューを見ることもできます。サムネイル画像の上にマウスを乗せれば詳細な情報が表示されるので便利。クリック

    無料で200個以上のウェブサイトテンプレートを配布する「OpenDesigns.org」 - GIGAZINE
  • 第40回 Web開発者が持つべき視点

    前回は,Web開発者が,時にクライアントに反対するかのような意見を述べる必要もあるということを書きました。今回は,なぜそのようなことになるのか,Web開発者の視点はどこにあるのかを述べましょう。 ハイプ曲線 題に入る前に,一つだけ共通知識を持っておきましょう。ご存知の方も多いとは思いますが,「ハイプ曲線」です。ガートナーが考案した,新しい技術が時間とともにどのように推移するかを示すものです。それぞれの「山」や「谷」の部分の深さや長さが,それぞれの技術によって異なり,その程度によって社会へのインパクトを視覚化できると言われています。 来の意味は様々な文献がネット上に存在するので,ここでは私の意訳的な解釈を述べたいと思います。 テクノロジーの黎明期 技術が生まれて,まだ告知が十分に知れ渡っていない期間。極々少数の開発者仲間の内で認知されている期間。この後爆発的に広まるかどうかは,この人たち

    第40回 Web開発者が持つべき視点
  • CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ - GIGAZINE

    CSSを使って吹き出しを作成することができるCSSファイルとJSファイル、それから画像ファイルをひとまとめにしたセットです。XHTML1.0準拠で、Internet Explorer 6 と 7、Firefox 2.0、Safari 2.0、Opera 9.0で動作確認ができています。 ダウンロードは以下から。 willmayo.com >> CSS Speech Bubbles 実際のサンプルは以下にあります。 CSS Speech Bubbles 角をまるくしているのは、「curvyCorners」を使用しているとのこと。 ほかにもこの吹き出し方のものは以下に多くあります。 入力欄(フォーム)部分をマウスでクリックすると吹き出しが出てくるタイプ Tooltip for forms リンクの上にマウスを乗せると吹き出しが表示されるタイプ Ajax tooltip リンクの上にマウスを乗せ

    CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ - GIGAZINE
  • クールなアクア風ボタンのベクトルデータが無料で72個! | SiMPLE*SiMPLE

    クールなアクア風ボタンのベクトルデータが無料で72個! すぐに使えそうなアクア風ボタンのベクトルデータが無料で公開されています。イラストレーターなんかで編集すればぱっと使えそう。 » 72 Free Vector Glass Buttons and Bars ファイル形式はAI、PNG、EPS、SVG。環境にあわせて必要なものを使うとよいでしょう。ただ手元のIllustrator 10ではAIが開けなかった・・・最新版じゃないとだめなのかな。 どちらにしろこういうベクトルデータの公開はうれしいですね。 CS3 で開けたので試しに Illustrator 10 形式で保存し直したところ、警告メッセージは出ますが特に何かが劣化するようには見えませんでした。(見落としているかもですけど) CS3 を持ってる人を探してファイル形式を変換してもらうと良いかもしれません。

    クールなアクア風ボタンのベクトルデータが無料で72個! | SiMPLE*SiMPLE
  • Geekなぺーじ:フリーランスとして成功する方法

    「7 Habits of a Highly Successful Freelance Web Designer」という興味深い記事がありました。 原文はフリーランスWebデザイナとして成功する方法を説いていましたが、内容を見るとプログラマや、その他フリーランサーにも当てはまりそうな内容でした。 以下、要約してみました。 誤訳などの可能性があるので、詳細は原文をご覧下さい。 1. 仕事を愛す 大企業で働いていれば、まわりに合わせて仕事をすることができます。 その日に仕事が終わらなければ次の日にまわしたりもできます。 自分が何をしているのかに対して興味を持たない従業員が多い組織もあります。 彼らにとっては、日々の仕事は単なる報酬に対する対価でしかないのです。 フリーランスとして成功するには、自分が行っている仕事を愛する必要があります。 情熱があれば、カフェインの力を借りながら夜遅くまで働き続け

  • ウェブページを見る目の動きは「F」パターン - GIGAZINE

    つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。 これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。 で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。 F-Shaped Pattern For Reading Web Content (Jakob Nielsen's Alertbox) http://www.useit.com/alertbox/reading_pattern.html 第1段階: 訪問者は最初にページの

    ウェブページを見る目の動きは「F」パターン - GIGAZINE
  • 勝手ながら『Web 2.1のデザインパターン』を考えてみた | S i M P L E * S i M P L E

    さてデザイナーでもなんでもないのでかなり個人的な主張ですが、「Web 2.0っぽいデザイン」の次を考えてみました。 名づけて『Web 2.1のデザインパターン』w。 個人的には「角丸の次って何よ?」と常々思っていたので、最近新しく出てきたサイトに共通するいくつかの特徴をまとめてみました。 かな~り主観なので「そうかぁ?」と思われる方もいらっしゃるとは思いますが・・・間違いを恐れずにメモ書き程度にエントリーです。 では早速。僕が感じている「次っぽいデザイン」の特徴は4つ。 【1】 極太ストライプ(Bold Stripe) ストライプはWeb 2.0っぽいデザインでも流行っていますが、それをもちょっと太くしたやつを最近よく見ます。 ↑ タイトルと背景が太いストライプに。 ↑ 細いストライプはWeb 2.0っぽかったですが、最近はちょっと太めが流行りかな。 【2】 極太枠線(Bold Borde

    勝手ながら『Web 2.1のデザインパターン』を考えてみた | S i M P L E * S i M P L E
  • 第3回 サイト制作のワークフロー(前編)

    Webサイトを構築をするにあたっては、完成するまでの間、いやそれだけではなく、完成後の運用・更新なども含めてさまざまなプロセスが存在する。アクセシブルなWebサイトを構築し、またそれを維持したままで(もしくはより向上させて)運用していく上では、各プロセスごとに考慮すべき事項がたくさんある。連載では個々のプロセスに焦点を当てていきたいと思っているわけだが、まずは各論に移る前に、全体の流れを簡単に紹介していこう。 今回はWebサイトの構築・運用をしていく際のワークフローについて、Webアクセシビリティの観点から考えてみることにした。特に、各プロセスにおいて、どのポジションの人がアクセシビリティについて考える必要があるのかといったことを確認していこうと思う。なお、以降はWebアクセシビリティはどんなWebサイトにも必要である、ということを前提としてのフローである。と書くと、「Webアクセシビリ

    第3回 サイト制作のワークフロー(前編)
  • 矢野りんのWebレイアウト講座

    トピックスTopics 2024年08月28日 ニュースリリース マイクロメイツ、生成 AI 活用クイックガイド「ここから始めよう!Microsoft Copilot 入門」の無料提供を開始 ~生成 AI 人材の育成支援で企業の生産性向上と業務効率化を後押し~ 2024年08月14日 セミナー・イベント 【9/18(水)開催】業界最大級のオンライン展示会「ITトレンドEXPO 2024 Summer」出展のお知らせ 2024年07月10日 ニュースリリース マイクロメイツ、業務フロー作成の基礎知識を学習する「業務フロー作成基礎研修」の提供を開始~業務フロー整備により組織の業務効率化と生産性向上を支援~ もっと見る マイクロメイツとはABOUT MICROMATES 私たちマイクロメイツは、お客さまのIT投資効果を最大にするための各種サービスをワンストップで提供しています。 基幹システムの導