『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現! フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)を利用します。しばしばページに変化(英: Transition)やアニメーション(英: Animation)を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個(英: 12 Principles of Animation)
CSS3で実現するアローアイコン スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。 <ul> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#">link</a></li> <ul> .arrowには以下のようなCSSを指定します。 li a
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55%で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
16 Ridiculously Impressive CSS3 & HTML5 Experiments | Free and Useful Online Resources for Designers and Developers これは見ておくべきCSS3&HTML5の実験16サイトまとめ 数年前なら誰もがFlashで出来ていると疑わなかったようなデモがHTML5&CSS3で実現されています。 これだけのことがWEBでできるんだという部分を把握しておく意味でも見ておいたほうがよさそうです これだけ出来ることが増えていくと自由な反面、WEBも開発コスト等があがっていきそうで怖いところがありますね 関連エントリ WebCamで撮影をHTML5で実現するデモ HTML5を使ったクールなサイトデザイン集21 HTML5のゲームエンジン「Quintus」
作成:2013/02/4 更新:2014/11/01 Web制作 > 基本的なところを簡単に、楽しく覚えたい 自分でサービス作ったり、会社や違う職種でも 色々と「基本」はおさえておきたい 今回はサイト制作に必要な「基本的な知識・情報」を、分かりやすいサイトを中心にまとめました。必ずおさえておきたいスキル・知識です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 1.HTML5 2.CSS 3.レスポンシブ 4.配色 5.視線誘導 / 心理学 6.インターフェース / ユーザビリティ 7.SEO 8.ディレクション 9.アクセス解析 10.WEBマーケティング 11.コピーライティング 12.ソーシャル 1.HTML5 HTML5って何? HTML5とは何かを簡単にまとめてみた - Yahoo! JAPAN Tech Blog Canvasについて知っておく
この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3s background ease .5s; 当記事執筆時点(2012年11月)では、このプロパティに対してベンダープレフィックスをつけて指定することになります。 ベンダープレフィックスをつけてみた - transition -webkit-transition: .3s background ease .5s; -moz-transition: .3s background ease .5s;
50 Fresh Free HTML5 and CSS3 Website Templates フリーでフレッシュ&美しいHTML5+CSS3テンプレート50。 ほんとにフリーでいいんですかというレベルのWEBサイトテンプレートが50個もまとまっています。 こうしたテンプレートを下地に作ればHTML5デザインの新しい印象を持たせつつキャンペーンサイトなどがすぐに作れそうですね。 また、フリーの高品質なHTML5なテンプレートを作れば世界中からアクセスを呼べちゃうのかも。 関連エントリ HTML5&CSS3を利用した美しい40のフリーテンプレート集 ビューティホーなHTML5&CSS3テンプレート50 iOS6で使えるHTML5の変更点等
Simple yet amazing CSS3 border transition effects デモ 実装 デモ デモはFirefox, Chrome, Safariなどのモダンブラウザでご覧ください。 IEはたぶん10でしょうか。 デモは大きく分けて、3種類です。 デモ下段 最後は矩形のデモ、円形とは異なるアニメーションが楽しいです。 実装 HTML HTMLは非常にシンプルでa要素にclassを指定するだけです。 <a href="#" class="one"></a> <a href="#" class="two"></a> <a href="#" class="three"></a> ... ... CSS まずは、共通のスタイルシートから。 かわいい車の画像はdate:imageです。 a { background-image: url(data:image/gif;base
そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。 拡張メタ言語 - LESS メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味(機能)を持ちながら、より簡略的に表現できるようにしたための言語というわけです。 念のため分かりやすく補足しておきますと、メタとは比喩とか暗喩という意味であって、「アンタなんか牡丹じゃなくて豚よッ!」というセリフの豚という表現が正にメタに当たります。 ※豚というのは例えであって、本当に動物の豚だといっているわけではありません。 他にもこのような拡張メタ言語には、CSSに対してSCSS(Sass)、HTMLに対してHamlといったものがあります。JavaScriptに対してCoffeeScriptというのが比較
自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS Animationの確認のために作った物です)。 もし気に入っていただけたらダウンロードして使っていただけたら幸いです。特に変わった仕様も無く、シンプルで単純なものだったので、多少でも見栄えを良くしようと、先日カスタマイズしておきました。 カスタマイズといっても、jQueryやアイコン・画像・少しのコードを追加しただけなので、そんなに期待しないでね!ちなみにブログ用にカスタマイズしてあります。 あとこのテンプレートの名前は【SimpleBlack】です(名前なんてどうでもいいですよね)! 今回利用したjQueryなど jQuery Slider2 すごくシンプルで、軽量なスライダーです。あまりにシンプルだったので、本当に動くのか心配だったんですが、きちんと動いてくれました!このテ
「New」「新着」などのちょっとした情報を単に矩形で添えるのではなく、斜めにしたリボンで添えるスタイルシートを紹介します。 Creating CSS3 Image Ribbon Tags [ad#ad-2] デモ 実装 デモ 元記事ではimg要素にリボンが添えられており、当方でdiv要素のパネルのデモを作成しました。 まずは、img要素の画像から。 デモページ:div要素 ※当方作成 実装 実装はimg要素もdiv要素もほぼ同じです。 HTML:img要素版 リボンのテキストはimg要素と並列に配置し、div要素で内包します。 <div class="side-corner-tag"> <img src="1.jpg" alt="" /> <p><span>newest</span></p> </div> CSS:img要素版 このエフェクトの要点はラッパーの「overflow: hidd
一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く