カスタムプロパティを使えるブラウザが増えてきました。SCSSやLESSのように、変数を使うことが出来つつあります。
mixinもかけるようになると、うれしいですが、そうなればなったで、CSSは、より複雑なものになっていくのでしょうね。
CSS カスタムプロパティ
111
-
-
イレギュラーぽいボーダー
This is my paragraph. Like my border? This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?
border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック
HT ...
-
background clip, mix blend mode
Hello World
-
降順で、リストを表示する
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
<ol reversed> <li>Lorem ipsum dolor sit amet, consectetur adipiscin ...
-
@counter-style
この記事は、firefoxブラウザで表示してください
- Twenty ten
- Twenty twelve
- Twenty thirteen
HTML
<span class="firefox-only rd-alert-bg pad-s corner">この記事は、firefoxブラウザで表示してください</span> <ul> <li class="items">Twenty ten</li> <li class="items">Twenty twelve ...
-
Raindrops ripple effect on color class , gradient class
この投稿は、WordPressテーマ 「Raindrops 1.413」 のリップルエフェクトクラスを、従来からある color class,gradientクラスで組み合わせた場合の表示例です。
color class
color5color4color3color2color1
color-5color-4color-3color-2color-1gradient class
gradient4gradient3gradient2gradient1gradient ...
-
CSSによるナビゲーションメニュー
123456
222
333
444
555
666
このサンプルは、数字をクリックすると、赤い3桁の数字を表示するだけのサンプルですが、応用するとWordPressのアーカイブ等のページングなども作ることが出来ます
CSSでページングするメリットは、WordPressがページングに使用するクエリ―文字列の制約を受けない点です。サンプルは、get_posts()関数で取得したデータを整形しただけのものですが、w ...