IDEA * IDEAドットインストール代表のライフハックブログ
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]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル
ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..
![[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a7f8ebcbac962aaeb8aafa79af88e7fa1ccc7c0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082002.gif)
Web上で公開されている高品質なフリーの画像を収集しているストックフォトサイト・「Pexels」
PexelsはWeb上のフリー利用可能で高品質な画像を収集しているストックフォトサイトです。画像はカテゴリ分けされ、探しやすくなっています。全てのライセンスはCC0だそうです。 Pexels
たった3KBのコードで3DCGモデルが歌って踊ってアングルも操作できる！ jQueryベースのライブラリでMMDデータを活用したWebGLコンテンツを作ろう
はじめに 数あるHTML5の機能の中でも、特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今一つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。 three.jsの登場により、実装のハードルはだいぶ下がりました。しかし、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。 今回紹介する「jThree（ジェイスリー）」は、そんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら、手軽にWebGLコンテンツを作ることができます。 本記事で
艦これ、すごく気持ち悪い
艦これがはやっているのはしっていたが、会員登録が面倒くさかった事もあり手を付けていなかった。 この週末に時間ができたので、はじめてみた。 女の子の服とか可愛い感じだな、と始める前は悪印象はなかった。 戦艦を擬人化して戦う。ベースはカードゲームみたいなもの、というのは知っていた。 モバマスみたいなものなんだろうな、とぼやっと思っていた。 はじめてみたら、嫌悪感、これをやっている男の人がたくさんいる事への驚きが・・・ ▼嫌悪感その１ ・専門用語バンバン使っている事。 とりあえずチュートリアルをやってみたものの、「戦艦」に対する知識がほぼない自分にとってはなにいってんだ？？状態。 漢字も読めない。意味も全然わからない。 戦争用語な気がしてしまい（戦艦は戦争のためのものだよね？もしそうじゃなくても、一般人はそう思うよね？） 戦争に対して嫌悪している自分にとってはすごく嫌だった。 みんな意味わかるの
Vagrant CloudのVagrant Shareを試してみたら凄すぎて鼻血出た - 憂鬱な世界にネコパンチ！
Vagrant 1.5がリリースされたと思ったら、Vagrant Cloudなんてのが登場してますね！ で、Vagrant Cloudの中にVagrant Shareってのがあるんだけど、試してみたらとんでもなかったので、早速やり方をシェアするよ！ Vagrant Cloudにユーザ登録 Vagrant Cloudのページにアクセスして、まずはユーザ登録しよう。 迷うことはないと思うけど、「JOIN VAGRANT CLOUD」ってボタンをクリックすれば登録ページに飛べる。 次に、ユーザ名、メールアドレス、パスワードを入力したらユーザ登録は完了だ。 Vagrant1.5のインストール Macの場合は普通にダウンロードページからdmgファイルを落として、ダブルクリックでインストール。 念のため、確認。 $ vagrant -v Vagrant 1.5.0 Vagrantfile作成＆仮想マシ
Illustratorで文字をかっこよくデザイン！タイポグラフィのチュートリアルのまとめ
アートワークとして見るだけでもよい刺激を受ける、そんな素晴らしいタイポグラフィ・テキストエフェクトのチュートリアルをまとめてみました。 解説は英語ですが、苦手な人でも各ステップごとにキャプチャが付いているので分かりやすいと思います。
テラシュールウェア 「ゲーム 作り方」
「ゲームを作れるようになりたいのですが、どうすれば良いですか？」と以前聞かれたので、 「ゲームを作りたい人向け」に思ってることをまとめてみようと思う。 また、下の記事が非常に良い内容だと思う。まだ読んだことのない人は是非に。 25 歳くらいのゲームプログラマの人がやるAdobe AIR を使った比較的真っ当なゲーム開発 特に「1. 覚悟を決める」と「2. 知ることは簡単ではないことを知る」と「10. 人に見せる」の項目は是非読んで欲しい。【Unity】素人が7日間クソゲーを作り続けてわかったこと 7日間クソゲーを作った話。 センスが半端ない なお、今回はUnityで話を進める。 Unity以外の場合はHSP3やenchant.jsをお勧め。 とにかくセットアップが簡単で成果物が即見れるものが良い。 逆に導入手順が必要なものやウィンドウを出すのに色々と手間が必要な物は 最初は止めておいた方が
Ruby on Railsでブログを作成するときに役立った情報まとめ - 旧gaaamiiのブログ
検索から来た人へ： ここに書かれている情報は古いので、最新の書籍やドキュメントを読むことを強くおすすめします。 (最終更新日：2013/12/19) Ruby on RailsでちょっとしたCMSを作ろうとしていて、単純なブログ程度の機能はとりあえず作れました。ここらで使ったものやら何やらをまとめておきます。少しずつ書いていきます。 下書きにしておくとだるくなって書かなくなるので最初から公開しておきますが、一段落ついたらTwitter(@gaaamii)で通知します。はてブ付けてくれるとモチベが上がって更新が早くなるかもしれません。 書き終えました。 Ruby on Railsの導入 こちらでまとめました。2013/10/13時点での情報です。何かあれば修正しますのでお知らせください。 はじめてのRuby on Rails インストール（VagrantとCentOSとrbenvとRuby
これが出来れば中級者！Illustrator初心者のための「ロゴ作成講座」
先日、ブログのリニューアルに伴いまして当サイトの「ロゴ」を作成してみたわけなんです。 ↑こんなん。 で、こちらのロゴ私も大変気に入っておりまして、ありがたくも「かっこいい！」「抱いて！」というお声を頂戴したりしなかったり。 そんななか、「あのロゴはどうやって作成したのですか？」「手順を晒してください」「私も全てを晒します…//」と言ったご意見を何名かの方から頂きましたので、「Illustrator初心者のためのロゴ作成講座」と銘打ちましてどんな手順であのロゴができ上がったのかをチュートリアルにまとめてみました。 なんとも大上段に構えたタイトルですが、これからIllustratorを学ぶ方にはちょうどいい感じの内容になっておるかと存じますので大目に見てください;)そしてすんげーーーーー長いですがこちらもご勘弁ください。 新規書類を作成 では早速Illustratorを開いて、新規書類を作成し
#CakePHP 爆速でAPIを実装するチュートリアル - 忍び歩く男 - SLYWALKER
スマートフォンアプリのバックエンドや、JSフレームワークのバックエンドとして、JSONやXMLを返すAPIをサーバサイドで実装する機会は多いと思います。 今回は、ComposerとCakePHP2.4、FriendsOfCake/crudを使って爆速で実装してみます。 できあがりは、これ slywalker/cakephp-app-api_sample CakePHPのインストール まず、プロジェクトのディレクトリにcomposer.jsonをつくります composer.json { "require": { "pear-cakephp/cakephp": "2.4.*" }, "config": { "vendor-dir": "Vendor/" }, "repositories": [ { "type": "pear", "url": "http://pear.cakephp.org
数値だけでなく、日付や時刻にも対応したスライダー・jQRangeSlider - かちびと.net
D&Dで操作するスライダーを実装するjQuery依存のスクリプトです。数値のものが多いですが、こちらは日付や時刻などにも対応しています。使うシーンは多くは無いかもですけど、便利そうです。 日付にも対応のスライダーです。※ピッカーではありません
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
「ロングシャドウ」エフェクトをPhotoshopの3D機能で簡単に作る方法 | 株式会社LIG
フラットデザインとロングシャドウが定着しつつある今日このごろ。いつ廃れるかは誰にも分からないが、いわゆる「ロングシャドウ」ってやつは割りと綺麗だなと個人的に思ってます。作り方はCSSならtext-shadowを利用したジェネレーター、Photoshopならスマートオブジェクトを使ったテンプレートやアクションなどがあります。今回は一味違うやり方で、Photoshopの3D機能を使っての作り方をご紹介します。 なぜ3Dで作ったほうが便利かというと、それは、このように、入射光を調整することが簡単に行えるからです。 あと、光の減衰で陰がだんだんとぼやけていくというちょっとリアルな表現もPhotoshopで簡単にできちゃいます。 ※制作環境はPhotoshop CS6以上が必要です。 ロングシャドウをPhotoshopの3D機能で作る方法 3Dオブジェクトに変換 レイヤーに右クリックして、テキストレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
The Blog | Welcome to Adobe Blog
要素内にある特定の書き方のclass名を一括で削除する
iOS7のブラーエフェクトを学ぶPhotoshopのチュートリアル（PSD素材付き）