Posts match “ css ” tag:

授權方式(Auhorization): CC-BY 4.0

flexbox 真的頗好用 :)
把文章的tips和tricks翻成中文記錄下來.

  1. 對元素使用絕對位置(position: absolute)時,盡量用margins替代top, left, right, bottom。使用邊界的絕對位置元素在不同螢幕解析度下會比較一致。
  2. 用em取代pixel。em會隨字型大小而改變。當你增加了基本的字型大小在這個例子日期仍然會維持其位置。
  3. 用padding取代margin作為間隔。有時候margin的間隔會導致每一個的崩潰而非堆疊。
  4. 不要害怕用通用的選擇器,有經驗的網頁開發者因為效能避免通用選擇器,你不應該浪費時間在這上面,最初的設計無須擔心效能問題。
  5. 用flexbox建造更複雜的布局關鍵是切成小塊,如果對你可行就別害怕使用flex container。

原文

  1. When absolutely positioning an element use margins instead of top, left, right, bottom. Elements absolutely positioned with margins are more consistent across different screen resolutions.
  2. Use ems instead of pixels. Ems adjust when you change font-size. If you increased the base font size in this example the date would maintain its position.
  3. Use padding instead of margin for spacing. Spaces created with margin sometimes collapse into each other instead of stacking. Sometimes you want this but most of the time it's not helpful. Padding doesn't collapse so it's more predictable than using margins.
  4. Use the universal selector, *, without fear. Experienced web developers avoid the universal selector for performance reasons. You shouldn't spend any time thinking about this. There are performance issues but nothing to worry about when creating the initial design.
  5. The key to creating more complicated layouts with flexbox is to break it into pieces. Don't be afraid to make everything a flex container if that's what works for you.

來源: http://www.sketchingwithcss.com/samplechapter/flexbox.pdf

授權方式(Auhorization): CC-BY 4.0

來源:
CREATE SEAMLESS TEXT GRADIENTS
Codepen

概念

  1. 先用linear-gradient 在background做出漸層效果 background: -webkit-linear-gradient(top,#fd0b58 0,#a32b68 100%);
  2. 接著使用background-clip,用text把background clip -webkit-background-clip: text;
  3. 最後把文字設成 trasparent -webkit-text-fill-color: transparent;

CSS from codepen

.wrap {
  margin: 200px auto;
  width: 400px;
  border: 1px dashed #ccc;
  
  p {
    padding: 40px;
    font-family: 'Helvetica Neue';
    font-size: 24px;
    line-height: 30px;
    background: -webkit-linear-gradient(top,#fd0b58 0,#a32b68 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}