マウスオーバーエフェクト Creative Link EffectsIf you enjoyed these effects you might also like: Creative Button Styles Simple Icon Hover Effects
CSS謝罪文 - jsdo.it - Share JavaScript, HTML5 and CSS
CSSによるインデックスされない謝罪文 CSSに本文が書いてあるので、画面上は表示されているがGoogleでのキーワード検索には引っかからない 「流出」などの嫌な単語は:beforeと:afterに「流」「出」を分けて書くことで、自然言語解析を回避 #s { p:first-child { font-weight: bold; font-size: 120%; } p:not(:first-child) { text-indent: 1em; } p:nth-child(1):before{ content: "お 詫"; } p:nth-child(1):after{ content: " び"; } p:nth-child(2):before{ content: "平素は弊社のサービスをご利用いただき、誠にありがとうございます。"; } p:nth-child(3):before{ c
適切に改行を行う
ブラウザーはviewportによって折り返しを自動で行なってくれるわけだけど、場合によっては適切ではない位置で行われてしまうのをコントロールしたいという話。見出しをセンタリングしているようなケースで幅によっては一文字だけ次の行になってかっこ悪い！ みたいなのを解消したいということであったり、逆にびろ～んと間延びしないようによさそうな位置で改行を入れたいということであったり。一年くらい前にResponsive Line Breaksと呼ばれるようになった。 具体的なものはResponsive Line Breaksにあるデモやこのウェブログの日付表示の部分とかがそれ。ここではviewportの幅が広い時に良い位置で改行が入るようになっている。 article footer br { display: none; } @media (min-width: 60em) { article foo
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
» スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった | negic
パララックスなサイトを作る際に、スクロールに応じてJSで要素を動かすと思うのですが、その時にある場所でCSS3 Animationsが動いていると、スクロールがカクついてしまい、FPSが残念な状態になります。 そこで、スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3 Animationsを再度動作させるという処理を加えれば、スクロールがカクつくことなく、スムーズになります。 スクロールや、リサイズといったJavaScriptのイベントは連続で処理されます。そういったイベントの「開始した時」「動作している時」「停止した時」の状態が取れるjQueryのプラグインを作成しました。 jQuery.MovingState このプラグインを使い、CSS3 Animationsを動的に操作してみたいと思います。 CSS3 Animationsを一時的に停止
Flashオブジェクトのz-index問題 - COBALT
現象 youtubeを以下のようにロードできる。 <iframe title="YouTube video player" width="450" height="368" src="http://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe> こうした場合、読込んだFlashがz-indexを無視して一番上に表示される。 z-inex の有効化 Flash要素にz-indexを有効化させるには一般的に次のように指定する。 <object> <param name="wmode" value="transparent"> <embed src="…" wmode="transparent" /> </object> iframe へのアクセス youtubeの動画にz-indexを指定するため、まず
[CSS]CSS3アニメーションでブラー効果をかっこよく使ったナビゲーションを実装するチュートリアル
アニメーションを伴ったテキストシャドウや半透明を利用して、ブラーのエフェクトを使ったナビゲーションを実装するCSS3のチュートリアルを紹介します。 Blur Menu with CSS3 Transitions [ad#ad-2] 7つのデモ 7つのデモの実装 7つのデモ デモは7種類あり、共通するアイデアはホバーしている時に他のアイテムをブラーでぼんやりとさせ、そのアイテム自体を強調することです。 デモページ 対応ブラウザは、Chrome, Safari, Firefox, Operaです。 IEは、IE9でまだテキストシャドウやアニメーションはサポートされていません。 7つのデモの実装 HTML メニューはすべてリスト要素で実装しており、固定幅を指定します。 <ul class="bmenu"> <li><a href="#">About</a></li> <li><a href="#
Flexbox、おもしろいですよ？
Translation of: Learn You a Flexbox for Great Good! | The Haystack. written by Stephen Hay Flexboxについて知っていますか？ 多分、名前は聞いたことがあるでしょう。もしかしたらチュートリアルくらいは読んだことがあるかもしれません。既に試していたりしますか？ Flexboxという代物についてあまり聞いたことがなかったり、前に試してから随分と経つなら、そのFlexboxに関する知識のことは一旦全て忘れてしまいましょう！ 現時点での最新版である2011年11月29日にリリースされた仕様では完全に別物になっています。 訳注 2012年3月22日に新しく公開されたWorking Draftでもまた大きな変更が加わり、この文書の一部はそのWDにそぐわないものになっています。大筋は変わりませんし、2012年3
Get Started with the Google Fonts API | Google for Developers
Get Started with the Google Fonts API Stay organized with collections Save and categorize content based on your preferences. This guide explains how to use the Google Fonts API to add fonts to your web pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style. A quick example Here's an example. Copy
これは使える！rem (root em) 単位を使用したフォントサイズの指定 - IT-Walker on hatena
寡聞につき、rem(root em)なんてフォントサイズの単位があるのを今まで知りませんでした。 ちょっと興味を持って調べてみたところ、結構使えそうなテクニックだったのでご紹介したいと思います。 rem (root em) というのは、「ルート要素（典型的にはhtml要素）に対する相対的なフォントサイズの単位」です。 従来のemは、親要素に対して相対的なフォントサイズの単位でした。そのため、要素の出現位置次第でフォントサイズが変わってしまうことも多く、使いにくい場面も多々ありました。 他にもフォントサイズの指定方法には、ピクセル（px）を用いたものがあります。が、特に今は様々なスクリーンサイズを意識しなくてはならない時代。スクリーンサイズの小さいデバイスでは全体的なフォントサイズを同時に大きくしなければならないこともよくありますが、pxを使用していると、メディアクエリなどを使ってあらゆるフ
オールドスタイルな数字を普通のものに
オールドスタイルな数字っていうのはGeorgiaとかで見るオシャレなあの数字のこと。Corbelというx-heightが高めでオープン・カウンターという読みやすさ重視のなかなか優秀なサンセリフ体もオールドスタイル。ただ和文とは相性が良くないので、どうにかして数字だけ普通のものに差し替えてみようという試み。 unicode-rangeプロパティー @font-faceディレクティブのunicode-rangeプロパティーでカスタム・フォントを作成するテクニックを使ってCorbelの数字をCalibriに置き換えてみる。 Demo: Use non oldstyle numbers for Corbel Chrome 20とInternet Explorer 9で反映される。それ以外ではunicode-rangeプロパティーが無視されるので、アルファベットや記号も含めて完全にCalibriにな
CSSで要素を横並びにする方法まとめ | HALAWATA.NET
CSSで要素を横並びにする方法をまとめてみました。 それぞれの違いがわかるように基本となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;
iPhone 5とiOS 6で導入されたWebデベロップまわりのアップデートについて - Branch
Clicking the “Branch this” button next to a post lets you start your own branch to talk about it. Branching a post is perfect for when you have something to say about someone’s post or want to go on a tangent—without taking the whole conversation off track. Join our beta so you can branch posts, too.
CSS Font Stack - The long awaited CSS font stack resource.
What are Web Safe Fonts? Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts.
img:after { content: attr(alt); } としても何も表示されないのは、仕様的に正しい挙動です
img:after { content: attr(alt); } としても何も表示されないのは、仕様的に正しい挙動です 公開日: 2011年5月11日 タグ: css お分かりの方には何てことないというか今さらな話ですが、割と出来なくて悩んでる方が多いように見受けられたので。Twitter のツイートを検索してみてもたまに話題に上がってるっぽいし。 「画像にキャプションを表示する」などの名目でこの img:after { content: attr(alt) } のような[1] CSS 例を挙げているところがいくつかあるのですが、実際にこのような CSS を書いても alt 属性値が画像の後ろに表示される事はありません。Opera では表示されるようですが（あと私の記憶にはないのですが、どうやら古い Mozilla もこのような実装になっていたみたい[2]です）他のモダンブラウザでは基本
HEX 2 RGBA Color Calculator | by @Devoth
« Back to devoth.com Devoth‘s HEX 2 RGBA Color Calculator ver 1.3 Let‘s you convert color value in HEX to RGBA and RGB, prepared for inclusion in CSS styles. Like what I do? Check my other tools & scripts: calculate Temperature conversion Calculator for converting temperature between Celsius, Fahrenheit, Kelvin and other scales Check it out → PHP Dead Simple Gallery Create a gallery in less than 5
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Full-[Watch]! Power Season 6 Episode 12 Online Free 123Movies![Full-[Watch]! Power Season 6 Episode 12 Online Free 123Movies](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4c5e88a0f20510caffcbe04a2c82643c871c41/height=288;version=1;width=512/https%3A%2F%2Fwww.digitalocean.com%2F_next%2Fstatic%2Fmedia%2Fsocial-share-default.e8530e9e.jpeg)
Ceaser - CSS Easing Animation Tool - Matthew Lein
IDEA * IDEA
https://abcyahhh.com/
