[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック
デモページ [ad#ad-2] 実装 全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。 HTML マークアップはシンプルなリストで、ul要素にclassを指定するだけです。 <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul> CSS 両端がフェードするラインはCSS3グラデーションで、linear-gradientを使います。 シンプルに書くと下記のようになります。 background–image: linear–gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); 両端が「0」で、真ん中が「1」です。 また、このグラデー
Google、画像フォーマット「WebP」に可逆圧縮と透明度を追加
GoogleがWeb高速化を目的に開発している画像フォーマット「WebP」に、PNGよりファイルサイズを小さくできる可逆圧縮モードと、アニメーションに必要なアルファチャンネル機能が追加された。 米Googleは11月18日（現地時間）、オープンソースのWeb向け画像フォーマット「WebP（ウェッピーと読む）」に、可逆圧縮（ロスレス圧縮）モードと透過度を設定できるアルファチャンネルを追加したと発表した。 WebPは、同社が昨年9月に発表した画像フォーマット。Webサイトのページ読み込みの高速化を目的としており、ビデオフォーマット「WebM」のビデオ圧縮技術「VP8」を流用している。発表の時点では、JPEGのような非可逆圧縮にのみ対応していた。10月にはアニメーション、ICCプロファイル、XMPメタデータをサポートした。 Webページ向けの画像フォーマットとしては、一般に写真など階調の細かい画
50 Most Impressive Photoshop Tutorials of All Time - The Design Inspiration
Photoshop has the ability to read and write raster and vector image formats. Photoshop has ties with other Adobe software for media editing, animation, and authoring. Photoshop’s primary strength is as a pixel-based image editor, unlike vector-based image editors. However, Photoshop also enables the creation, incorporation, and manipulation of vector graphics through its Paths, Pen tools, Shape to
Luc Viatour
Photographer / Photographe Pictures in licence (CC BY-SA 3.0) All pictures available in high resolution and exif format Toutes les images disponibles en haute résolution avec les données exifs. Certaines photographies pour différentes raisons ne peuvent être sous licences CC BY-SA 3.0 (photographies de personnes, d'oeuvres, créations d'artistes, etc) Renseignez vous avant toute publication.
[JS]jQueryのプラグイン33+1選 -2011年4月
Slider Kit スライドショー、コンテンツスライダー、タブコンテンツ、カルーセルなどさまざまなスライドコンテンツに対応。
[CSS]画像を使用せずに、背景をストライプやチェック柄にするスタイルシート | コリス
Checkerboard, striped & other background patterns with CSS3 gradients [ad#ad-2] 対応ブラウザはFirefox 3.6+, Chrome, Safariです。 デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。 デモページ [ad#ad-2] スタイルシートは下記のようになります。 CSS：ストライプ 全てのベースとなる指定です。 L.8-10で、ストライプのサイズを指定します。 .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-siz
WordPressの管理画面をカスタマイズしたい時に覚えておくと重宝しそうなハックやプラグインいろいろ
商用でも無料で使えるGPLライセンスの 人気CMSなので当然、納品する事も多々 あるかと思います。クライアントさんが管理 する場合と、制作者側で管理する場合があ るかと思います。個人利用ではどうでもいい ですが前者の場合は出来れば管理画面を どうにかしたいところですね。 という訳で、WPの管理画面をどうにかしたい時に覚えておくと探す手間が省けて楽だなぁ、と思ってまとめた記事になります。 左上の「W」のWPロゴが目立つのでこれを変更。 お使いのテーマファイルのfunctions.phpに以下を加えます。 add_action('admin_head', 'my_custom_logo'); function my_custom_logo() { echo ' <style type="text/css"> #header-logo { background-image: url('.get_
いま読むべき、クリエイティブWEBマガジン10選
カッティングエッジなカルチャーをピックアップする、クリエイティブWEBマガジンをセレクト。 いますぐキャッチアップして、クリエイティブシーンのニューウェイヴをサーフしよう！ Public-image.org Public-imageは、ANSWR代表の針谷氏によって創められたWebマガジン。 ひとつひとつの記事に、執筆者名が記載されており、 単なるインフォメーションでなく、ひとつの視点によるエディットされた情報が堪能できる。 その独自視点によるコラムは脳汁モノ。 現在は、オルタナティヴスペース「Public-image3D」など、オンラインメディアを飛び出して、 メディアと現場をクリエイティブスクラッチした実験を日々発信中！だそうです。 2次元メディアにとどまらないその心意気にクラップハンズ。 Public-image3D: http://3d.public-image.org 以下サイト
「コンピューターと自分は一体」：実験で検証 | WIRED VISION
前の記事 無料配信で書籍の売り上げが増加：41冊の調査結果 「コンピューターと自分は一体」：実験で検証 2010年3月11日 サイエンス・テクノロジー コメント： トラックバック (0) フィードサイエンス・テクノロジー Brandon Keim (左)マルティン・ハイデッガー、(右)身体が道具を用いている際の全体的な相互作用の様子を図にしたもの。(A)は正常に機能する道具、(B)は機能しない道具を用いている場合。 Image credit: (左)WikiMedia Commons、(右)PLoS ONE。サイトトップの画像はwikimedia 一見単純な実験によって、偉大な哲学者の概念が検証された。その実験は、コンピューターのマウスを用いて、マウスが一時的に正しく機能しなくなるようにすることで、それを操作する人がどのような反応を示すかを調べるというものだ。 実験の結果、被験者の注意力に
こいつは便利！好きなサイズのダミー画像が動的に作れる『Dummy Image』 - IDEA*IDEA ～ 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
[CSS]IE6にも対応したテキストリンクをPNG画像に置換するスタイルシート
PNG image replacement in links demo IE6への対応に加え、下記の配慮もされたものとなっています。 画像オフの場合は、リンクはテキストで表示。 CSSオフの場合は、リンクはリストで表示。 画像オフでCSSオフの場合は、リンクはリストで表示。 HTMLは下記のように各ラベルに透過gifが配置されています。 <textarea name="code" class="html" cols="60" rows="5"> <div id="backing"> <ul id="imgReplacement"> <li class="home"><a href="#url1"><img src="ir/trans.gif" width="0" height="0" alt="" />HOME</a></li> <li class="products"><a href="
日本ってすごくね(;Д) お前らの好きな絵師とその画像を貼っていけ
※画像が多いので表示に時間がかかるかもしれません 1 以下、名無しにかわりましてVIPがお送りします 2009/09/07(月) 14:57:06.89 ID:b7FFS1Pe0 どんなのがいるんだ？ 2 以下、名無しにかわりましてVIPがお送りします 2009/09/07(月) 15:06:29.75 ID:Rms9beFa0 萌え絵を好き好んで貼りたがる奴はあんまいねーから盛り上がりにくい感はあるね 俺は七尾が好き 6 以下、名無しにかわりましてVIPがお送りします[sage] 2009/09/07(月) 15:10:35.84 ID:1jg6R+2pO 萌え絵も雰囲気出てたら好き 8 以下、名無しにかわりましてVIPがお送りします 2009/09/07(月) 16:25:26.77 ID:W35zKvz80 白猫参謀 佐野俊英 こやまひろかず 12 以下、名無しにかわりましてVIPが
これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック:phpspot開発日誌
Sexy Music Album Overlays Komodo Media これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック。 どんなサイズの画像も、次のようなジュエルケースに押し込んでしまえるCSSのテクニックです。 CSSが無い状態だと次のような殺風景な状態ですが、CSSとPNGのオーバーレイによって美しいジュエルケースに入った状態になってますね。 他にもスタイルが容易されていて、CDのディスク風にする例 同じようにレコード風にする例も紹介されています。 これはすばらしいですね。応用して、ゲームソフトのパッケージ風にしてみたり、色々できそうです。 関連エントリ CSSリストに関する5つのテクニック集 CSSとdivを使った画像先読みテクニック 便利なＣＳＳテクニック３０選 本の目次部分のようなリストをCSSでデザインするテクニック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JPEG画像を劣化させずに軽量化する『JPEGmini』がスゴすぎる - blog | roughtab
IDEA * IDEA
軽い・簡単・無料の三拍子が揃った、すべてのOSで使える画像編集ソフト『Pinta』 | ライフハッカー・ジャパン
[JS]jQueryのプラグイン33+1選 -2009年10月
「俺の邪悪なメモ」跡地
【110枚】いいセンスなかっこいい壁紙ください カナ速
拡大しても画像をキレイに保ってくれる『SmillaEnlarger』 | ライフハッカー・ジャパン