[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl
PNGとJPEG…こんなときはどっち？ Web用画像の書き出し、比べてみました！ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
PNGとGIFとJPEG…Web用画像の書き出し、どんな風に使い分けていますか？［2011年7月現在］のつづきです。 コメントやtwitterなどでいろいろ反応を頂きました。 ありがとうございました☆ 結構同じ使い分け方の方もいらっしゃってほっとしています…！ 今日はこのあいだのつづきで、 自分の中でもやーっとしていた使い分けの部分を実際に比べてみました！ 今回は、 透過を含まない大きな写真の書き出し 透過を含まない小さな写真の書き出し 透過を含み、且つCSS Spriteで使用するための画像の書き出し の３つをチェックしてみました！ チェック1：透過を含まない写真の書き出し（大きいサイズ：1200px × 1600px）について最適な書き出し形式はどれ？ FireworksとPhotoshopでそれぞれJPEGとPNGを書き出します。 PNGはPNG-24で書き出します。 (透過を含ま
アドビフォトショップ（Adobe Photoshop）使い方講座【幻想画廊・フォトショップCGコラージュ】
不思議な写真アートに興味はありませんか？ アドビ フォトショップによる不思議な合成写真とコラム集です。初心者向けのアドビ フォトショップ（Photoshop）の使い方講座、GIFアニメ講座など。
DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる！」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス＆タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが！フォトショでもFW並か、それ以上に楽ができると思います。 そ
思わず見入ってしまうほど優れたデザインのインフォグラフィック50枚まとめ*二十歳街道まっしぐら（FC2ブログ時代）
「50 Informative And Well-Designed Infographics」にて、 デザイン性が優れているインフォグラフィックがたくさん紹介されていました。 （※50枚すべて見たい方は上記サイトへアクセスしてください。本記事では一部しか載せていません。） インフォグラフィックというのはいろんな情報を視覚的に表現したものです。 身近な例ですと、駅などにある路線図がそれに当たります。 以下に、美しすぎるインフォグラフィックをいくつかピックアップして紹介します。 「元サイト」をクリックすると、大きな画像が見られますよ。 (1)宇宙調査について [元サイト] 何回調査に乗り出したかが線で表されています。 (2)世界の高層ビル [元サイト] 日本はランドマークタワーがありますよ。 (3)ソーシャルウェブ [元サイト] ソーシャルサイトまとめって感じですね。カテゴライズされています。
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
簡単にかっこいいロゴを作ることができる「GraphicSprings」｜男子ハック
Iconfinder | Download free icons
jQueryサンプル集 | DesignWalker
初心者スノーボード