CSS

개발

CSS

sooros51327/8/2022CSS

currentColor

<color> - CSS: Cascading Style Sheets | MDN

CSS <color> 자료형은 색을 나타냅니다. <color>는 이 색이 배경과 어떻게 합성되어야 하는지 나타내는 알파 채널 투명도 값도 가질 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/color_value

현재 적용되어 있는 color값을 가져온다. 가져온 값으로 background나 border같은 색이 필요한 곳에 넣을 수 있다.

응용해서 상속 컬러로도 가능.

css

div {
	color: inherit;
	border: 1px solid #ddd;
	border-color: currentColor;
}

-webkit-line-clamp

-webkit-line-clamp - CSS: Cascading Style Sheets | MDN

-webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한합니다.

https://developer.mozilla.org/ko/docs/Web/CSS/-webkit-line-clamp

콘텐츠를 지정한 줄 수만큼으로 제한한다.

-webkit-line-clamp만 사용하는 경우, 말줄임표는 노출되나 넘친 콘텐츠가 숨겨지지 않으므로 대개 overflow 속성 또한 hidden으로 설정해야 합니다.

💡

사용 조건

display 속성이 -webkit-box 또는 -webkit-inline-box

-webkit-box-orient 속성이 vertical일것

animation을 이용한 다양한 배경들

animation만을 이용해 다양한 배경들을 만든 예제

https://alvarotrigo.com/blog/animated-backgrounds-css/

mix-blend-mode 응용

css의 mix-blend-mode를 이용해서 홀로그램, 빛 효과를 낼 수 있다.

Holograms, light-leaks and how to build CSS-only shaders - Robb Owen

Get a shiny WebGL look without actually using WebGL. In this article we take a look at how CSS blend modes unleash the potential of cool compositing effects without the need for JavaScript

https://robbowen.digital/wrote-about/css-blend-mode-shaders/

다국어 개발 CSS 5가지 팁

Mind your language - Robb Owen

Building flexible, multi-lingual sites can be tricky. This post takes a look at five steps to help things run smoothly

https://robbowen.digital/wrote-about/minding-your-language/

View Archive