CSS3 [CSS] HSL의 컬러 속성을 변수로 만들어 활용하기 css로 색상을 지정하는 방법은 여러가지가 있습니다. 이중 HEX 코드 (#ffff00) 와 RGB값 (rgb(255,255,0)) 으로 지정하는 방법은 많이 사용하고 있지만 HSL 값을 사용하는 경우는 매우 드뭅니다. 아래 영상에서는 HSL을 활용하면 좋은 점에 대한 팁을 알려주고 있습니다. 한번 참고해보시면 잘 사용하시면 레벨을 한단계 더 올려줄 수 있을 것 같습니다. https://designup4.tistory.com/91 [CSS 색상 지정 팁] HSL의 속성을 변수로 만들어 활용하기 HSL HSL은 아래 색을 표현하는 색상, 채도, 명도의 앞글자들입니다. Hue : 색상 - 0 ~ 360 사이 숫자 (= 색깔 방향 의미 숫자) (숫자만 기재) - 0 (= 360)은 빨간색, 120은 녹색, 2.. 2021. 10. 9. css animation 로 만드는 로딩 효과 애니메이션 자바스크립트 없이 css 만을 이용하여 만든 로딩 효과 애니메이션입니다. css 변수를 활용하여 각 원형 이미지에 시간차로 효과를 적용하여 돌아가는 모습을 구현하였습니다. https://designup4.tistory.com/37 css animation, css 변수 (로딩 효과 애니메이션) 소스 코드 적용 예제 보기 http://designup.kr/study/css_loading/ 주요 관련 소스 사용자 지정 CSS 속성 사용하기 (변수) https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties ht.. designup4.tistory.com 2021. 10. 9. css mix-blend-mode로 포토샵 오버레이 효과 내는 방법 항상 쓰던 것만 하던 것만 이용해서 작업을 하다 보니 css가 이 정도로 발전했는지 몰랐네요. 사실 과거에는 익스플로러가 항상 발목을 잡는 바람에 신기술이 있어도 그냥 바라만 보고 있었지만 이제는 익스플로러를 슬슬 버려도 될 것 같기 때문에 이제는 신기술을 적극 활용할 수 있는 시기인 것 같습니다. 일괄적으로 적용해야 하는 워터마크 작업이나 간단한 보정들에 활용하면 좋을 것 같네요~ https://designup4.tistory.com/44 [css] mix-blend-mode, object-fit, object-position 작업 소스 적용 예제 보기 http://designup.kr/study/css_effect_blend/ 주요 관련 소스 mix-blend-mode https://developer.. 2021. 10. 9. 이전 1 다음
