ドットインストール代表のライフハックブログ
twitter facebook hatena google pocket ちょっと気が向いたので、CSSでツールチップの吹き出しっぽいあれを表現してみました。 上記のスクリーンショットを見ていただくとわかるかと思いますが、IE8まではいまいちでした。 IE9はどうなんでしょうかね。 参照:Pure css tooltip box with arrow (T,R,B,L) - Some code from cahnory - Forrst sponsors HTML 下記のようなテキストがあるとします。 普通のHTMLです。 <span class="ui-tooltip">tooltip box</span> CSS CSSをがっつり書いていきます。 .ui-tooltip { color:#ffffff; font-size:12px; font-family:arial; paddi
週刊Webテク通信 2011年6月第3週号1位は、HTML5とCSS3によるフレームワークいろいろ、気になるネタは、Facebookポイントが日本でも決済システムとして利用可能に ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年6月13日~2011年6月19日の間に見つけた記事のベスト5です。 1. 15 Handy HTML5/CSS3 Frameworks For Web Developers | Splashnologyhttp://www.splashnology.com/article/15-handy-html5css3-frameworks-for-web-developers/994/ HTML5とCSS3を使ったWebサイトを作るためのフレームワークを15個紹介し
いくつも似たようなのはあるのですが、 複数覚えておいて損は無いのでメモ がてらご紹介・・・クロスブラウザ対応 を意識したHTML5+CSS3フレームワ ーク・Gridlessです。装飾を施さない、 とてもシンプルなものになっています。 Gridlessは、美しいタイポグラフィをクロスブラウザで実現するためのフレームワークです。MediaQueryによって、スマフォにも対応しやすい雛形になっています。 ライセンスは一部のjs(Respond.jsとHTML5 shim)を除いてパブリックドメイン(著作権放棄)で配布されています。 無駄な装飾がないので、1から作るプロジェクトのスターターキットとしても使えそうです。クロスブラウザ対応といっても、完璧ではなく、より差の無い実装となっています。 各テキストのエレメント。 IE6や7にも対応 IETesterによるIE6の表示です。 タブレットやスマ
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中! ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
こんにちは!WEB 担当の青野です。 そろそろ CSS3 でのコーディングも(趣味で)するようになってくると思うので、 レイアウトコーディング時などで個人的によく使いそうなものや、すべてのブラウザでサポートしてほしいものをまとめてみました。 ブラウザのバージョンは、以下の環境での確認となっています。 Safari:5.0.5 Google Chrome:12.0.742.100 Firefox:4.0.1&5.0 Opera:11.11 Internet Explorer:9 background-size 背景画像のサイズを指定する。 対応ブラウザ Safari、Chrome、Firefox、Opera、IE9 説明 background-size: 横幅 縦幅; auto 長さ指定(100px など) % 指定 contain(縦横比を保持し、背景表示領域に収まる最大サイズで表示) c
Color Animate Any Shape with a Knockout PNG | CSS-Tricks 透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニックが掲載されています。 CSS3の登場でハックの幅は広がりましたが、今後こういうテクニックが色々現れてくると思うと楽しみです。 まずはマリリンをかたどった縁の画像を透過PNGで作ります このデモは必見 あとは背景をCSS3の keyframes, animation を使ってアニメーションさせると、なんとマリリンが7色に変化します。これはすごい! マリリンはたまったものではありませんが、色々応用の効くテクニックかもしれませんね 関連エントリ CSS3で動くプログレスバー作成サンプル IE9にも対応したCSS3リファレンスサイト「css3files」 超シンプルなマークアップで実現できるCSS3による画像を使
コピペで使える!Photoshop不要になりそうな高品質テキストシャドウサンプル集 2011年06月13日- 12 Fun CSS Text Shadows You Can Copy and Paste | Design Shack コピペで使える!Photoshop不要になりそうな高品質テキストシャドウサンプル集のご紹介。 Photoshop不要には絶対ならないとは思うんですが、Photoshopで作るのと遜色ないテキストシャドウが実現されております コードと実例を元に紹介されていてコピペで使えます。 こういうものはいつでもデザインを変えられるという意味でCSS3でやっちゃうのがデベロッパー的には楽ですよね。 画像を作成→アップロード→タグ置き換え を CSS3で一発置換っていう方がはるかに効率的です 一日も早く、ほとんどのブラウザでCSS3が使えることを願います。 関連エントリ CSS
Ghost Writerは万年筆、マジック等をリアルに再現した絵描き用ソフトウェア。 Ghost WriterはHTML5/JavaScript製のフリーウェア(ソースコードは公開されている)。HTML5は徐々に本格導入されつつあるが、まだまだ実験的なプロダクトが多い。だがプログラマーにとっては、今こそ遊べる状況だ。色々試し、遊ぶ中で新しい可能性を見いだすことができる。 ものすごくリアル 今まではローカルでしかできなかったような操作がWebベースで実現するようになっている。特にペイント系は面白い。そこで今回はGhost Writerを紹介しよう。 Ghost Writerは古めかしい紙のようなボックスにペンを使って書き込めるソフトウェアだ。驚くのはそのリアル感ある存在感だろう。万年筆、マジック、スプレーといったペン種があり、切り替えて絵を描くことができる。なお筆者環境では色を変えることはで
スマートフォンと違い、iPadなどのタブレットに最適化された表示を行っているサイトはまだまだ少ない。 そこで今回は、LESSON 13同様、別HTMLを用意せず、同じHTMLにJavaScriptとCSSを使用して、タブレットタイプ用に表示を最適化させる。 タブレット用にするからといって特別にHTMLの作り方を変える必要はなく、正しくマークアップできていれば基本的に問題ない。 ただ、あまりにも無駄に多い入れ子構造や、レイアウトは避けたほうがよい。あくまでも(X)HTML/CSSを意識して作ろう。 今回はタブレットにも使用されるので、HTML5やCSS3を駆使してPC用も作ってよいが、IEなどの未対応ブラウザへの対応が発生するので注意が必要だ。 【1】のような、ブログ形式のPCページ構成をベースに構築していく。 使用するCSSは ・PC用CSS(デフォルト) ・スマートフォン用CSS ・タブ
IEの独自拡張filterプロパティでCSS3を再現 前回紹介したCSS3の機能は、Internet Explorer(以下IE)8以下ではサポートされていません。今回は、クロスブラウザなテクニックとして、IEの独自拡張であるfilterプロパティを使ってCSS3の表現を再現する方法を紹介します。 filterプロパティは、テキストや画像を透過させたり、影を付けたり、色を変えたりと、さまざまなフィルタ効果を指定できるIE独自のCSSプロパティです。これらのフィルタ効果を利用すれば、画像やJavaScriptを利用せずに、CSS3のようなドロップシャドウやグラデーションなどの表現ができます。 filterプロパティには、IE 5.5以上で使用できる効果と、IE 4以上で使用できる効果があり、書式がそれぞれ異なりますので注意しましょう。本稿では混同しないように、より広い機能に対応している、IE
テキストシャドウを自在にアニメーションさせられるjQueryプラグイン「animate-textshadow.js」 2011年06月08日- animate-textshadow.js - Animated CSS text shadows with jQuery Alex Peattie, a web developer and designer. テキストシャドウを自在にアニメーションさせられるjQueryプラグイン「animate-textshadow.js」。 普通にCSS3で指定すると固定された影ですが、これをjQueryで動かしてしまおうということでできたライブラリ。 カーソルをあわせるとテキストの影が動いたり、なかなか面白い効果が得られるようです。 カーソルを合わせると徐々に輝く カーソルを合わせると影の色とサイズが変わる 同じようにグラデーションや、角丸など、CSS3で指
iPhoneやAndroidなどのスマートフォン端末が普及するのと同時に、パソコン画面以外のさまざまなウィンドウ幅にも対応したWebサイト制作が行われるようになっています。 読者ユーザーの見ている画面サイズを自動的に調べ、ウィンドウ幅に応じて最適なスタイルシートを適用するメディアクエリというテクニックが利用されているケースが多いようです。 海外デザインブログWeb Design Ledgerで、メディアクエリを利用したユニークなWebサイトデザインを30個まとめたエントリー「30 Creative Examples of Responsive Web Design」が公開されていたので、今回はご紹介します。 最後には、実際にメディアクエリ利用したWebサイトを作成するときに活用したい、WordPress用テンプレート素材や使い方などを別途まとめています。Web制作の参考にしてみてはいかがで
テキストにシャドウをつけるtext-shadowをアニメーションでコントロールして、さまざま面白いエフェクトを生み出すjQueryのプラグインを紹介します。 Animated CSS text shadows with jQuery デモページ [ad#ad-2] デモではさまざまなtext-shadowのアニメーションを楽しめます。 以下、デモを紹介しつつ、その実装方法もご紹介。 デモ:基本 一番シンプルな基本となるデモです。 HTML HTMLはすべてのデモで、テキストをspan要素で実装するだけです。 <span id="basic">Click me</span> CSS text-shadowをアニメーションでコントロールするためには、最初にtext-shadowで値を持たせる必要があります。 .text { text-shadow: 3px 3px 3px #ccc; } デフ
The fancy Apple.com navigation menu created using only CSS3. CSS3で実装するApple.comのナビゲーションメニュー。 Appleのサイトで実装されているメニューをCSS3で実装してしまおうというデモ。 グラデーションが綺麗に表現されています。 検索ボックスも次のとおり 画像として使われているのはロゴと虫眼鏡のみ。 検索ボックスが伸縮しない部分は公式とちょっと違いますが自分で実装してみても面白いかもしれませんね。 関連エントリ 立体的なCSS3でデザインされた検索フォーム実装チュートリアル CSS3をフル活用した立体的な画像ギャラリー作成デモ CSS3で実装されたボタンのサンプルやチュートリアル総まとめ CSS3で動くプログレスバー作成サンプル
HTML5+CSS3を使って、ユーザビリティを考慮した省スペースで多くのコンテンツを配置するアコーディオンパネルを実装するスタイルシートを紹介します。 デモページのキャプチャ Pure CSS3 accordionの実装 HTML5への対応 HTML5(section要素)を使用するので、サポートしていない古いブラウザ用に準備します。 <script>document.createElement('section');</script> 参考:HTML5 Shiv あとは、外部スクリプト「html5.js」を記述し、IEなどの古いブラウザでもHTML5のエレメントが利用できるようにします。 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> HTML 各パネルはsection要素で管理し、バー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く