CSSで画像を六角形にくり抜く - Weblog - Hail2u.net
Swarmで使われている六角形のプロフィール画像はちょっと流行りそう。CSSだけで行えるように考えておくとなんかの時に役に立つはず。難しく考えずに擬似要素で三角形を作るテクニックを反転させて重ねるだけでも良かったけど、CSSグラデーションで重ねた方がフレキシブルに作れた。 Demo: CSS HEX Clip 切り抜きはCSSグラデーションを上に重ねて行うので、何らかの要素で括る必要がある以外には特別なマークアップは必要ない。 .hexclip { display: inline-block; position: relative; line-height: 1; background-image: linear-gradient( 30deg, #fff 0, #fff 18%, transparent 18%, transparent 100% ), linear-gradient(
プレースホルダー周りのセレクター
フォームのプレースホルダー周りのセレクターは、今のところウェブ標準では:placeholder-shown擬似クラスとして定義されている。つまりプレースホルダー文字列が表示されているかどうかという状態を反映するもの。どうやらInternet Explorer 11はこれを踏襲した実装のようだ。対してChrome 31やFirefox 25では擬似要素として実装されており、プレースホルダーそのものを表現するセレクターになっている。できることはあまり変わらないのだけど、例えば背景画像の開始位置とかでズレが生じる。 以下のようなスタイルがあたっている入力ボックスにプレースホルダーが表示されているとする。 input[type="text"] { padding-left: 1em; } 左に1emの余白を取っているだけ。この場合、入力文字列は1emのところから表示されることになる。プレースホルダ
引用元の表記
blockquote要素における引用元の表記をどうマークアップするかでWHATWGとW3Cの仕様で違いが出たので、俄然盛り上がってきた。昨日公開されたHTML5 Doctorの記事を始め、様々な人が見解を書いている。概ねシンプルなW3C版が優勢な気がする。どう決着するかには関心があるものの、現状どうするべきかについてはよくわからなくなってしまったので、それぞれどういうコードになるのかとその思想の違いをメモだけしておく。 WHATWG版では以下のようにfigure要素を使い、figcaption要素で引用元の表記をマークアップする。このウェブサイトではこっちを採用中。 <figure> <blockquote> <p>引用(いんよう、英語：citation, quotation)とは、広義には、他人の著作を自己の作品のなかで紹介する行為、先人の芸術作品やその要素を自己の作品に取り入れること。
翻訳とフェアユース
翻訳ままのウェブサイトを、著作権というかっこうの武器で気軽に批判する人は多い。アメリカのコンテンツに関してはフェアユースという概念があるので、翻訳ままを自分のコンテンツとして公開することが問題のある行為だとは言いきれないと思う。批判する人たちは、単純に労力はあれど何の努力もなさそうな翻訳ままのウェブサイトが人気があるというのが気に食わないだけなのではないか。 著作権を尊重することはとても大切なことだけど、それによって失われるものももちろんある。仮にフェアユースという概念がなかった場合、翻訳したいのに翻訳の許可が出ないということも起こる。また翻訳の許可が出るまでに時間がかかって、翻訳するモチベーションが大きく低下する、または読者の需要が減るということもよくある。 翻訳ままのウェブサイトを、著作権をないがしろにしていると批判するのは間違っていないけど、インターネットのような常に沙漠で針を探すこ
ID使っても別に問題ない
CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な気がする。Disallow IDs in selectorsではIDの問題点として以下のようなものを取り上げている。 However, IDs have a downside: they are completely unique and therefore cannot be reused. つまりユニークなため再利用できないというマイナスの面がある、と。確かに再利用できない。でもこれはマイナス
プロジェクト: ロレム・イプサム
@ub_pnrが日本語英語数字がちょうどよく混ざったライセンスフリーの文書を探している。とつぶやいてた。僕もダミー文章にはWikipediaから英数字が混じっていることが多いIT系の記事とかを拾ってきてたけど、CC BY-SAとかなのでリンク張ったりとかちょっと公の場で使うには面倒臭い感じで、パブリック・ドメインのそういう文書群は欲しいと思ってた。ということでそういうダミー文章のためのロレム・イプサム(roremu ipusamu)というCC0なプロジェクトを作った。 主な用途としては、CSSのプレビューやアプリケーションのモックアップに使うダミー文章を想定している。スタイル・ガイドを書く時の仮テキストに使ったり、ブログのテーマのプレビューを作成するために使ったり、アプリ・ストアに載せるスクリーンショットを取る時に使ったりなどなど。CC0なのでどのように使っても良いし、改変しても良い。 こ
ディテール
Webページにおける細かいパーツを正しく実装することがユーザー経験の向上につながるということについて書かれたUI: Getting the Details Rightを読んだ。WordPressの結構な人気テーマでもタブがあたかもパンくずリストのように表示されていたりするし、頭ではわかってても実践にまでは至らないことも多そう。 Getting the Details Rightではいくつかの有名なパターンを例に、こう実装するとユーザーが混乱しにくいという説明をしている。例えばスライドショーでは切り替えの矢印以外にも「いくつくらい画像が用意されていて、今何番目を表示しているのか」を示すドットを使ったインジケーターが重要であるとしている。また、画像や画面の切り替えにも簡単なアニメーションを導入することによって、ユーザーに「どう切り替わったのかをアニメーションで示すことによって戻る方法を示唆でき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
