ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
[JS]とっても簡単な記述でアニメーションが実装できる単体のスクリプト -Move.js
Move#ease イージングは29種類用意されており、同時にアニメーションさせることもできます。 JavaScript move('#example-10 .box1').x(400).end(); move('#example-10 .box2').ease('in').x(400).end(); move('#example-10 .box3').ease('out').x(400).end(); move('#example-10 .box4').ease('in-out').x(400).end(); move('#example-10 .box5').ease('snap').x(400).end(); move('#example-10 .box6').ease('cubic-bezier(0,1,1,0)').x(400).end(); setTimeout(functio
グローバルメニューとかでマウスホバーしているリンク以外にCSSだけでブラー効果を与える - かちびと.net
JavaScriptでよく見かける、ホバー 状態のアイテム以外にエフェクトを かける、みたいなのをCSSで実装する という内容です。目新しい手法では 無いです。 サンプルはtext-shadowを使います。 Sample 親要素に:hoverを使って、全体にエフェクトをかけ、子要素の:hoverで元の表示に戻るようにするとホバーしてるアイテム以外にエフェクトがかかったように見えます。 .menu ul li a {/*メニューの基本スタイル*/ color: black; float: left; text-decoration: none; padding: 10px ; letter-spacing: 1px; } .menu:hover li a {/*親要素にホバーで子要素全体にエフェクト*/ text-shadow: 0px 0px 10px #555; color: #ddd;
日本の非営利（NPO）型オンラインメディアまとめ｜まだ仮想通貨持ってないの？
「ウェブメディアの運営を持続可能にし、中立性を保つためのひとつの手段としての非営利化」というグッドな記事を見かけたので、まとめてみました。 greenz 月間読者数14万人と、国内ではもっとも大きいオンラインの非営利メディア。株式会社で運営されていたものが、今年の4月末にNPO化しました。 【お知らせ】グリーンズがNPO法人になりました！ 「メディアとか対話の場を通してみんなが主役になれる社会をつくる」ことをミッションに活動していくとのこと。 レアリゼ こちらも本格的なNPOメディア。活動としてはメディアによる情報発信と、コミュニティ運営をなさっているようです。世界中のメンバーが書く「共同リサーチ」がなかなかリッチです。 みちのく仕事 NPO法人ETICと株式会社シゴトヒトが運営する非営利メディア。東北復興の現場を伝え、復興に関わる「右腕人材」を集めています。コンテンツの要であるインタビュ
個人のオンラインアクティビティをクールに見せる·Syte MOONGIFT
Syteは外部サービスからデータを取り込んで個人用サイトを作るソフトウェアです。 個人用のブログを持っている、GitHubアカウントもある、それ以外の外部サービスも色々使っている…そんなデータが点在してしまってパーソナライズされていないと考える人はSyteを使ってみましょう。 トップページです。ブログはTumblrを使っています。 ツイート表示。もちろんTwitterから取得しています。 GitHubのアクティビティ表示。 Dribbbleも対応しています。 Instagramの表示。格好いいです。 自作アプリケーションの紹介欄。 Syteが対応しているのはTumblr、Twitter、GitHub、Dribbble、Instagramとなっています。もちろんカスタマイズして独自のデータを追加することだってできるでしょう。デザインも格好よく、非常に面白いソフトウェアです。 Syteはnod
GithubにあるHTMLをレンダリングしてその場で表示出来るChromeエクステンション・Githtml - かちびと.net
個人的に嬉しいエクステンション だったのでご紹介。Githubにある リポジトリのHTMLをその場でレンダ リングし、デモとして表示させる 事が出来るChromeエクステンション、 Githtmlです。 タイトルにはChromeエクステンションと書きましたけど、Firefoxアドオンやブックマークレットもあるようです。 Githubに置いてあるHTMLをレンダリングしてその場に表示できます。Forkして編集してすぐ表示確認、とかもサクサク出来ますね。 ↑ エクステンションをインストールしてGithubのリポジトリをチェックすると上記のようなボタンが追加されますので、押すだけベープです。 ↑ 試しにForkしてからファイルを編集してみます。 ↑ 変更してエクステンションを使えばすぐに確認出来ます。 結構便利。 Githtml
[JS]スライダーやタブやページネーションなど便利な機能を少ないコードで実装する超軽量（8kb）のスクリプト -vanity
スライダー、タブ、ページネーション、ツールチップなど、ウェブページでよく使用するコンテンツをシンプルにより少ないコードで実装できるよう開発されたjQueryのプラグインを紹介します。 vanity jquery toolset [ad#ad-2] vanityは7種類のツールがあり、それぞれ8kbと超軽量のスクリプトとなっています。 機能はシンプルで、より少ないコードで簡単に実装できるように設計されています。 以下、7つのツールとそのコードを紹介します。 ※外部ファイル・スタイルシートは省略 スライダーのデモページ div要素やリスト要素で実装するスライダーです、スライドのエフェクトやスピードも調整できます。 HTML <!-- the slider content holder --> <div class="slider"> <!-- the elements inside the s
HTMLテーブルの内容からグラフを描画·AttC MOONGIFT
AttCはHTMLテーブルのデータをGoogleチャートを使ってグラフ化するソフトウェアです。 数値データを表示する際に最も簡単なのは一覧表で表示することです。HTMLで言えばテーブルタグで表示するのが一番簡単でしょう。しかしそれではデータの傾向が分かりづらい…そう思ったならAttCを使ってみましょう。HTMLテーブルのデータからグラフを作成してくれます。 こちらはパイチャート。 データを表示しました。 選択肢を変えればリアルタイムにグラフが変わります。 棒グラフ。 エリアグラフ。 折れ線グラフ。 AttCが使っているのはGoogleチャートAPIです。テーブルデータを読み取って、円グラフ、棒グラフ、エリアグラフ、折れ線グラフを表示してくれます。クリックだけでグラフの種類や表示項目を変更できるので、どのグラフで表示すべきか色々テストしてみるというのにも使えそうです。 AttCはHTML/J
TinyPNG : 透過PNGにも対応した画像サイズを圧縮してくれるサイト
TinyPNGはPNG形式の画像サイズを小さく圧縮してくれるサイト。 画像の劣化は見た目では判らないほど最小限に抑えつつも、最大限のファイル圧縮を目標としたサイトです。 とくにこのサイトの売りは、透過PNGに対応しているところ。 下の画像は背景が透明色のPNG画像ですが、左がオリジナルで右が圧縮済みの画像です。 オリジナルのファイルサイズが166.9KBのところ50.5KBに圧縮。実に70％のダイエットに成功しています。 実際見比べても圧縮率のわりにはほとんど遜色のない仕上がりになっていることが分ると思います。 圧縮作業で大きなウェイトを占めるのが画像の減色で、24-Bitから8-Bit（256色）に減色することによって、大幅なファイルサイズの減量に成功しています。 もちろん256色まで減色するので上の画像をよく見ればグラデーション部分の階調が少なくなっていたり、シャドウ部がやや赤みを帯び
4k Stogram : 指定アカウントの写真をまとめてダウンロードできるInstagramクライアント
4k Stogramは指定したInstagramアカウントの写真をまとめて閲覧／ダウンロードできるシンプルなデスクトップ・クライアント。 各種OS用のアプリケーションとして公開されており、お気に入りのユーザーの写真を一括ダウンロードしたり、自分の写真のバックアップ目的にと手軽に使用することができます。 アプリケーションをダウンロード／インストールして起動したら、目的のInstagramユーザー名を指定して『Follow』をクリックするとダウンロードが始まります。 ダウンロードされた写真が次々と表示されていき、コンテキストメニューの『Show in folder』でダウンロード先のフォルダーを開くことができます。 このソフトは単なる一過的なダウンローダーではなく、気に入ったユーザーをFollowして継続的に最新の写真をローカルにダウンロードすることを目的としています。 Followした複数の
[JS]簡単な記述で、軽快で滑らかなアニメーションが実装できるスクリプト -JSTween
オブジェクトの移動や拡大・縮小、不透明度の変更、CSS3のシャドウや角丸などを滑らかアニメーションで簡単に実装できるjQueryのプラグインを紹介します。 アニメーションのエフェクトは、31種類！ JSTween [ad#ad-2] JSTweenの特徴 JSTweenのデモ JSTweenの使い方 JSTweenの特徴 軽快に動作し、パフォーマンスに優れています。 アニメーションを使った複雑なインタラクションが実装できます。 フレームレートを使ったスムーズなアニメーション。 実装はjQueryベースで簡単。 簡単に始められ、シンプルに実行できます。 JSTweenのデモ
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
Animography : アニメーション化されたタイポグラフィー専門のWebショップ
PDFファイルを無料でdoc/bmp/jpgなどにコンバートできる「Zamzar」 : まだ仮想通貨持ってないの？
ウェブデザインのセンスを学ぼう、2012年上半期洗練されたディテールのUIデザインのまとめ
新着記事