xiao-T

## Breaking down CSS Box Shadow vs. Drop Shadow ## CSS Box Shadow 对比 Drop Shadow > 原文地址: [https://css-tricks.com/breaking-css-box-shadow-vs-drop-shadow/](https://css-tricks.com/breaking-css-box-shadow-vs-drop-shadow/) **本文版权归原作者所有，翻译仅用于学习。** --------- > ***Drop shadows***. Web designers have loved them for...

## Breaking out with CSS Grid explained ## 打破边界布局 CSS Grid 讲解 > 原文地址: [https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/](https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/) **本文版权归原作者所有，翻译仅用于学习。** --------- > [This really nice technique for creating a full width image inside a...

## It’s Time To Start Using CSS Custom Properties ## 是时候使用 CSS 自定义属性了 > 原文地址: [https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/](https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/) **本文版权归原作者所有，翻译仅用于学习。** --------- > Today, CSS preprocessors are a standard for web development. One of...

## Making a Pure CSS Play/Pause Button ## 纯 CSS 播放／暂停 ICON > 原文地址: [https://css-tricks.com/making-pure-css-playpause-button/](https://css-tricks.com/making-pure-css-playpause-button/) **本文版权归原作者所有，翻译仅用于学习。** --------- > Globally, the media control icons are some of the most universally understood...

## Leveling Up With React: Container Components ## React 进阶：Container 组件 > 原文地址: [https://css-tricks.com/learning-react-container-components/](https://css-tricks.com/learning-react-container-components/) **本文版权归原作者所有，翻译仅用于学习。** --------- > This tutorial is the second of a three-part series on React by [Brad...

## Stateless functional components ## 无状态功能组件 > 原文地址: [http://frontendinsights.com/stateless-functional-components/](http://frontendinsights.com/stateless-functional-components/) **本文版权归原作者所有，翻译仅用于学习。** --------- > In 2015, [Dan Abramov](https://nafrontendzie.pl/nowy-poczatek/) wrote a great article about [presentational and container components](http://medium.stfi.re/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0?sf=voozdng#.icy524ihh) in React. I like the...

## Flexbox: Don't Forget about flex-shrink ## Flexbox: 不要忽略 flex-shrink > 原文地址: [https://codepen.io/noahblon/post/practical-guide-to-flexbox-dont-forget-about-flex-shrink](https://codepen.io/noahblon/post/practical-guide-to-flexbox-dont-forget-about-flex-shrink) **本文版权归原作者所有，翻译仅用于学习。** --------- > As I learned flexbox, I was captivated by the way items grow to fit...

## Flexbox: space-between, Flexbox's Unsung Hero ## Flexbox 的幕后英雄：space-between > 原文地址: [https://codepen.io/noahblon/post/a-practical-guide-to-flexbox-understanding-space-between-the-unsung-hero](https://codepen.io/noahblon/post/a-practical-guide-to-flexbox-understanding-space-between-the-unsung-hero) **本文版权归原作者所有，翻译仅用于学习。** ----- > The more I use ```flexbox```, the more one rule comes up over and over again:...

## Coloring SVGs in CSS Background Images ## 如何设置 CSS 背景图中的 SVG 的颜色 > 原文地址: [https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images](https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images) **本文版权归原作者所有，翻译仅用于学习。** --------- > I love using ```SVG``` in ```CSS``` background images but it sucks...

## Animation tip: Lerp ## 动画技巧：Lerp > 原文地址: [https://codepen.io/rachsmith/post/animation-tip-lerp](https://codepen.io/rachsmith/post/animation-tip-lerp) **本文版权归原作者所有，翻译仅用于学习。** ----- > Ahhhhhhhhhhh I'm blogging again on CodePen! It's been a little while, my bad. 我再次在CodePen上更新我的博客了！个人原因有段时间没更新了。 > Today I want...