『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。 Sonic Creatorの前に、まずはSonicのデモから。 Sonic Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量(約3K)のスクリプトで、実装方法などは下記をご覧ください。 かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic 今回紹介するのは、このSonicをコードベースでオンラインで簡単に設計でき、それをアニメーションGIFやCSSスプライト用のPNG画像を生成するオンラインツールです。
お肌のビフォー・アフター Skin Retouchingのインストール Skin Retouchingの使い方 Skin Retouchingのインストール サイトの下の方「Free Download」から「Skin - 5 Retouching Actions.zip」をダウンロードします。 5 Skin Retouching Photoshop Actions 「Skin - 5 Retouching Actions.zip」を解凍します。 Skin by SparkleStock.atn Photoshop用のアクションファイル Skin by SparkleStock.zxp Photoshop用のエクステンション Photoshopにインストールするには、.atn, .zxpのいずれかを使用します。 アクションファイルのインストール アクションファイルをインストールするには、Ph
デモページ:オーバーレイ非表示 Chardin.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="chardinjs.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="chardinjs.min.js"></script> Step 2: オーバーレイで表示する内容を加える 通常通り配置したページの要素に、オーバーレイで表示する内容を加えます。 <img src="img/chardin.png" data-intro="オーバーレイで表示するテキスト" data-position="right" /> 「data-intro」に表示
個人でも商用でも利用できる全500種類のアイテムが揃った、汎用性に優れたシンプルなデザインのアイコン素材を紹介します。 500 Vector Mega Icon Pack ダウンロードできるアイコン素材のフォーマットは、2種類です。 .ai 素材の修正・紙にも使えるIllustratorのベクター素材 .png すぐに使いたい人用の128x128の透過PNG アイコンは全部で500種類! さまざまなアイテムが揃っています。
作成:2013/04/8 更新:2013/06/02 WordPress > 有料に匹敵するような無料のテーマを知りたい。 これからブログを始めようとしている人、新しいサービスを始めようとしている人も是非、ひと通り見ておきましょう。初心者の方はWEB制作を「はじめて」する人が分かるまとめをご覧ください。WordPressのテーマを見ておくと、現時点でのレイアウトで足りなかった部分を気づいたりすることができます。 少し時間はかかりますがSEO対策も簡単です。今回は無料のテーマやテンプレート、また作成方法などをご紹介します。素材は「WEB制作が「はかどる」素材まとめ」でどうぞ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 1.無料テーマ一覧 2.WordPressの基本 3.テンプレートタグについて 4.関数一覧 5.固定ページ 6.アイキャッチ画像 7.カス
lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するjQueryのプラグインを紹介します。 デモページ:幅780pxで表示 SuperBoxの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/superbox.js"></script> Step 2: HTML まずは、基本構造です。 HTML5のdata属性で拡大する画像を指定し、classに「superbox-im
500x500px超のシームレスに使えるざらっとした紙のテクスチャ素材を紹介します。 FREE SEAMLESS PAPER TEXTURES 紙は全部で12種類あり、フォーマットはJPGです。 テク
クラシックなネクタイの結び方4種、ちょっと変わった美しいネクタイの結び方6種をまとめたインフォグラフィックを紹介します。 Tie DIY: Every Knot You Need to Know まずは、クラシックなネクタイの結び方4種。 フォー イン ハンド 最も手軽でポピュラーな結び方、別名シンプルノット ハーフ ウインザー フォー イン ハンドよりもフォーマルな時用 ウィンザー フォーマル時の定番、幅広い三角が特徴的 シェル ノット 絹のような厚地のネクタイに最適 ちょっと変わった美しいネクタイの結び方6種。 ボウ タイ タキシードにぴったりな蝶ネクタイ ケルビン ノット 細く左右対称に美しく結べる プラッツ ノット ハーフウインザーより薄く、対称に結べる ニッキー ノット プラッツに似た結び方で、結び目を簡単に調整できる エディエティ ノット 映画「Matrix Reloaded」
こんにちは。三十路になりましたLIGの代表、岩上です。桜も随分と散って既に4月も中盤です。新卒の方向けの記事は色々と出ていましたが、ライフネット生命副社長の岩瀬さんの記事はとても共感しました。 新社会人の君へ 人生、何が起こるか、将来のことなんて、誰も分かりはしない。 明日から、しばらくはあまり深く考えず、悩まず、千本ノックを浴びるように、うさぎ跳びで階段を登るように、がむしゃらに先輩の言うことに没頭してみてください。そして一日も早く、社内で信頼される人材になってください。そこからすべてが、始まるはず。 そのとおりだと思います。岩瀬さん、尊敬しています。それとは別に、自分自身が20代前半に経験した、将来に繋がりそうな心構えを10コまとめてみました。数年後に向けて、気に留めておいてもらえると嬉しいです。 1. 質より量。とりあえずこなす。 岩瀬さんも記事内に書いてありましたが、とりあえず長時
では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ
ボタンをホバーすると、サークル状のフラットなアイコンを使ったソーシャルメディアへのシェア用のボタンがアニメーションで表示されるスタイルシートを紹介します。 Animacion CSS ※デモは最新のモダンブラウザでご覧ください。 デモ自体は上記のアニメーションに比べてちょっと遅い動きですが、スタイルシートで調整すれば好みのスピードに変更できます。 実装は、下記のようになっています。 HTML 各シェアボタンはa要素で配置し、div要素で内包します。 <div id="redessociales"> <a class="smedia facebook" href="https://www.facebook.com/josernitos">Uno</a> <a class="smedia twitter" href="http://www.twitter.com/josernitos">Dos
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く