webデザインに関するkorokoropのブックマーク (7)

  • JavaScriptを楽しく学べるRPG CodeCombat

    前回、Rubyを楽しく学ぶコンテンツのエントリで紹介したRuby Warriorが楽しいという声を幾つか見かけました。 オンラインでコーディングできるサービスは色々ありますが、デザインや音楽ゲーム性が優れていて熱中しやすいのでしょう。 残念ながら私は参加できませんでしたが、今月のGinza.rbもRuby Warriorをみんなでやってみるという催しで盛り上がったようです。 RubyWarriorのBGMが中毒性高い。しばらく口ずさんでしまいそう。#ginzarb— Masatoshi Iwasaki (@masa_iwasaki) April 15, 2014 RubyWarriorに集中していてだれもツイートしてない^^; #ginzarb— 高橋 明 (@Talos208) April 15, 2014 今回は同様にゲーム感覚でJavaScriptを学習でき、日語化もされているC

    JavaScriptを楽しく学べるRPG CodeCombat
  • 商用利用可能でハイセンスな無料写真素材サイト「IM FREE」|男子ハック

    @JUNP_Nです。センスのいい高解像度な無料写真素材サイト「IM FREE」のご紹介。海外のサイトですが、日の無料写真素材サイトにはないような素材が多いので覚えておくといいかもしれません。 日にはないセンスの写真素材サイト!カテゴリ分けで写真も探しやすい!日国内での無料写真素材と言えば「PAKUTASO」が大好きでよく使わせて頂いているのですが「IM FREE」は海外のサイトならではの、センスのある写真が多数掲載されています。 関連:国内外のフリー画像素材サービスまとめ48サイト(2013年冬版) 今回紹介するサイトに掲載されている写真素材は全て商用利用可能です。 IM Free - Free Design Resources | Free Images カテゴリ毎に分けられているので、写真を探すのも便利。現在は19のカテゴリに分類され「AMBIENT」「ART&MUSIC」「BU

    商用利用可能でハイセンスな無料写真素材サイト「IM FREE」|男子ハック
  • DESIGNERS UNION | ご自由に投稿できます。 お気軽にご利用ください。

    ロンドンで開催中の「Refik Anadol: Echoes of the Earth: Living Archive」のためのインタビュー記事。 視覚的に心地良いだけではなく、コンセプト、アルゴリズム、テクノロジー、アクティビティがどれも素晴らしいです。 「ラージ・ネイチャー・モデル」という自然界に特化したオープンソースの生成AIモデルを、大学、博物館、図書館などの協力と彼自身の実地調査で構築したそうです。 また、わかりにくいところをうまく説明してくれてます。 「この展覧会で最大の作品はデータ・ウォールです。データがどこから来たのか、どのように収集したのか、どのようにAIをゼロから構築したのかを見ることができます。この芸術には美しさ以上のものが必要です。私はもっと多くのことを分かち合うために最善を尽くしています。」 「ラージ・ネイチャー・モデルは単なる技術的な偉業ではなく、自然界の驚異へ

  • 知らないと損!ウェブデザインに特化したPhotoshopの効率的な89の時短テクニック -神速 Photoshop Webデザイン編

    Photoshopを毎日使うウェブ制作者はぜひ目を通してほしい、Photoshopを自分の手足のように使えるようにするノウハウ、同じ結果でも遙かに時間が短縮されるテクニックが満載のオススメを紹介します。 同サイズの画像をスライスするのに5分かかっていたのが1分で! 10px以下の小さな文字を鮮明にするのに10分以上かかっていたのが5分でよりキレイに! など実用的な技が満載です。 「神速 Photoshop Webデザイン編」ではウェブデザインの現場でPhotoshopを使う時に役立つ情報が満載! Webデザインに特化したPhotoshopの環境設定方法から、すばやいスライス、効率的なカンプの作成、デザインのバリエーションを楽につくるなど、実践的なテクニックや便利なツール、そしていざという時の「直し」に強いデータをつくる方法など、デザイナーの時間を大幅に短縮します。 神速デザインの5箇条

  • jScrollPaneでスクロールバーを自作した際の覚え書き | ウェブ制作日記

    このブログのフッター部分にはwordpressのプラグイン「Twitter Widget Pro」を使って僕のタイムラインを表示しています。 その際にどうしてもディフォルトのスクロールバーを使うのが嫌だったのでスクロールバーを自作してみることにしました。 しかし、どうせならjqueryのプラグインでいいものがあるんじゃないか? と思い検索してみると「jScrollPane」というプラグインを発見しました。 jScrollPaneのダウンロードとファイル構成 まずはここから必要なファイルをダウンロードします。 上の図の赤枠内の「jquery.jscrollpane.min.js」「jquery.jscrollpane.css」「jquery.mousewheel.js」の三つを使用します。 ちなみに必須となるのは「jquery.jscrollpane.min.js」「jquery.jscro

  • PCではマウスホバー、スマフォではタップで動作するレスポンシブなドロップダウンメニューを実装するjQueryプラグイン・FlexNav

    レスポンシブWebデザイン対応サイト向けのドロップダウンメニューを実装する為のスクリプト・FlexNavのご紹介です。なかなか使い勝手も良さそうな印象でした。 PCサイトではマウスホバーによるドロップダウン、スマフォではタップで降りるコンパクトなメニューに切り替わります。 ネストされたメニューにも対応していますのでこのまま利用しても大丈夫・・かな。(まだ詳しく見てないです) <ul class="flexnav" data-breakpoint="800"> <li>Menu01</li> <li>Menu02</li> </ul>カスタムデータ属性でブレークポイントを設定します。em単位でもセッティングできるみたい。 $(".foo").flexNav({ 'transitionSpeed' : '0.4s', 'itemHeight': 50 });降りてくるスピードなどはオプションで

    PCではマウスホバー、スマフォではタップで動作するレスポンシブなドロップダウンメニューを実装するjQueryプラグイン・FlexNav
  • [JS]レスポンシブ対応のシンプルながら高性能なすごいナビゲーション! -Resposive Nav

    jQueryなどに依存せず単体で動作し、スクリプトがオフでも機能し、実装も非常にシンプルで、デスクトップやタブレット・スマフォそれぞれで最適な状態で表示し、IE6にさえ対応し、しかも超軽量のスクリプトを紹介します。 シンプルで、セマンティックなマークアップ 1.8KBの超軽量スクリプト 外部ライブラリは不要 CSS3アニメーションを使った美しいエフェクト タッチイベントをサポート クリックとタップの違いを調整 スクリプトがオフでも機能 MITライセンス 対応ブラウザ IE6をはじめ、デスクトップ・タブレット・スマフォの主要なブラウザ全て。 以下は、テスト済みのプラットフォームです。 iOS 4.2.1+ Android 1.6+ Windows Phone 7.5+ Blackberry 7.0+ Blackberry Tablet 2.0+ Kindle 3.3+ Maemo 5.0+

    korokorop
    korokorop 2013/04/11
    これは楽そうできれいで良い。
  • 1