3行で服喪する
（2016/10/17 10:14 更新: ベンダープレフィックスの必要性を追記） 先日タイ国王が崩御されたが、これを受けてタイ航空をはじめ、多くのタイ関連Webページがモノクロ化されて喪に服しており話題になっている。タイ国政府観光庁の日本向けサイトもモノクロになっていた。 タイ系企業の服喪・自粛っぷりがスゴイ！軒並みサイトがモノクロ化。タイ航空に至ってはプミポン国王が雲の上で手を振っているし…！30日間の娯楽禁止令も出された模様。愛されているなぁ。 pic.twitter.com/Q0wUXA0A5a — USHISUKE (@USHISUKE) October 14, 2016 テキストのみのサイトならばともかく、画像も多いサイトであれば、アセットをすべてグレースケール化しなければならず、改修は結構な工数がかかる... .....ように思うが、実際はCSS filterを使うことで簡単
【CSS】Webでマルチカラムレイアウトが可能に
雑誌の組版でよくある、マルチカラムレイアウト。Illustratorなどではテキストボックスを2つ作ってスレッドテキストリンクという機能で繋げれば、長い文章は自動で次のカラムへ文章が送られます。 Illustratorのスレッドテキストリンク機能。文章が隣のカラムに送られているのが分かります。 今までWebでは、文章は手動でカラム分けしなければいけなかったのですが、なんと気が付いたらCSSでマルチカラムレイアウトの設定が可能になっていました。 対応ブラウザ おなじみの Can I use から引用。(2016年05月25日現在) IEは10から。Edgeも対応、Chrome Safari Firefoxではベンダープレフィックスが必要です。スマフォのブラウザでも問題無さそう。 ＜2020年01月追記＞ 現在は全ての主要ブラウザで対応可能になりました。 使い方 タグに、カラム数を示すCSSプ
Alex the CSS Husky
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Mastering Kerning for Visually Harmonious Typography
What is Kerning?: Free Kerning Visualizer Tool & How to Master the Art of Professional Typography Originally posted on January 28, 2024 @ 10:06 pm Kerning is a critical skill in the realm of typography that deals with the spacing between characters to achieve visual harmony. It’s not merely about setting a uniform space, but rather adjusting the distance to account for the unique shapes and sizes
Website Style Guide Resources
Website Style Guide Resources GitHub repo Twitter updates Contributors Examples Real life pattern libraries, code standards documents and content style guides. Carbon Design System By IBM Carbon is the design system for IBM Cloud products. It is a series of individual styles, components, and guidelines used for creating unified UI. frontendcodepatternsvoiceandtone Code For America frontendpatterns
Retina Display向け.5pxのborderまとめ - Qiita
Retina Display向けCss小数点の扱いについて Macbook ProやiPhoneなどRetina Displayで.5pxのborderでStyle定義すると綺麗な線が表現できます。 Macbook ProやiPhoneなどRetina Displayで.5pxのborderを表示しながら、非Retina向けには1pxのborderを敷きたい場合、以下の方法pxを指定するとRetina/非Retinaどちらとも1コードで対応可能です。 こちらは以下のブラウザのみ.5pxに表示されます。それ以外は通常の1pxとなります。 対応ブラウザ Safari iOS Safari Firefox Chrome, Operaについては1pxで表示されます。ちなみに.98pxではSafariやiPhoneでも1px表示になってしまいます。 すべて最新版のみ確認しています。古いバージョンにつ
CSS filter プロパティで 「半透明ガラス」 効果を再現してみる
2つ前の記事、「Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に」 で、::backdrop 疑似要素に色々スタイル当てて遊んでたとき、::backdrop 疑似要素に対しては半透明の白いレイヤーになるようにスタイル当てて、その上で、CSS filter プロパティを使って画面全体をぼやかしたら、iOS 7 （Windows Aero ...） とかで使われてる、所謂 「半透明ガラス」 っぽい効果が出せるんじゃね？ と思ってやってみました。 実際に iPhone の Safari で表示してみた例が下記の画像です。 ただし、dialog 要素や ::backdrop 疑似要素を使っちゃうと、現時点では Chrome Canary で、さらにフラグを立てないと動作しないっていう、ほとんどの人が試せない状態になってしまうので、今回は div 要素を J
Caption Hover Effects | Codrops
A tutorial on how to create some subtle and modern caption hover effects. Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
Sprite sheet animation with steps(). If you don’t... | simurai
Sprite sheet animation with steps(). If you don’t wanna use gifs on your site and rather PNGs for better colors, but still be able to animate them, here an option: CSS keyframe animations have a property called animation-timing-function and one of the options is to use the steps() feature like in this example: div { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-positio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BEM
Bulma: Free, open source, and modern CSS framework based on Flexbox
まだ中央寄せで消耗してるの？ - @yoshiko_pg
Reverse Text Color Based On Background Color Automatically In CSS | CSS-Tricks
una.im | Introducing CSSgram: A CSS Library for Instagram Filters
line-height の単位 | 有限会社ハートブレーン
ちゃんとCSSを書くために - CSS/Sass設計の話
Imageless iPhone 4 by Vasyl Zubach
Hackery, Math & Design — Acko.net
HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck