三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。 左のSingleだと、divは一つだけ! 左のSingleを例に、実装方法を紹介します。 HTML div一つにclassを加えます。 <div class="hoja">SINGLE</div> CSS 複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要ありません。 ※利用する際は、ベンダープレフィックスを加えてください。 参考:面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free .hoja { color: #dcdce2; position: absolute; top: 50%; left: 50%; margin-left: -180px; margin-top: -90px; width: 180px
[San Francisco のレギュラー書体:Fast Company] Chicago フォントといえば初期の Macintosh ユーザーにとって懐かしい思い出だ。解像度の低い当時の白黒スクリーンに合わせてデザインされた Susan Kare のアイコンと Chicago フォントを覚えているひとは多い。 WatchKit の発表に併せて新しいシステムフォントが20年ぶりに姿を現した。 Apple Releases Its Most Important Typeface In 20 Years | Fast Company * * * 新しいシステムフォント「San Francisco」 Apple Watch のサードパーティ製アプリ開発用キット WatchKit が昨日アップルから発表された。フォント愛好家にはちょっとしたサプライズが含まれていた。20年ぶりにアッ
この記事は webcomponents.org の記事とのクロスポストです。 HTML は言うまでもなく、ウェブページを構成する最も重要な要素です。しかし、提供される機能が低レベルなため、複雑なコンポーネントを作ろうとすると、途端に div だらけの分かりにくい構造になってしまいがちです。例えば、あなたが必要な機能を盛り込んだ独自のコンポーネントを作れるとしたらどうでしょう?例えばそのコンポーネントに、機能を的確に表すタグ名を付けられるとしたら?既存のタグを拡張して、新しい機能を追加できるとしたら? Custom Elements は、それを可能にします。 Custom Elements とはなにか? # Custom Elements は開発者が独自に HTML タグを定義し、サイト上で利用できるようにすることで、繰り返し利用されるコンポーネントを単純化し、再利用する手間を大幅に削減しま
Googleが公開しているデザイン・ガイドラインのアイコンに関するところを読みました。 Icons – Style -Google design guidelines アイコンのデザイン・ガイドラインの対象は、「プロダクト・アイコン」と「システム・アイコン」の2つがあり、デザインする上で注意を払うことや、原則がまとめられています。 プロダクト・アイコン 「プロダクト・アイコン」はGmailやGoogle Mapなどサービスそのものに用いられ、サービスの特性や違いを伝えるものです。 image by Google システム・アイコン 一方「システム・アイコン」は、ユーザインタフェースに用いられるもの。 「プロダクト・アイコン」と比べて、小さいサイズでの使用、単色での使用の想定が必要。 image by Google 作りの違い 「システム・アイコン」がフラットな作りなのに対し、「プロダクト・
We thought it would be interesting to check out a showcase of blue websites, to change things a bit. The clean and fresh characteristics of this color make it a popular choice among web designers, with light cyans being particularly trendy in the modern web design scene. If you liked our red websites compilation as well as our white websites roundup, then you’ll like this one too! These blue websi
[対象: 中級] 展開ボタンやタブを利用したデザインで、標準状態では表示されないコンテンツをGoogleは検索結果の対象にしないかもしれないことを昨日の記事で取りげました。 もう少し詳しい内容を、その次のオフィスアワーでJohn Mueller(ジョン・ミューラー)氏が説明していました。 そのコンテンツが重要なら隠さないほうがいい 一般的に言えば、もしそのコンテンツが本当に見えなかったとしたら、そのコンテンツを重視することに意味があるかどうかを言うのは私たちには難しいということだ。それ(隠されているコンテンツ)が、動画だろうがリンクだろうが画像だろうが関係ない。 基本的にはずっと前からやってきたことだ。 本当に重要で関連性があるコンテンツなら、必ず実際に見えているようにしたほうがいい。 「隠れているんだったら、ユーザーにとっては本当はそんなに大切なことではないんじゃないか? だったら重要視
Originally presented at Baruco 2014. Updated for RubyConf Portugal 2014. Video here: https://www.youtube.com/watch?v=fGFM_UrSp70.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く