Googleマイマップで描いた地図をGoogle Maps APIで貼り付ける方法:Geekなぺーじ
最近公開されたGoogle Mapのマイマップ機能を使って描いた地図をGoogle Maps APIで貼り付ける方法を説明したいと思います。 マイマップで作った地図データは、KMLとして取得できますが、このKMLを使ってGoogle Maps APIで再利用できます。 マイマップでKMLを生成 最初に、マイマップ機能でKMLを生成します。 まず、http://maps.google.co.jp/の左側にある「マイマップ」タブをクリックします。 その後、「新しい地図を作成」をクリックしますが、ここでGoogleアカウントへのログインが必要になります。 Googleアカウントを持っていない人は、必要に応じて取得しましょう。 メールアドレスがあれば無料で取得できます。 次に、Google Mapのマイマップ機能を使って色々描いてみます。 描き終わったら、KMLファイルをダウンロードします。 マイ
デザインのインスピレーションを効率よく得るためのサイト「FAVEUP」
ロゴデザイン、名刺デザイン、Flashのサイト、CSSのサイトの4種類に分かれており、それぞれについて「これは！」というようなデザインのインスピレーションを得ることができるサイトです。各デザインには投票によってランクがつけられており、高ランク順に並び替えることもできるので、効率よくかっこいいデザインを探すことができます。 アクセスは以下から。 Design Inspiration Gallery - FAVEUP http://www.faveup.com/ ロゴの場合（新着順）（高ランク順） 名刺の場合（新着順）（高ランク順） Flashを使ったサイトの場合（新着順）（高ランク順） CSSを使ったサイトの場合（新着順）（高ランク順）
CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU
DiaryTechnology CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 ちょっと実装したくなったので、CSSでDivを天地左右中央に配置してみました。 Web creatorsに載っていた方法ですw。 » Web creators (ウェブクリエイターズ) 2007年 03月号 ■CSSは↓。 <style type="text/css"> body { background:#ccc; margin:0; padding:0; } #wrap { position:absolute; width:500px; height:100px; left:50%; top:50%; margin-left:-250px; margin-top:-50px; background:#ff
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
Photoshopで透過デザインのフォルダアイコンを作る方法『How to Make a Folder Icon』 – creamu
かっこいいアイコンが作りたい。 そんなあなたにおすすめなのが、『How to Make a Folder Icon』。Photoshopで透過デザインのフォルダアイコンを作る方法だ。 以下にご紹介する。 1.backgroundを透明に、128×128の新規ドキュメントを作成。 2.新規レイヤーを作成、ペンツールでフォルダを描く。 3.以下のセッティングを適用。 Gradient Overlay #FFd27A -> #FFB912 Stroke Size: 1px Position: Outside Color: #C07C33 Inner Glow Blend Mode: Normal Color: #FFFFFF Choke: 100% Size: 1px 4.レイヤーを複製し、形をフォルダが開いたデザインに整える。 5.新規レイヤーで紙を描画。フォルダの上に置く。 6.レイヤーパレ
jQuery Corner Demo
This plugin was originally written by Dave Methvin. Dave and I collaborated on several improvements and the project is now hosted on github. The most recent version is also available here: jquery.corner.js. It's important to understand that this corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div "strips" to the item to be cornered and sets a solid
CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ - GIGAZINE
CSSを使って吹き出しを作成することができるCSSファイルとJSファイル、それから画像ファイルをひとまとめにしたセットです。XHTML1.0準拠で、Internet Explorer 6 と 7、Firefox 2.0、Safari 2.0、Opera 9.0で動作確認ができています。 ダウンロードは以下から。 willmayo.com >> CSS Speech Bubbles 実際のサンプルは以下にあります。 CSS Speech Bubbles 角をまるくしているのは、「curvyCorners」を使用しているとのこと。 ほかにもこの吹き出し方のものは以下に多くあります。 入力欄（フォーム）部分をマウスでクリックすると吹き出しが出てくるタイプ Tooltip for forms リンクの上にマウスを乗せると吹き出しが表示されるタイプ Ajax tooltip リンクの上にマウスを乗せ
Modals | LivePipe
Modals are very commonly used on the web, when you might want to show some additional content without leaving the page, for example, showing a login form. If you’re trying to add one to your website, check out these examples. jQuery Modal https://jquerymodal.com This jQuery plugin is very simple to use, so you can be up and running in minutes. If you want to quickly add a modal to your site, this
ドロップシャドウの効いた角丸ボックスを表現するjavascriptライブラリ | ユージック
ドロップシャドウの効いた角丸ボックスを表現するjavascriptライブラリ 2007年3月26日 ドロップシャドウの効いた角丸ボックスを表現するjavascriptライブラリの記事を見つけたのでご紹介します。 ShadedBorder – JavaScript Round Corners with Drop Shadow 使い方はいたって簡単です。上記URLに記載のshadedborder.jsをダウンロードし解凍してからスクリプトを外部読み込みします。 <script type="text/javascript" src="shadedborder.js"> （X）HTMLは下記だと想定します。※classでsbは指定しておいてください。 <div id="round_me" class="sb"> <p> </p> </div> ボックスにCSSをつけます。 #round_
ruzee.com - Steffen Rusitschka » ShadedBorder - JavaScript Round Corners with Drop Shadow
Coding, Consulting, DevOps Web, Cloud, Scalability You should also check out my script Liquid Canvas which uses HTML canvas to render rounded corners with drop shadows. Rounding corners with JavaScript has a long history. Everything started on 16th of March 2005 with Nifty Corners and loads of other libs followed. RUZEE.ShadedBorder itself is the successor of RUZEE.Borders, which was the most feat
Spiffy Corners - Making anti-aliased rounded corners with CSS
Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff.
Lucky bag: : blog: 背景画像に使える透過 GIF
斜線やストライプの背景画像を Photoshop とかで作ると、色を変えたくなった時にそのたび作り直しってのが面倒。便利で使ってる人も多いかもしれない secondlife さんの Background Image Maker でもそれは同じかな。んで、Photoshop とかで作る場合に、線に色を付けて作るんではなくて、色を付けたい部分を透過にして作っておいて CSS で background-color を指定するやり方にすれば、色を変えたくなった時はCSS で背景色を変更するだけで良いじゃんって、Super Stripes を見て目からうろこ状態。早速インスパイヤしてみた！ 使ってみたい GIF 画像をダウンロードして、CSS で背景画像に。あとは、背景色で好みの色を指定するだけ。ちなみに、サンプルでは背景色を #fa0 と指定している。 斜線 oblique-line_1px.gi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
使えそうなjQueryプラグイン
http://youmos.com/news/curvycorners.html
WEB制作者のための32個のブックマークまとめ（part2）*ホームページを作る人のネタ帳
ストライプジェネレーター5つ - DesignWalker
Dr. Web Weblog ? Blog-Archiv ? Collection of Web 2.0 Navigation Menus
Open Web Design - Download Free Web Design Templates
Web 2.0 how-to design style guide
CSS Tips：メモランダム
