Webエンジニア目指して#47
とあるサイトの模写をしてます。得た知見をメモっていきます
文字を縦横軸の中央に配置
display:flex +
align-items:center +
justify-content: center
cssによるグラデーション
border-image: linear-gradient(to right, #fff 0%, #000 100%);
幅や座標に計算値を使う
width: calc(100% - 50px);
before,after疑似要素
flexboxの要素間にスペースを設ける
display: flex +
justify-content: space-between
hover動作などスマホへのレスポンシブ表示時に不要なcssは@mediaでまとめると便利
どちらかというと知見
posituon:absoluteの要素に:hoverは効かない
どうやらそうらしい
cssで矢印を作る
角ボーダーを90度回転させると矢印になる
隣接セレクタにスタイル適用
p+p{margin-top:5px;} 上の例では、p要素が連続する場合にmarginが適用される
文字にグラデーション
background: -webkit-linear-gradient(0deg , #fff, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
ネガティブマージン
margin:-20px;のようにするとボックスから指定の値だけ要素が飛び出る
flex-boxで並べた要素を並べ替える
対象要素にorder:1;など
flex-boxの末端に要素を配置
align-self: flex-end; 親のalign-itemを無視できる。
一区切りついたのでここまで。ではでは
