Liquid CSS！まるで液体のようなデザインを実装するCSS技
Liquid CSS窓ガラスに張りつく水滴。コロコロ転がる水銀。 接近する液体同士が表面張力で引かれ合う様子。 これらは物理現象ですが、デザインにおいても液体表現は面白いですよね。 実は、 CSSだけでも 近い表現が可能です（※制限あり）。 まずは作り方、 簡単3ステップ で解説します。 下のサンプルをご覧ください。 See the Pen Demo: Liquid CSS by Yusuke Nakaya (@YusukeNakaya) on CodePen. blur 親要素に filter プロパティの blur() を指定します。 全体の描画がボケます。 contrast blur() と同時に contrast() も指定します。 ボケた描画のコントラストを上げます。 background ボケ感＋高コントラストの要素にさらに background で背景色を指定します。 すると
IT系女子ログ
こちらは、Webアクセシビリティ Advent Calendar 2019の11日目の記事です。 普及活動のご紹介 目的 「少しでも誰かの『べんり』を増やすこと」と「アクセシビリティに気を配りながら制作する空気を、じんわりと社内につくること」を目的としています。 「まずは自分から。まずは自社から。まずはできることから。」がポリシーです。 内容 小さく継続的に行うこと。 なるべく実務でどう対応できるかの話題もからめて話すこと この2点を意識しています。 社内であたりまえのことにしていきたい、できるだけ自分ごととして考えてほしい、という思いからです。 前年の課題と今年の目標 2018年は制作ガイドラインをアクセシビリティを考慮したものへアップデートしたり、初のアクセシビリティ対応の案件があったりと、社内でアクセシビリティに関われる割合が大きい１年でした。 今年の目標は、新しい職場での勉強会の主
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
