最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
CSS3の勉強になるかも！？画像を使わないボタンの作成手順
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
Webデザインの現場で使えるPhotoshopテクニックまとめ9つ - W3Q
Photoshopの秘法 発掘キャンペーン - ... / 画像を拡大してもできるだけ画質を下げないPhot... / ちょっとぼんやりした画像をくっきりさせるPhot...他...全9件
Facebookのタイムラインでカバーとプロフィール写真を一体化させるオシャレテク | ライフハッカー・ジャパン
Facebookの新しいタイムライン機能が全ユーザに適用されましたが、先に使っているアーリーアダプターが使えるテクをいくつか発見しています。そこで今回は、カバー写真からプロフィール写真を切り取る方法や、カバー写真の中にプロフィール写真を入れ込む、オシャレなピクチャー・イン・ピクチャーの方法などをご紹介していきましょう。この写真関係のテクには大きく2つのやり方があります。1つはPhotoshopを使うやり方、もう1つはPhotoshopを使わないやり方です。 ■Photoshopを持っている人 Photoshopを持っている人は「Ausgetrock.net」のデザインチームが提供している、Photoshopのテンプレートとアクションのセットをダウンロードして、写真のサイズをそれで測れば楽勝です。カバーとプロフィールの写真を一体化させたい人は、左下にプロフィールにしたい写真があるようなサイズ
ここまで教えてくれていいの？！WEB屋のテンションと底力を上げる厳選チュートリアル色々！ | バンクーバーのうぇぶ屋
WEB制作のチュートリアルって本当に多いですよね。 でも、本当に役に立っている、制作に生かせてるチュートリアルって少なくないですか？チュートリアルの過程が中途半端だったり、途中からついていけなくなったり。はたまた、続きは有料なんて物も今までありました。 しかし！僕の短いWEB屋人生ですが、年に2、3は『お、おぉぉ！マジテンション上がるWA！』と叫びたくなるチュートリアルに出会うことが稀にあります。そんな感銘を受けたチュートリアルは速攻でFacebookにアップしているのですが、今回は今日まで見てきた中で、余りにクオリティが高かったり、確実に自分や周りのスキル、そしてテンションを上げたチュートリアルを厳選してご紹介！ 英語記事メインですが、デザインよりならステップbyステップなのでなんとかなります！コードなら、Demoとか多いので見ながらついていけば理解できます！是非参考までに流し読みして見
Webデザイン。イラレは出来る子。フォトショなんかに負けないもん。 - フリーでWebデザインとかやってる紳士。
2015年7月11日、追記。このページ、いまだによくアクセスされているようですが、その全員が「なんだよ2011年の記事かよ、クソが！」と不信感を抱くことと存じます。あらためて確認しますと、CC2015でも通用する内容ですのでクソとかいわずにご一読ください。 本編ここから釣り気味のタイトルですみません。中身も釣りなのでご査収のほどよろしくお願いいたします。さて、この記事↓にリスペクトかつインスパイアされ、勢いで記事投下してみる。 Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ Webデザインをするにあたって、巷ではPhotoshopを使う人が多いようなのだが、ベクターデータの軽快さや自由自在の拡大縮小の便利さもあって、私はIllustratorを使っているため、日頃から虐げられている。ことWebに関しては、Photoshopがたけのこの里なら、Illustra
Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ
色んな Webサイトを見ていると、1px にこだわって作られたキレイなデザインがたくさんあります。私は Photoshop を使っているので、Photoshop のレイヤースタイルを使って、1px の細かい所を作る Tips をまとめてみました。基本的な操作ばかりなので、これから Photoshop で Webデザインをやってみたいなーという人向けの記事です。 色んな素敵なデザインの Webサイトを観察していると、1px の細かいところまでこだわって作られてるデザインってとても多いですよね。1px … Webデザインでは一番小さいサイズ。「神は細部に宿る」という言葉もあるけれど、1px までしっかり作られたグラフィックはとても美しいですね！ 今回は Photoshop を使って、いろんな 1px を作ってみました。とは言っても難しいグラフィックデザインを作るわけではなくて、レイヤースタイル
【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを
2013年3月23日 Photoshop 「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介した「わずかな」加工を使ってボタンのデザインをかっこよくしよう！というチュートリアル記事です。前回の記事内にPhotoshopでの作成チュートリアルも載せたかったのですが、あまりにも長くなりそうだったので別記事にする事に。合わせて見てみてください！ ↑私が10年以上利用している会計ソフト！
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル
階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></
ディテールの作りこみも丁寧に解説された、ウェブデザインを作成するPhotoshopのチュートリアル集
最近のトレンドを踏襲した、ディテールの作りこみも丁寧に解説されたウェブデザインを作成するPhotoshopのチュートリアルを紹介します。 ここ半年くらいに公開されたものから厳選しました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
ドット絵描く楽な方法見つけた！気がする
新着記事
IEにも対応！10分でできるWebフォント実装法 (1/3)
IDEA * IDEA
新着記事
IDEA * IDEA
新着記事
