[CSS]多階層のリスト要素をツリー状にデザインするスタイルシートのテクニック
画像を使用せずに、多階層のリストをツリー状にデザインするスタイルシートのテクニックを紹介します。 ピュアCSSなので、リストのアイテムは増やしても減らしても、ツリー状のスタイルを適用できます。 Parent child vertical list menu コードはこんな感じです。 HTML リストは階層ごとに入れ子を使用します。 コードは、CodeのjQueryまで。 <nav class="nav"> <ul class=list> <li> <a href="#">Home</a> <ul> <li> <a href="#">Lab</a> <ul> <li> <a href="#">Code</a> <ul> <li> <a href="#">Html</a> </li> <li> <a href="#">Css</a> </li> <li> <a href="#">Jquery<
スクリプト無し、動画をページの背景いっぱいに表示する方法
jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常にシンプルです。 HTML 動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。 <body> ... コンテンツ ... <!-- 背景に設置する動画 --> <video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted> <source src="http://mattgrossdesign.com/raw-media/wood
URLスキームからのスマフォアプリ起動のフォールバック
前段 ブログリハビリ..._:(´ཀ`」 ∠): URLスキームで任意のアプリ（今回はLINE）を起動したい フォールバックとして、アプリのURLに誘導するなりアラートするなりしたい Android Galaxy S3 (4.0.3) と Xperia SX (4.1.2) のAndroidブラウザで確認する限りは、下記のようなコードで実現できた。 var iframe = document.createElement('iframe'); iframe.className = 'is-hidden'; iframe.onload= function() { alert('LINEアプリ、インストールしてなくない？'); iframe.parentNode.removeChild(iframe); }; iframe.src = 'line://msg/text/loremipsum...
input:file 要素を表示しないで、ファイルをアップロード | @jsakamoto
「Upload image...」と書かれたボタンをクリックすると、ファイル選択のダイアログが表示されるはずだ。 そこで .png や .jpg 等、適当な画像ファイルを選択してOKすると、即アップロードが始まる。 アップロードが完了すると、そのアップロードした画像をそのままページ上に表示する、そういうアプリになっている。 ※画像以外のファイルもアップロードできてしまうが、あくまでサンプルなので、画像以外がUpされた場合の対処とかは行っていない。ご勘弁を。 ※アップロードした画像はどこにも保存はしていない。そのアップロード結果のページを生成するときに img 要素の data uri を生成しているだけである。 この Web サイトのポイントは、Adobe Flash や Microsoft Silverlight、Java などのプラグインを使うことなく、ごくごく単純な input ty
ラッパーに含まれたコンテンツとヘッダ、ヘッダの幅だけラッパーを超えさせるテクニック | コリス
全体をラッパーで包み、ホワイトのコンテンツはラッパーで指定した幅だけど、レッドのヘッダは表示サイズが指定した幅より広い時にラッパーを超えた幅で表示するスタイルシートのテクニックを紹介します。 いやー、日本語ムズカシイ、、、 デモ 実装 デモ デモページは構造的にはラッパーの中に上から、半透明のレッドのヘッダ、ホワイトのコンテンツの2つで構成されています。 まずは、表示サイズがラッパーの幅960pxを超えた時の表示。 Improved Full Width Browser：幅1200px コンテンツは幅960pxで表示され、ラッパー内にヘッダが含まれているけど、ヘッダの幅はそのコンテンツのラッパーを超えている状態です。 表示幅が960px以下になると、ヘッダはコンテンツの上部に成り行きで収まります。 Improved Full Width Browser：幅780px 実装 HTML HTM
iPhone Safariから画像を投稿する方法
iPhone Safariから画像を投稿するならMMS連携が便利です。 iScreenShotのように、iPhone Safariから写真や画像を投稿してもらうWebサイトを作る時に悩むのが、どういう方法で画像をWeb側に投稿してもらうかです。 実際に構築するにあたって色々と試してみました。 Safariからファイルアップロード Safariからファイルアップロードで画像を投稿して貰う方法です。 単純に考えればこれですね。開発を始める時は、スマートフォンだしPCと同じ方法で良いよね、と安易に考えていました。 しかし試してみると分かるのですが、iPhone/iPadのSafariでは残念ながらファイルアップロードはできません。 ファイル選択ボタンが無効になってます。。。 メールから送信 次に考えたのが、メール添付による投稿。 mailto:でメールアプリを起動して、画像を添付して貰えれば良い
『スマートフォン向けブラウザゲームの開発について』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんばんは。アメーバ事業本部ピグディビジョン所属の久保です。 今回は6月5日にリリースいたしましたスマートフォンで遊べる「スマートフォン版ピグつりゲーム」(http://fishing.pigg.ameba.jp)の開発の一端をご紹介させていただきます。 スマートフォン版ピグつりゲームとは スマートフォン版ピグつりゲームとは、PC版アメーバピグの中で遊べるつりゲームをスマートフォンでも気軽に楽しんでもらえるように制作したブラウザゲームです。PC版はFLASHで動作しますが、スマートフォン版ではiPhoneの対応を考慮に入れてHTML/CSS/Java
The amazing powers of CSS | Articles | web.dev
The amazing powers of CSS Stay organized with collections Save and categorize content based on your preferences. Yesterday at the office, we were coming up with strange and magical CSS tricks. Take this one for instance, it makes empty links very visible: a[href = ""] { background: red; color: white; font-size: x-large; } Check out the live example at jsFiddle You can also style absolute links dif
Another CSS image replacement technique – Nicolas Gallagher
A new image replacement technique was recently added to the HTML5 Boilerplate project. This post explains how it works and how it compares to alternative image replacement techniques. [15 December 2012] This technique is no longer used in HTML5 Boilerplate. It’s been replaced by another, more reliable approach. Here’s the CSS behind the recent update to the image replacement helper class in HTML5
Replacing the -9999px hack (new image replacement)
IN THE BEGINNING was FIR, AKA Fahrner Image Replacement (note that one of the following links returns a 404): The Daily Report’s 2003 redesign uses (and our book explained) an image replacement technique intended to combine the benefits of accessibility with the power of graphic design. We christened this method Fahrner Image Replacement (FIR) in honor of Todd Fahrner, who first suggested it to us
Futurebox, lightbox without the javascript and target pseudo-class
Futurebox, lightbox without the javascript and target pseudo-class So I recently released a revised version of Futurebox which added a lot of functionality. But one thing was nagging me, the fact that it utilised the target pseudo-class to hijack in page anchors which has a few side effects that can create some major drawbacks to the technique. One being that if you click multiple futurebox links
4 Fun CSS Image Effects You Can Copy and Paste
Once upon a time we relied purely on Photoshop to create fancy image effects. These days though we’re turning more and more to pure CSS to add eye candy to our images. Applying custom image treatments using code makes for an infinitely flexible workflow that’s easy to tweak at any time. Today I’ll walk you through creating some extremely simple and fun CSS image tricks. From polaroids to vignettes
Burst Title | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! During the previews for a movie I saw recently, there was an advertisement for an Oprah-related something or another. I wasn’t paying attention because I was trying to get out my phone so I could snap a picture of it. Which I failed to do. There was these neat title screens that I thought wo
(Better) Tabs With Round Out Borders | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Menno van Slooten. You might notice we’ve been down this road before, but I quite like Menno’s approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually usi
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://design.e1blue.net/blog/details.php?bid=120
403 Forbidden
Guides Archive - CSS-Tricks
Downloads | CSS-Tricks
CSS3 Wizardry - Putting CSS3 and HTML5 to Work