CSS3によるTransition Effects 30
最近、はてブでも話題になったAppleのHTML5 Showcase。 iPhoneやらiPadのWebApp開発の勉強として、HTML5やCSS3についてもう少し勉強しておこうということで、差し当たってHTML5 Showcaseを参考にTransition Effects Sampleを作って見ました。 CSS3 Transitions Collection 30（Safari4以上で閲覧してください） 作ったEffectはHTML5 Showcaseで紹介されていたものを含めて30種類。 おなじみの「Cube」やアニメの登場のような「Squish」、Appleタイムマシンのような奥行きをイメージした「Flip Switch」、キーノートのEffectにあるような「Revolve」「Reflection」「Swap」なんかも用意しました。 中にはオリジナルのものもあります。（Fade
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
Jamie Wright in 2020
15 years of in agency experience. Wireframes, Design, Frontend, User Experience & Project Management Newcastle born, Yorkshire bred
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
MdN Design｜総合情報サイト
Node.jsのインストールと 下準備 Node.js のインストールは、UbuntusやMacを利用するのが簡単だ【4】。ちなみに今回はMacとパッケージ管理システムMacPortsを利用してインストールしている。MacPorts のインストールは、Web サイトからpkg 形式のインストーラが配布されているので参照して欲しい【5】。 Node.jsには開発を便利にするパッケ ージが多数配布されている。これらの一括管理には、パッケージ管理システムnpm(node package manager)【6】を使うとよい。npmはMacPortsではインストールできないため、curlを利用してインストールする。curlのインストールはMacPortsで可能だ【7】【8】。 Node.jsでWebSocketを利用したい場合、Socket.ioが便利だ【9】。Node.jsのパッケージとして配布さ
BeerCamp at SXSW 2011
Get ready for battle. This year, the BeerCamp competition will take form in a flip cup tournament. Team registration is now complete. Each member of the winning team will walk away with a Flip HD Video Camera. Tournament will consist of 32 teams, single elimination. Matches are best-of-3 games. First team to win 2 games wins the match. Teams consist of five players. All teams must sign up with fiv
HugeDomains.com
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
HTML5とCSS3を使ったフォームデザインのチュートリアル集３０:phpspot開発日誌
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials | Splashnology HTML5とCSS3を使ったフォームデザインのチュートリアル集３０ CSS3を使ってフォームデザインがより簡単に自由になりましたが、そのサンプル集です。 どういう事ができるのか？を知ることができ、実装の際にも参考にできます。 CSS3なしで１からつくるとなると相当大変ですが、CSS3を使うことで画像を使わずきれいなフォームが作れるのは素晴らしいですね。 関連エントリ 立体的なCSS3でデザインされた検索フォーム実装チュートリアル フォーム要素をクールにするためのjQueryプラグイン集
IE6〜8でCSS3セレクタ利用「Selectivizr」
CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6～8はほとんど対応できていないことが分かります。 そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかったのでご紹介。 Selectivizrの設置方法 ここで提供されているselectivizr.jsとJavaScriptライブラリを外部ファイルで読み込むだけで、CSS3セレクタがIE6～8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。 <script type="text/javascript" src="[JSライブラリ]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascr
ブラウザのスタイルをリセットするスタイルシート -Normalize CSS
Normalize CSS [ad#ad-2] Normalize CSSの主な特徴 Normalize CSSの対応ブラウザ Normalize CSSのデモ Normalize CSSの使い方 Normalize CSSの主な特徴 Normalize CSSは、他のリセット用スタイルシートとは一味違った特徴を備えています。 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。 スタイルの正常化 さまざまな種類のエレメントのスタイルを正常化します。 バグの修正 各ブラウザごとの異なるスタイルやバグを修正します。 ユーザビリティの改善 ほんのわずかな改良でユーザビリティを改善します。 コードの説明 各コードには詳細な説明があります。 Normalize CSSの対応ブラウザ 対応ブラウザは下記の通りです。 Chrome Firefox
HTML5+CSS3用のブラウザのスタイルをリセットするテンプレートファイル -HTML5 Reset
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成：コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
星海社 | SEIKAISHA
星々の輝きのように、才能の輝きは人の心を明るく満たす。 僕たちは新しい才能が放つ新しい輝きを信じ、それら才能という名の星々が無限に広がり輝く星の海で遊び、楽しみ、闘う最前線に、あなたとともに立ち続けたい。 星海社が星の海に掲げる旗を力の限り、あなたとともに振る未来を心から願い、僕たちはたった今、「第一歩」を踏み出します。 出版業の原点である営業一人、編集一人のタッグからスタートする僕たちの出版人としてのDNAの源流は、星海社の母体であり、創業百一年目を迎える日本最大の出版社、講談社にあります。僕たちはその講談社百一年の歴史を承け継ぎつつ、しかし全くの真っさらな第一歩から、まだ誰も見たことのない景色を見るために走り始めたいと思います。講談社の社是である「おもしろくてためになる」を踏まえた上で、「人生のカーブを切らせる」出版。それが僕たち星海社の理想とする出版です。
Apple - Safari - Introducing Safari 4 - See the web in a whole new way
Safari is the best way to experience the internet on all your Apple devices. It brings robust customization options, powerful privacy protections, and optimizes battery life — so you can browse how you like, when you like. And when it comes to speed, it’s the world’s fastest browser.1 Learn how to make Safari your default browser With a blazing-fast JavaScript engine, Safari is the world’s fastest
CSS Transitions, Transforms and Animation Tutorial
CSS3 Transitions, Transforms, Animation, Filters and more! Introduction This website is designed to help you build modern sites that are able to make use of some of the newer, exciting parts of CSS. The site is currently focussed on CSS Transitions, Transforms and Animation, though I will be adding other topics as they become available on any major platform. Though of course your browser must supp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Video Player 1.2.5 EXE Errors & Repair Guide
https://www.splashnology.com/article/creating-html5css3-forms-30-helpful-tutorials/1275/
実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins
S5-Studios — The Studio to Create S×5 Expressions.
http://www.designwalker.com/2010/06/html5-template.html
HTML5とCSS3を使用した、ハイクオリティな無料のテンプレート集