http://www.keni-customize.net/custom-midashi-design-555/
SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
WordPressのカレンダー系プラグイン8個。色分けして営業日やイベント告知。予約受付できるやつも。
「営業日や臨時の休業日を案内できるカレンダーをサイトに付けて」って要望が、クライアントさんからけっこうあったりします。「予約可能かどうかをカレンダー上で◯とか×で見せたい」や「カレンダーから予約できる機能がほしい」ってのも多いです。 そんな要望に応えられそうなWordPress プラグインを集めました。 本当は要望を満たせるシステムを案件ごとに開発できればいいんでしょうが、それだけ予算に余裕があるケースばかりでもなく。 ってことで、どうぞ。機能・用途別に8個あります。 カレンダー系プラグイン8個 1. レスポンシブOK。カスタマイズできるGoogleカレンダー：Google Calendar Events 2. 色分け営業日カレンダー：WP Simple Booking Calendar 3. サイドバーにピッタリ営業日カレンダー：Biz Calender 4. 本格イベント告知カレンダー
料金表をわかりやすくデザインするコツ。実例やレスポンシブ対応サンプルも！
2017年10月31日 CSS, Webデザイン, Wordpress サービスを提供しているWebサイトにとって大切なのが、各プラン内容とその料金。複数の選択肢がある場合、その違いがわかりにくかったら、ユーザーを困惑させてしまいます。今回はWebサービスのコンバージョンにも繋がる、わかりやすい料金表の作り方を考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ 料金表をデザインするときのポイント 1. プランの違いをわかりやすく まずは各プランのサービス内容と料金をわけることから始めましょう。各プランの名前を料金表の先頭において、ひと目でどのプランについてまとめているのかを認識できるようにします。プランをグレードアップするごとにプランの名前もランクが上がるよう命名しましょう。 よくあるプラン名： ブロンズ・シルバー・ゴールド・プラチナ マイクロ・スモール・ミディアム・ラージ
これは凄すぎ！WordPressでランディングページやポートフォリオやブログなど、さまざまなデザインで簡単に作成できるテーマ -Ultra | コリス
最近人気のあるさまざまなデザイン、レイアウト、エフェクト、インタラクションをカスタマイズして、企業サイト・プロダクトやアプリのランディングページ・ブログ・ポートフォリオ・ショッピングサイトなどが作成できるWordPressのテーマファイルを紹介します。 GNU ライセンスで、個人でも商用でもクライアントワークでも無料で利用できます。 ↓こんな感じのが、簡単に作成できてしまいます。 ページサンプルは、まだまだありますよ！ Ultra Theme (Free) 追記：2015/5/25 5/24に、本キャンペーンは終了しました。 参考：Ultra: the Most Flexible & Powerful Theme Ultraの特徴 Ultraのデモ Ultraのダウンロード Ultraの特徴 Ultraは、レスポンシブ対応のどんなタイプのサイトでも簡単に作成できるWordPressのテーマ
デザインの原理原則がわかる8つの記事 | creive
デザインをする際に、IllustratorやPhotoshop、Sketchが使えるといった、小手先の技術はもちろん大切ですが、そもそも「良いデザインとは何か」という概念的なことを知っておくのは大切です。 そこで、今回は、ノンデザイナーでも押さえておくべき、デザインの原理原則がわかる8つの記事を簡単な説明とともにご紹介します。 企画書の作成、簡単なモックアップをつくる際にも役立つものばかりです。 配色技法 デザインをしていて「良い配色」が思い浮かばない… なんて時に読むと考えがまとまる記事です。 「良い配色」という、なんとなく持っている概念を、論理的に説明したい時には重宝します。ドミナントカラー、トーンイントーン、カマイユなど7つの配色技法を、具体的な例を用いて説明しつつ、配色によってもたらされる効果を知ることができます。 → 配色に悩んだときに、きっと役立つ7つの配色技法【基本】 配色パ
動画素材が手元になくても背景に動画敷くウェブサイトを作る工程 - MEMOGRAPHIX
このまえ、こういうサイト作った。 Azusa Colors Keynote Theme by sanographixこのサイトでは背景に動画を敷いている。背景に動画敷くサイト、最近よく見る。自分でいくつか作っているうちに徐々に作り方が分かってきたので書きます。 動画を用意するそもそも動画素材を用意するのがわりと大変で、日頃から素材を撮り貯めている人はあまりいないと思う。ぼくも今まで自分で撮った動画は、なんか公園で鳩が動いてる動画とか、使いどころのないやつばかりだった。 動画素材が手元にない場合、クリエイティブ・コモンズ・ライセンスで動画配布しているサイトがあるので、活用するとよい。 Mazwaiかっこいい動画がいろいろある。Life Of Vids - Free Videos for Designers, Web Creatives & anyoneこっちはCC0なのでライセンス表記不要。
[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js
最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。 モーダルウインドウとサイドバーのデモ コマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。 cta.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="src/cta.js"></script> </body> Step 2: HTML 一つ目のデモ「タイル状コンテンツ」のHTMLは、こんな感じです。 data
![[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b796beb0e3307e8d7086ea2aaa29efd7e12d443/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015042101.png)
ヘッダ、フッタ、ナビゲーション、見出しなど、Webサイトでよく使うパーツのデザインを集めたギャラリーサイトのまとめ
ヘッダ、フッタ、ナビゲーション、見出しなど、Webページでよく使う各コンポーネントやエレメントごとに国内・海外の素晴らしいデザインを集めているギャラリーサイトを紹介します。 眺めているだけで、さまざまなインスピレーションをもらうことができます！ ヘッダのデザイン フッタのデザイン ナビゲーションのデザイン 見出しのデザイン いろいろなパーツのデザイン ヘッダのデザイン
真似したい!使いたい!オシャレなCSSテキストエフェクト31個 | 楽天ティップスRakutenTips
CSS 3 Transform Experiment CSS3トランスフォームを使ったpure CSSトリック。モダンブラウザ＆IE9＋みたいなので使うサイトは選ぶかなっと。 Animated Text Fill javascriptを使わずcssアニメーションでストライプを表現したテキストエフェクト Text Animation 見出しに追加して置きたいアニメーション Elastic Stroke CSS + SVG SVGを使ったカラフルなテキストアニメーション Fun With CSS Text-Shadow イベント時などに使いたいテキストシャドーを使ったインパクトあるポップなテキストエフェクト Box-bubble Cutout in CSS 写真にフィルターを掛けた背景に合わせた日付入りボックス Fly in, fly out JS &CSSで実装するアニメーション Maske
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
いまさら聞けないSVG——Web制作に便利な3つの理由 (1/2)
スマートフォン向けのWebサイトやWebアプリを中心に、「SVG」がいま再注目されています。単なる画像フォーマットを超えて、最近ではさまざまな表現に広く活用されるようになりました。 本連載では、SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説。CSSによる装飾やJavaScriptとの連携など、すでに使っている人がもっと使いこなすためのテクニックも紹介します。（編集部） Webの表現を広げるSVGの魅力 SVGと聞くと、「単なるベクターの画像でしょ」と思う方も多いでしょう。確かにSVGは「Scalable Vector Graphics」の略なので、ベクター形式の画像フォーマットであることには間違いありません。 一方で、SVGには、PNGやJPEGといった、他の画像フォーマットとは異なる魅力があります。SVGをWebページに使うことで、これまでのHTMLやCSSだけ
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
【VIP】webディレクターだけど、初心者に役立つサイト教える てんこもり。
1: 以下、＼(^o^)／でVIPがお送りします 投稿日：2015/02/06(金) 17:42:31.05 ID:flJZIImcH 最近クソみたいなデザインとグッチャグチャのソースコード書いてる ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、 これからサイト作る初心者用にサイトを紹介していく これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ
WebGL HTML5 3Dなどのページ
HTML5ってスンゴイ事になっていますね。 これまでFlashで作成したいたコンテンツがJavaScriptで書かれていたり3D表現が可能だったり。 Web上で3Dが動くなんて聞いただけで「重たそう~~」そりゃムチャだ。 って思っていたんだけどコレがけっこう動いちゃう。 私の使っているMac環境10.5 Leopard では正直重たい。とても快適とは言い難い。というか、動かないページの方が多い。HTML5でWebGLを使った3D表現やCANVASを使った動的コンテンツはもはやLeopardは対象外という事みたい。 なのでHTML5上での3DコンテンツやCANVASタグを使った動的コンテンツはSnow Leopard環境以降が対象です。 Leopard環境がそんなもんだからこれに関してはPC環境を利用しているんだけど、家（IE）では検証が出来ない。 家は下の画像のようなエラー表示が貼られる。
Blenderで作ったモデルをスマフォブラウザで表示しよう！
みなさん、こんにちは！ GClueの下っ端社員の星です。 今回は、弊社で作成中のライブラリを使ってBlenderで作ったモデル（objファイルを表示してみたいと思います！！ Blenderは、フリーのモデリングツールです。 こちらからダウンロードできますので、興味がある方はダウンロードしてみてください。 http://www.blender.org/download Blenderで、以下のようなモデルを作成しました。 詳しい操作の仕方は、他のサイト様を探せば出てきますので、そちらで覚えて下さい。 以下の画像で、上の図がモデルにマッピングされたテクスチャで、下が作成したモデルになります。 汚らしい出来で申し訳ないです^^; テクスチャを出力する場合は、Blenderの標準のやり方でいいのですが、objファイルを出力する場合は、こつがいります。 以下のように項目を設定します。 左の赤枠のチェ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イラレマスタ
無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ
cow2design.com
Three_09