マウススクロールで「SVGグラデーション」を動かそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのドリルです。 今回はマウススクロールで、SVGグラデーションを動かすというアニメーションをご紹介します。 SVGについてもしご存知なければ、ぜひこちらの記事をご参照ください。 SVGグラデーションの配置 HTML 横200px、縦200pxの四角形を描画しています。 linearGradient要素のx1、y1はグラデーションの始点、x2、y2はグラデーションの終点です。この場合、四角形の左上から、右下にかけてグラデーションさせています。 色に関しては、始点は赤、終点は青に設定しています。 四角形の塗りは、g要素、fill属性の中に、linearGradient要素のidを記述することで、グラデーションが適応されます。 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> <def
新機能- Intelligent TieringによるAmazon S3の自動的なコスト最適化 | Amazon Web Services
Amazon Web Services ブログ 新機能- Intelligent TieringによるAmazon S3の自動的なコスト最適化 Amazon Simple Storage Service（S3）は12年と半月以上にわたり使用されており、数兆ものオブジェクトを格納し、毎秒数百万件のリクエストを処理します。お客様は、バックアップ＆リカバリ、データアーカイブ、データレイク、ビッグデータ分析、ハイブリッドクラウドストレージ、クラウドネイティブストレージ、災害対策のニーズにおいて、S3を活用しています。初期の頃の、汎用的なStandard (標準)ストレージクラスに始まり、その後ストレージクラスを追加して、よりよくお客様にサービスしてきました。現在では、4つのストレージクラスを選択することができ、それぞれのクラスはある特定のユースケース向けに設計されています。現在のオプションは以下の
初心者でもPython用Webフレームワーク「Flask」について学べるコンテンツ5選
Photo by David Mulder こんにちは、谷口です。 「Pythonを使ってWeb開発」と言うと、Djangoが思い浮かぶ方は多いかと思います。Djangoは多くの機能を取り揃えたフレームワークで、デフォルトの機能や連携出来るライブラリが非常に豊富なため、比較的素早く簡単にWebアプリケーションを作ることができます。 ただ、実務で通用する開発エンジニアを目指しているのであれば、フレームワークの構造や「どこで何が起きているか」「こう書くとなぜこう動くのか」を、ある程度理解しておく必要があります。そこで、フレームワークの中で何が行われているかをもう少し学びたい方は、Flaskのような小規模なフレームワークを使ってみることをおすすめします。 Flaskは小規模でシンプルなつくりのPython用Webアプリケーションフレームワークで、Webアプリケーションの構造を順を追って理解するの
第一回 プログラマ向けデザイン勉強会 #design4p で「ズルいデザインテクニック」発表させていただきました。 - 納豆には卵を入れる派です。
どうも。 書くのが遅くなりすぎてもう半月ほども前のことになってすごく今更感があるのですが、書いておくべきことを書きそびれると、その後出てくる他の書きたい小ネタがどんどん書けなくなっていってドンづまるパターンになるので、やはり書いておきますね。。 先日、第一回 プログラマ向けデザイン勉強会というイベントで下記のスライド発表させていただきました。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck 反響の大きさに驚き！ありがとうございました。 実はあんまり発表自体は、盛り上がったという手応えがあまりなくて、一方で他の2人の発表が素晴らしすぎて、割としょんぼりしながら帰ってきたんですが、スライドをアップロードしたらあれよあれよという間に2000ブクマ超え…驚きました。読んで下さった皆様、ありがとうございました。何が原因だったのか考えてみたのですが、デザイン
Your Web, documented. · WebPlatform.org
Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github. New documentation can be found at MDN Web Docs. Your Web, Documented. The latest information on how to use the technology that runs the web — HTML, CSS, JavaScript and more. WebPlatform.org is a work in progress. We could use your help in making it bett
ウェブサイト高速化勉強会に参加してきた #tnmk0929 - Diary of absj31
ウェブサイト高速化勉強会 : ATND 2012/09/29 ウェブサイト高速化勉強会 #tnmk0929 - Togetter さくらのVPSにてサーバ＆ドメイン取得を行った流れもあり、個人用鯖にも何らかのWebコンテンツを配備・公開して行く事になるだろう(てかそういう風にして行きたい)と言うのもあり、ちょうど目にしたこちらの勉強会に目が留まり、参加して来ました。 なので現状のWebサイトを高速化させるために、ってのではなくて今後のために、という意味合いが強いですね。 会場は横浜タネマキ。最近は個人的にはYokohama.groovy等で2週間に一遍は使ってる感じですね。 タネマキ 【コワーキング ＆ シェアオフィススペース】 開始間際、ディスプレイ接続で調整が上手く行かず10分程押した後スタート。 Web Site Optimization for Beginners こもり まさあき
スマートフォン向けのHTML5製フレームワーク・Lungo.js
今更ですけどLungo.jsを少し触って 見ました。Lungo.jsはHTML5+CSS3の スマートフォン向けフレームワーク です。jQueryやmootoolsなどを必要 としない非依存型のライブラリです ので覚えておいて損は無いかも。 スマフォ向けフレームワークです。GPLv3ライセンスでOSSとして公開されています。 スマフォ向けのフレームワークは相当出回っていますので珍しくないかもですけど・・触った感じはなかなか使いやすそうでした。コアファイルは非圧縮で40kbほど。 以下、公式サイトのサンプルです。 Sample スターターキット的にも使えそうです。 ↑ 実機でのスクリーンショット この手のは沢山あるので好みで選べばいいですね。詳細は以下でどうぞ。 Lungo.js
シンプルでどんなデザインにもあわせやすい最近のフリーアイコン素材
Freecns / Glyph UI Icon Set - Icon... / Free Icons Set designed ...他...全9件
【インタビュー】「Google」から「Giftee」まで、ウェブデザインを手がけて10年。「いま、ここでしかできない」を形にすること | Startup Dating [スタートアップ・デイティング]
「Google」や「オロナイン」など有名企業と仕事をする一方で、「greenz.jp」や「Giftee」などスタートアップのウェブサイトも手がけるnD inc.のウェブデザイナー、中原寛法さんにインタビュー。 いまの仕事をするようになって今年で10年。ウェブデザインは自分にとって「遊び」に近いと話す中原さん。いつでもアイディアに溢れてる彼が、余暇時間でつくったユニークなサイトなどを交えてお伝えします。 画像工学科を経て、大学院ではユニバーサルデザインを学ぶ 昔からデザインへの関心が高く、中学3年生くらまで積み木が異常に好きだったと話す中原さん。同じ車の形を少し色やパーツを変えて何度もつくってみたり。そんな彼が、高校生のときに初めて知ったのがMacの存在。NHKの番組に出演していたグラフィックデザイナーの立花ハジメさんが、撮った写真を加工する方法を教えているのを見たことがきっかけ。何これ！と
私がウェブサイト作成時にお世話になっているサイトをご紹介
こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。 有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。 Webデザインギャラリー | I/O 3000 まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。 このようなギャラリーサイトは他にもありますが、ページ変遷なしで次を読み込むのでとても見やすいです。 他にはこんなサイトをよく見ます。 WEBデザインの見本帳 Web Design Clip 【Webデザインクリップ】 【HTMLタグの簡単検索】TAG index - ホームページ作成情報 プロの方はPhotoshopで描いてからコードを書いていくみたいですが、私は最初からHTMLを書いていきます。 一応Drea
[CSS]アロー付きの吹き出しのスタイルシートが簡単に作成できるオンラインツール -CSS Arrow Please!
設定はすぐに反映され、左のパネルにスタイルシートが表示されます。 [ad#ad-2] HTML 使用するHTMLは、下記のような感じでokです。 <div class="arrow_box">ふきだし</div> CSS 生成されるスタイルシートはアローやボーダーのみなので、吹き出しのサイズなどは別に指定して利用してください。 .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: no
Google +1 ボタンを設置してみました + Tips を少し - WebOS Goodies
Google が任意の Web ページに設置できる +1 ボタンを公開したので、さっそく貼り付けてみました。上のツィートボタンの横にある「+1」と書かれたのがそれです。 Google アカウントをお持ちの方、ポチっとやっていただけると嬉しいですｗ この +1 ボタンですが、実はとても簡単に設置できます。 HTML コードを生成するウィザードがあるので、サイズとか何とかを指定して、取得した HTML をページに挿入するだけ。なんと既に日本語のドキュメントも公開されているので、詳細にカスタマイズすることも可能です。 ただ、少しドキュメントが間違っている（というか API がバグっている）ところもあったりしたので、そのあたりも含めて記事にしてみました。 +1 ボタンとは 日本ではまだあまり役に立たないのでご存じない方も多いと思うのですが、 +1 ボタンというのは、言わば Google 版の 「い
Gumroad
3DPerfect your craft with the same tools used at Dreamworks and Pixar. 16K creators 90K products 20M sales DesignCode, design, and ship your dream product with these technical resources. 24K creators 95K products 29M sales Drawing & PaintingTutorials, plugins, and brushes from pro concept artists and illustrators. 19K creators 113K products 26M sales
2011年・印象に残ったWebデザインいろいろ
さて、晦日ですね。いつまで更新するんだ って感じですけどｗ個人的には年末年始も クリスマスもあまり関係ない環境なので 普段と変わらず更新します。今日は、今年 印象に残ったWebデザインのサイトのまとめ です。 明日で今年最後ですねー。1年お疲れ様でした。因みに、このブログは僕個人のメモなので僕が仕事してるうちはアホみたいに更新されます。お暇でしたらご覧下さい。 さて、年末なので1年の間で印象に残ったデザインを残して来年と比較して見たいと思います。来年もこのサイトが存在するか分かりませんがｗ去年もやればよかったなぁと思いつつ。ほぼ海外サイトになります。国内のは見つけやすいと思いますので結構割愛。 適当にジャンル別にしてみました。解説は野暮だと思うのでしないようにしてます。1ジャンル3サイトに絞っています。ジャンル名は適当、順不同です。リンクは画像にしています。 Fullscreen写真や動画
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web API Design - 開発者が愛するインターフェイスを作る
http://blog.fukaoi.org/2010/09/09/Jetty%E3%81%AEdeploy%E4%BB%95%E6%A7%98%E3%81%8C%E3%81%8A%E3%81%8B%E3%81%97%E3%81%84%E3%81%A8%E6%80%9D%E3%81%86
レスポンシブWebデザインで作られた凄いWebサイト
IBM Developer
TechCrunch | Startup and Technology News
so-network.biz