新しいCSSを使う
要素の背後の領域に、ぼかしのグラフィック効果を適用することができるbackdrop-fillteの実装。aspect-ratioを使用することで、レスポンシブ対応の画像をアスペクト比を保ったまま実装できる。また新しいセレクタである疑似クラスの、:is()、:not()の使用。
See the Pen 新しいCSS 1 / backdrop-fillterとaspect-ratioと新しい疑似クラス by tam3 (@tamako8) on CodePen.
アコーディオンパネルの実装
jqueryを使いエリアを開閉した。任意の場所をクリックしたら情報が表示され1つ開いたら他は閉じるため、ユーザーが情報を選択できる。
See the Pen accordion-js by tam3 (@tamako8) on CodePen.
CSSのみで実装するテキストの装飾
Apple風のテキストグラデーション。背景にグラデーションカラーを設定し、背景をテキストの形でくり抜き、文字のカラーを透明にする。CSSのみで表現でき、視覚的効果もあるので見出しなどに使いたい。
See the Pen テキストの装飾(グラデーション) by tam3 (@tamako8) on CodePen.
CSSのみで実装するテキストアニメーション
CSSアニメーションを使用。アニメーションをつけたい要素の文字を一文字ずつspanで囲み、Y方向にずらして文字全体を隠し、ディレイをかけて1文字ずつ出現させる。forwards、アニメーションが終わった後そのままにする処理を行った。
See the Pen text-animation by tam3 (@tamako8) on CodePen.