CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
初代「ドラクエ」のおそるべきタイムアタック動画。竜王逃げてー！
※本記事はアフィリエイトプログラムによる収益を得ています まさに「リアルTASさん」状態 ゲームのやり込みプレイのひとつに「RTA（リアルタイムアタック）」というものがあります。ツールなどを使わない、あくまで人の手によるタイムアタックを指し、特にゲームスタートからクリアまでの「実時間」を競うプレイをRTAと呼ぶようです。 ということで、今回紹介するのはおなじみ「ドラゴンクエスト」（スーパーファミコン版）のRTA動画。初代「ドラクエ」のRTA自体は以前から盛んに行われていましたが、最近になって“あるテクニック”が導入されたことで、大幅な記録更新に成功。これまでの記録では、だいたい1時間半をきればかなり早いタイムとされていましたが、この動画ではなんとわずか45分でエンディングまで辿り着いてしまっています。 今回使われているテクニックは、RTAプレイヤーの間では「状況再現」と呼ばれているもの。簡
CSS3なら簡単！ アニメーションするリングメニューを作る | CSS-EBLOG
CSS3なら簡単！ アニメーションするリングメニューを作る カテゴリ：CSS3関連 2011年7月19日 07:40 jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。 ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。 ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。 デモ まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。 リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS テクニックの肝 今
売れるキャッチコピーの作り方37選！ | ブクペ
【この本に求めるもの】売れるキャッチコピーの作り方 【感動した言葉・考え方・テクニック】１．具体的な数値で約束する 例 一日10分で ２．新しい使い方を提案する ３．迂回して間接的にアプローチする あなたの彼はセクシーですか？ ４．空気とタイミングを生かす 連休明けの一週間はとてつもなく長い ５．ネガティブな事実を突きつける ６．見込み顧客の気持ちで語る ７．損していると気付かせる ８．見込み顧客の感動の声のようにつたえる ９．見込み顧客にとっての新しいを提案する １０．時間的な希少性をアピールする １１．ビフォーアフターを劇的に伝える なんで私が東大に！ １２．しないで済むことを強調する １３．選ぶポイントを提案してあげる 10のポイント あなたの選ぶ商品は◎◎か？ １４．嬉しい姿を妄想させる １５．役立つ知識を教える １６．見込み顧客が得することをやさしくいう １７．買う目的を具体的に
[CSS]今、そして近い将来に使用するであろうスタイルシートのテクニック集
CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング
【レポート】速いJavaScript条件式を書く方法と落とし穴 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers JavaScriptのコーディングティップスはネット上に溢れている。また、JavaScriptに限定されたテクニックではなく、汎用的に使われているテクニックの多くをJavaScriptコーディングに適用できる。しかし注意が必要だ。簡単でよく知られた方法であっても、文脈を考えずに盲目的に適用すると問題を起こすことがある。この面白いサンプルがCraig Buckler氏によってSitePointにHow to Write Faster JavaScript Condition Expressionsとして掲載されている。 Craig Buckler氏はまず次の条件文を紹介。最初の条件はfalseになるので、次のyを評価する。yはtrueだから、全体と
2010年総まとめ：CSSの実用的なテクニック集
CSS3で何ができるの？ という時にみておきたいサイト集 ベーシックなものから実践的なテクニックまで、サンプルやコードなど実装例が掲載されているサイトをご紹介。
IE7対象、CSSのみで画像の縮小サムネイルをきれいに表示させる方法
IE7対象、CSSのみで画像の縮小サムネイルをきれいに表示させる方法 ◆Tip: High quality CSS thumbnails in IE7 [Devthought] [情報元：画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌] HTMLで画像サイズを強制的に縮小表示させても、きれいに縮小した画像を表示させるCSSテクニックが紹介されています。対象となるのはIE7。ちなみにFirefoxやGoogle Chromeはこのようなテクニックを使用しなくてもきれいに表示されるそうです。初めて知った・・・。 小さい画像を表示する場合、通常はあらかじめ縮小した画像を用意しておきますが、このテクニックを用いれば、場合によってはサムネイルの作成の手間を省くことが出来ます。ただ、実際には表示が縮小されていても、元の画像をそのまま読み込ませているため、ページの構成
Googleアラートで上手にサイトを管理する便利なテクニック | Moz - SEOとインバウンドマーケティングの実践情報
モニタリングダッシュボードの設定について取り上げた投稿やチュートリアルは、いくらでもある。好みは人それぞれだが、僕が気に入っているのは、マーティ・ワイントローブ氏がaimClearのブログに投稿した「評判管理用モニタリングダッシュボードの作り方」という記事で紹介されているものだ。 モニタリングを扱う新しいサービスは、Scout LabsやTrackurなど数か月ごとに続々と登場していて、その多くが非常に優れている。しかし場合によっては、これらの製品を使うのは、スーパーに牛乳を買いに行くためにフェラーリを運転していくのと同様のことがある。つまり、するべき作業と比較してパワーがありすぎ、不要な労力がかかってしまう。当面の必要性に適した、手早く簡単なソリューションだけあればいいという場合もあるんだ。そんな時に僕が使っている方法を紹介しよう。 大企業の会計責任者とか、個人事業の責任者なら、繰り返し
はてなスターをう●こに変えてみました
どうしてもって言われたので、はてなスターをう●こに変えてみました。 う●こ好きのみなさん、こんにちは。 このブログの「はてなスター」がう●こに変わっていることにお気づきになりましたか？ とっても簡単にCSSだけでう●こに変えることができたので、その方法を紹介したいと思います。 それではう●こに理解のある人だけ続きからどうぞーー 以下のCSSを設定するだけです。 .hatenaStar > span > a{ display: inline-block; *display: inline; *zoom: 1; width: 20px; height: 17px; background: url(/img/ico/star_01.png) 0 0 no-repeat; } .hatenaStar > span > a > img{ opacity: 0; } 画像のパスは環境に合わせて設定して
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
どうか面白いweb漫画を教えて下さい ニコニコVIP2ch
ニコニコVIPユーザー様、暑くなってきましたね！ 5月よりアイドリングとコラボの商品を販売中です♪ 最近、「もう夏じゃね!?」的な天気が続いてますが、 そんな時にいち早くゲットしたいのが、 今回のコラボで実現した「ポロシャツ」なんです！ ハズさないデザインでこれからの季節に大活躍♪ アイドリング好きな方も、そうじゃない方も、 一度見に来て下さい◎ ご来店お待ちしてます！ ⇒全員にアイドリンググッズをプレゼント 1 以下、名無しにかわりましてVIPがお送りします 投稿日：2010/05/12(水) 13:00:43.41 ID:blr6hCiG0 お頼み申し上げます 2 以下、名無しにかわりましてVIPがお送りします 投稿日：2010/05/12(水) 13:01:25.08 ID:k0NPR+Id0 頭が高い 3 以下、名無しにかわりましてVIPがお送りします 投稿日：
ハイパーテキストリンクのスタイル大全
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク（リンク）はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです
外村和仁のお悩み相談｜面白法人カヤック
彼女ができなくて困ってます。 出会いはそこそこあると思うのですが、好きな子ができてもすぐフラれてしまいます。そういう状況がずっと続いているので最近たまに死にたくなります。 どうすればモテるようになるのでしょうか。もしくは、どんな女でも一発で落ちるぜ！みたいテクニックがあったら教えてほしいです！ どんな女でも一発で落ちるぜ！そんなテクニックはこの世の中に存在しません。 そして、死にたくなることは誰にでもあります。 ほかちゃん（＊外村のあだな）の良さをわかってくれる人は必ずいるはずです。 なぜなら、ほかちゃんいいやつだから・・・ おけらだって、あめんぼだって、みんなみんな生きているんだ。幸せなんだ。
jQueryを使ってCSSを補強するテクニック15 – creamu
Web Developer Plusで、jQueryを使ってCSSを補強するテクニックが紹介されています。 ざっといくつかご紹介。 jQueryでカラムの高さを統一する equalHeights pluginを使って、一行でカラムの高さを同じにする 入力中のフォームをハイライトする highlighting the label along with the selected input fieldを使って、フォームのユーザビリティーを上げるテクニック 角丸 jQuery Curvy Cornersで角丸を実装する メニューの背景をアニメーションさせる メニューにマウスオーバーしたときに、一瞬でhover画像に切り替えるのではなく、ふわ〜っとアニメーションして切り替えるテクニック。例：Create an Attractive jQuery Menu with Fade In and Fade
知っておきたい15個のCSS TIPS
知っておきたい15個のCSS TIPS IN THE WOODSでまとめられている15 CSS Tricks That Must be Learnedを紹介します。 原文は素敵なイラスト付きで解説されていますので、合わせてチェックしてください。 positionがabsoluteの要素をpositionがrelativeの要素の中に入れる positionがrelativeを指定した要素の中にpositionがabsoluteを指定した要素を入れることにより、計算した場所に配置することができます。 参考：positionプロパティの考察 z-indexによる配置 z-indexを利用する場合は、「position:relative」と共に利用することにより要素の重なり順を制御することができます。 margin auto widthを指定した要素の左右にmargin:autoを指定すると中央
28 Powerful Photoshop Lighting Effects
FeaturedTutorials 28 Powerful Photoshop Lighting Effects Henry JonesFebruary 23, 20160 Comment011.2k There is something about beautiful lights that can mesmerize an audience. Take a fireworks show for example. It’s been around for thousands of years, yet still has the power to put looks of amazement on faces of all ages. That’s why lighting effects make such powerful design elements. They are a gr
映画のタイトルロゴのような非常に美しい光と文字を描画するPhotoShopチュートリアル:phpspot開発日誌
PSDTuts Advanced Glow Effects In this tutorial we're going to create some really sharp looking glow effects using a combination of layer styles, the pen tool and colour blending. 映画のタイトルロゴのような非常に美しい光と文字を描画するPhotoShopチュートリアル。 次のような画像を作成するチュートリアルです。 本当に綺麗で、パンフレットの表紙、WEBデザインのタイトル部分など、様々な部分に応用することが出来そうです。 チュートリアルを参考に画像を作ってみたところ、次のような画像が出来ました。 関連エントリ PhotoShopで７色に輝く美しいパーティクルエフェクトを作成するチュートリアル 壁に落書きをしたよう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
