>[success] 這里收集 Code Pen 的一些 demo [TOC] # 陰影屬性簡介 ```css { box-shadow: none| [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ] } ``` 以?`box-shadow: 1px 2px 3px 4px #333`?為例，4 個數值的含義分別是，x 方向偏移值、y 方向偏移值 、模糊半徑、擴張半徑。 >擴張半徑是以陰影的外邊界向外擴展（為正數）或者向內抵消原來的陰影（為負數），當負數絕對值大于等于某方向的陰影偏移量時，該方向的陰影消失。 <iframe height="300" style="width: 100%;" scrolling="no" title="陰影屬性" src="//codepen.io/chenmingk/embed/Bgazpw/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chenmingk/pen/Bgazpw/'>陰影屬性</a> by 陳明康 (<a href='https://codepen.io/chenmingk'>@chenmingk</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> # 立體投影 ***** * 立體投影的關鍵點在于利于偽元素生成一個大小與父元素相近的元素，然后對其進行 rotate 以及定位到合適位置，再賦于陰影操作 * 顏色的運用也很重要，陰影的顏色通常比本身顏色要更深，這里使用 hsl 表示顏色更容易操作，l 控制顏色的明暗度 * `z-index：-1`可以讓用于投影的元素被父元素覆蓋 <iframe height="300" style="width: 100%;" scrolling="no" title="立體投影" src="//codepen.io/chenmingk/embed/qzBZaJ/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chenmingk/pen/qzBZaJ/'>立體投影</a> by 陳明康 (<a href='https://codepen.io/chenmingk'>@chenmingk</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> # 文字長陰影 ***** `H(hue 色調)、S(saturation 飽和度)、L(lightness 亮度)`，`hsl($hue, $saturation, $lightness)`，H 取值范圍是 0°~360° 的圓心角，S 和 L 都是 0~100% 的取值范圍。 ?下圖是 H(色調) 取值的轉盤圖，我們需要記住六大主色： - 0° / 360°為紅色(red) - 60°為黃色(yellow) - 120°為綠色(green) - 180°為青色(cyan) - 240°為藍色(blue) - 300°為紫紅色(magenta) 如 `hsl(300, 50%, 50%)`，300 就在轉盤上的 300°，為紫紅色。  陰影其實是存在明暗度和透明度的變化的，所以，對于漸進的每一層文字陰影，明暗度和透明度應該都是不斷變化的。這個需求，SASS 可以很好的實現，下面是兩個 SASS 顏色函數： * `fade-out`?改變顏色的透明度，讓顏色更加透明 * `desaturate($color, $amount)`?改變顏色的飽和度值，讓顏色更少的飽和（這個屬于 SASS 的 HSL 函數） <iframe height="300" style="width: 100%;" scrolling="no" title="wLvGyz" src="//codepen.io/chenmingk/embed/wLvGyz/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chenmingk/pen/wLvGyz/'>wLvGyz</a> by 陳明康 (<a href='https://codepen.io/chenmingk'>@chenmingk</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> # 圖片陰影（彩色） ***** 利用偽元素，生成一個與原圖一樣大小的新圖疊加在原圖之下，然后利用濾鏡模糊?`filter: blur()`?配合其他的亮度/對比度，透明度等濾鏡，制作出一個虛幻的影子，偽裝成原圖的陰影效果。 `filter: blur(10px) brightness(80%) opacity(.8);` <iframe height="300" style="width: 100%;" scrolling="no" title="圖片陰影" src="//codepen.io/chenmingk/embed/qzBNLN/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chenmingk/pen/qzBNLN/'>圖片陰影</a> by 陳明康 (<a href='https://codepen.io/chenmingk'>@chenmingk</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> # 文字霓虹燈效果 本質上都是大范圍的?`box-shadow`?過渡效果與白色文字的疊加 使用 CSS3 animation 改變 `text-shadow` 屬性 <iframe height="300" style="width: 100%;" scrolling="no" title="文字霓虹燈" src="//codepen.io/chenmingk/embed/ZdEpzE/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chenmingk/pen/ZdEpzE/'>文字霓虹燈</a> by 陳明康 (<a href='https://codepen.io/chenmingk'>@chenmingk</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> # CSS Shape [https://www.cnblogs.com/coco1s/p/6992177.html](https://www.cnblogs.com/coco1s/p/6992177.html) [https://css-tricks.com/the-shapes-of-css/](https://css-tricks.com/the-shapes-of-css/) # 瀑布流 關鍵點，橫向 flex 布局嵌套多列縱向 flex 布局 ```css $lineCount: 4; // 行數 $count: 8; // 列數 // random -> [0, 1] 隨機生成高度 @function randomNum($max, $min: 0, $u: 1) { @return ($min + random($max)) * $u; } // 隨機生成顏色 @function randomColor() { @return rgb(randomNum(255), randomNum(255), randomNum(255)); } .g-container { display: flex; flex-direction: row; justify-content: space-between; overflow: hidden; } .g-queue { display: flex; flex-direction: column; flex-basis: 24%; } .g-item { position: relative; width: 100%; margin: 2.5% 0; } // [start, end) @for $i from 1 to $lineCount+1 { .g-queue:nth-child(#{$i}) { @for $j from 1 to $count+1 { .g-item:nth-child(#{$j}) { height: #{randomNum(300, 50)}px; background: randomColor(); &::after { content: "#{$j}"; position: absolute; color: #fff; font-size: 24px; top: 50%; left: 50%; transform: translate(-50%, -50%); } } } } } ``` <iframe height="265" style="width: 100%;" scrolling="no" title="rXmvEp" src="//codepen.io/chenmingk/embed/rXmvEp/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chenmingk/pen/rXmvEp/'>rXmvEp</a> by 陳明康 (<a href='https://codepen.io/chenmingk'>@chenmingk</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>