レスポンシブ対応にメディアクエリなしで、CSSの関数で定義！border-radiusの値を変えるテクニック

2021/10/14 36 users border-radius ビューポート 矩形 マージン 関数

border-radiusの値をデスクトップとスマホで変える、例えばビューポートが大きくてマージンがある場合は8pxで角丸にし、ビューポートが小さくてマージンがない場合は0pxで矩形にする。 メディアクエリで簡単に実装できると思うかもしれません。しかし、ビューポートのサイズが小さく、マージンがある場合に8pxの角丸にな... 続きを読む

8px / コーディング初心者から学ぶ | elle-height

2015/03/08 22 users コーディング初心者

Ladies Learning Codeの概要 女性にtech系スキルを教える非営利団体 カナダ国内の20都市でワークショップを開催している HTML/CSSだけでなく､プログラミング言語やデザイン系の講座も多い ワークショップでは各テーブルに受講者4人､メンター1人が座り､メンターは同じテーブルの受講者の学習をサポートする メンターを務めるようになって改めて学んだこと 初心者にとって写経すること... 続きを読む

[CSS]画像を使わずに、スタイルシートでぎざぎざの線をかくテクニック | コリス

2013/07/11 77 users コリス linear-gradient div ノコギリ 実装

画像を使わずに、ノコギリの歯のようなぎざぎざの線をスタイルシートでかくテクニックを紹介します。 下記は、p要素一つだけです。 実装は、こんな感じです。 HTML HTMLはpでもdivでも適当に。 [html] 塩レモン [/html] CSS ぎざぎざの線はlinear-gradientでかきます。 ぎざぎざのサイズは、4pxを4箇所、それを倍にした8pxを2箇所、変更してください。 [css]... 続きを読む