[JS]CSSスプライトにフェードや移動、不透明度の変更を加えるスクリプト -bgFade<textarea name="code" class="html" cols="60" rows="5"> <div class="myButton"> Any text content you want here </div> </textarea>
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
「HTML5 Rocks」だけじゃない、ブラウザ各社のHTML5チュートリアルを集めました
Webブラウザを提供する主なベンダ、グーグル、マイクロソフト、モジラ、オペラ、アップルらは、HTML5への対応を急ぐと同時に、相次いでHTML5の魅力や内容をデベロッパー向けに紹介するサイトを開設しています。この記事では、それらをまとめて紹介することにしましょう。 グーグルの「HTML5 Rocks」 グーグルは6月22日に開発者向けにHTML5を紹介し、学習するためのWebサイト「HTML5 Rocks」をオープンしました。 HTML5 Rocksは現在3つのコーナーに分かれています。 1つ目は「Interactive Presentation」。これはHTML5の新たなAPI、DOM APIやLocal Storage、WebWorkerなどさまざまな機能を紹介するプレゼンテーション。機能と共にJavaScriptでのコーディング例や実際に動作するデモなどが用意されており、HTML5の
960 Grid System
960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
Free images - 4 Free Photos
Download free images from 4 Free Photos stock photo library.
Overflow: hidden; - CSS Tutorial - Correcting Orphans w/ Overflow - CSS Overflow Tricks and Tips | HTML/CSS Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka
Latest Word » Tutorials » Correcting Orphans w/ Overflow May.2.2010 Correcting Orphans w/ Overflow Tags: Beginner, Quick Tip The overflow property in CSS can be used in various ways and comes in handy when correcting bugs. Below are some tutorials that demonstrate how to clear up some common issues using the overflow property. After checking them out, I have one more to add to the list. The CSS Ov
【公式】ハイローオーストラリア｜新機能：ジャックポット・キャッシュバックプログラム￤HighLow.com
ジャックポットについて特別なキャッシュバック取引約定後に、幸運なプレイヤーは最大100,000円のキャッシュバックが当たります。また、Highlowロイヤルティ・ステータスが高いほど当選確率・金額が上昇します。
PHPで予め許可したタグと属性以外を除去できるライブラリ「kses」:phpspot開発日誌
CSS3のでのボックス要素デザインを圧倒的に簡単化できる「CSS3 Click Chart... 次の記事 ≫：アプリやWEBサイトに使えそうなフリーな244個のアイコンセット kses - PHP HTML/XHTML filter | Download kses - PHP HTML/XHTML filter software for free at SourceForge.net PHPで予め許可したタグと属性以外を除去できるライブラリ「kses」。 外部からの入力値は基本的にhtmlspecialcharsでタグを無効化するのが通常の考え方ですが、掲示板なんかで特定のタグを許可したいという場合があります。 PHPにはstrip_tagsというようなタグを除去しつつ、特定のタグのみを残すという関数が標準であったりしますが、これだと属性までは制御しきれません。 更には、<a href=
[JS]IEでフォームのselect要素の中身が省略されてしまうのを解消するスクリプト -ieSelectWidth
IEでフォームのselect要素にwidthを指定した際、はみ出した箇所が省略されてしまうのを解消するスクリプトを紹介します。 Internet Explorer Select Width Bug Workaround デモページ 対応ブラウザは2010年6月17日の時点でIE6, 7, 8で、スクリプトを使用すると他のブラウザ（Firefox, Chrome, Safari, Opera）と同様に省略されずに表示されるようになります。 ※IE6には別途bgiframe Pluginが必要です。 スクリプトでは他の機能として、スクリプト側でのwidth指定、margin/padding/borderの設定も可能です。 設置は簡単で、既存のフォームにも簡単に適用できます。 jquery.jsとjq.ie-select-width.jsを外部ファイルで記述し、下記のスクリプトを記述します。 J
OmniGraffle Wireframe Stencils [Archived] | Konigi
AboutThis is a set of shapes for making wireframe in OmniGraffle 5 Pro or OmniGraffle 6 (Mac OS X). It consists of most of the basic elements you'll need to create user interface specifications. No Installation Required!The stencils ship with OmniGraffle! Find them in the Software category. To download them anyway, get the file and open it, when it appears click the Install button. DownloadDownloa
10 Beautiful Free Hand-Drawn Icon Sets
For the more adventurous individuals among us looking to step outside these preconceptions of what icons should look like, hand-drawn themes that embody intentional asymmetry can be a better option for setting a user interface apart. This post highlights 10 such icon sets that you can download free of charge and utilize in your designs, user interfaces, and operating systems for an organic and non
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳 v0.1 documentation
この和訳について¶ この文章は Google JavaScript Style Guide を非公式に和訳したものです. 内容の正確性は保証しません. ライセンスは原文と同じく CC-By 3.0 とします. フィードバックは Issue への登録 , あるいは Kosei Moriyama (@cou929 または cou929 at gmail.com) へ直接お願いします. この和訳のリポジトリは こちら です.
Closure Compiler Service
// ==ClosureCompiler== // @compilation_level SIMPLE_OPTIMIZATIONS // @output_file_name default.js // ==/ClosureCompiler== // ADD YOUR CODE HERE function hello(name) { alert('Hello, ' + name); } hello('New user');
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
手元の画像からシームレスなパターン画像を作成するオンラインサービス -Repper
画像ファイルやライブカメラ画像の一部を抽出して、背景や壁紙などに最適な継ぎ目のないシームレスなパターン画像を生成するオンラインサービスを紹介します。 スケールの移動に伴い、パターンも変化 利用方法は登録を必要とせず、簡単です。 サイトにアクセスします。 Repper Lite 画像ファイルをアップロードします。 「1. pickup image」の「upload」をクリックし、画像を指定しアップロードします。画像のフォーマットはJPEG, GIFで、サイズは600px以下のようです。 ライブカメラを使用する場合は「video」をクリックします。 アップロードした画像は「2. create your pattern」に表示されるので、スケールを移動して好みのパターンを生成します。 パターンが決まったら、保存します。 「download pattern」をクリックすると、パターン画像がダウンロ
[CSS]非対応ブラウザにも配慮したCSS3で実装するボタンのチュートリアル
ビギナーにも分かりやすくステップごとに解説された、CSS3でスタイリングしたボタンを実装するチュートリアルを紹介します。 Create a CSS3 Call to Action Button 下記は、各ポイントを意訳したものです。 Basic HTML まずはHTMLから始めましょう。 標準的なリンク要素に「.btn」というclass名をつけます。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="linear"> <a href="http://www.sixrevisions.com" class="btn">CLICK THIS BUTTON</a> </div> </textarea>
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
ナナホシブログ - 秋葉（とみた）ちひろ
前回のエントリーでエンジンをかけるといってからいろいろなことが始まり、てんわやんわのままこなす毎日ですがとても充実しています。 各回ごとの告知やレポートがまったくできておらず、ここでまとめてになりますがいろいろと記録しておきます。 CSS Nite in OSAKA, Vol.32 CSS Nite in OSAKA, Vol.32 Webデザイナーが... Recent Entries Diary エンジン （2012.07.21） Diary 引っ越して1ヶ月、気づいたこと （2012.07.20） Seminer 東京に移ってはじめてのセミナー・イベント （2012.07.16） Diary 家電から学んだこと〜コミュニケーションデザインと、新しい時代に適応すること〜 （2012.06.21） App Pinterestで「ゆずりますリスト」をつくってみた （2012.06.05）
RedLine Magazine : CSS セレクタ総復習 （2010年5月版）
CSS セレクタ総復習 （2010年5月版） CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。本来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。 Selectors Level 3 http://www.w3.org/TR/css3-selectors/ 選択子 http://zng.info/specs/css3-selectors.html (日本語訳) ※下記内容で、サンプルページを用意したセレクタもあるんですが、当然、各セレクタに対応しているブラウザとそうでないブラウザがあります。対応していないブラウザでサンプルページを見ても再現できません。 目次 * (汎用選択子) E (型選択子) E[foo] (属性選択子) E[foo="bar"] (属性選択子) E[foo~="bar"] (属性選択子
RedLine Magazine : ブラウザ(Win) CSSセレクタ対応状況まとめ （2010年5月14日版）
最近のコメント PHP オブジェクト指向の勉強 └ Red - 2010.01.08 └ hogepage - 2010.01.21 └ Red - 2010.01.22 └ - 2011.11.27 └ houseiii - 2011.11.27 Fireworks トリミング画像を一括書出 CS4編 └ Iper - 2009.06.27 └ Red - 2009.06.27 └ mala - 2011.11.17 └ Red - 2011.11.18 jQueryでボックスを上下左右中央に簡単配置 └ ミラクル - 2009.03.15 └ Red - 2009.03.15 └ entZ - 2011.10.22 └ Red - 2011.10.24 overflow を使用したボックス背景のこと └ - 2007.12.13 └ Red - 2007.12.13 └ - 2007.
もう配色には困らない！「Adobe Kuler」
写真から配色パターンを自動作成！ マイテーマを作ろう 「他人が作った配色」だけでも相当遊べるKulerだが、そのうち本来の目的である「配色パターンの作成」を試して、ぜひ“マイテーマ”を作ってみたいもの。とはいえ、何もないところから色の組み合わせを考えるのは、やっぱりちょっと面倒くさい……。そんなものぐさな人にも便利な方法がある。 1つは、すでにある（誰かが作った）テーマをもとにカスタマイズする方法。先ほど紹介したとおり、各テーマの詳細画面にあるアイコンをクリックするだけで、配色パターンの編集画面に移動できる。編集画面ではPhotoshopでもおなじみのカラーホイールを使って簡単に色を選択できるので、気に入らない色だけをちょっと変えてみてもいい。また、設定した「ベースカラー」を基準として、Kulerにある程度お任せでテーマを作ってもらうのも可能だ。 もう1つ、画像をもとに自動的に配色パターン
[JS]フォームの入力欄にラベルをくっきりうっすら表示するスクリプト
フォームの入力欄にラベルを通常時にくっきり、フォーカス時にうっすらとアニメーションで表示するスクリプトを紹介します。 jQuery FormLabels Plugin デモページ スクリプトの特徴 クロスブラウザ対応。 ラベルをアニメーションで表示。 多数のオプションと旧式ブラウザへの配慮。 フォームのマークアップを変更しないシンプルさ。 フォームのラベルはinput要素と同じスタイルが可能。 パスワードのラベルはアスタリスク（*）ではなく、テキストで表示。 スクリプトのデモ デモページではいくつかのデモがありますが、デフォルト版のものをキャプチャで紹介します。 デモページ 入力時には入力したテキストが反映されます。 スクリプトの仕様 以下のフォームの要素に対応しています。 input[type='text'] input[type='email'] input[type='passwor
Photo Zoom Out Effect with jQuery | Codrops
Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering […] Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websi
iOS 17 - Apple Developer
ウィジェットとライブアクティビティ ウィジェットがさらに多くの場所で活用できるようになり、パワーアップしました。WidgetKitを使ってインタラクティブな要素やアニメーションによるトランジションに対応すると、ユーザーがウィジェットから直接アクションを実行できます。既存のウィジェットにわずかな変更を加え、iOS 17向けに再ビルドするだけで、iPhoneのスタンバイ画面、iPadのロック画面、Macのデスクトップ上で視覚的に美しく表示させることができます。SwiftUIを使用すると、ウィジェットの色と間隔がコンテキストに合わせて自動調整されるため、複数のプラットフォームで使いやすさが増します。 WidgetKitとActivityKitで構築したライブアクティビティがiPadで利用できるようになり、ユーザーはアプリのアクティビティや情報をロック画面からいつでもリアルタイムで確認できます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォームのテキストエリアをより使いやすくするテクニック集
奥行きを与える立体的なエレメントを使用したウェブデザイン集
HTMLのさまざまな要素をグラフィカルにしたフリーのアイコン -Chalkwork HTML
Icon Reference | Hicksdesign
Yahoo!スポーツ×スポーツナビ 2010 FIFA ワールドカップ
三井住友銀行