css팁

1. 이미지로 텍스트 채우기

h1{
  background-image: url('images/flower.jpg');
  background-clip: text;
  color: transparent;
  background-color: white;
}

2. 텍스트에 획 추가

text-stroke텍스트 에 획이나 윤곽선을 추가하는 속성을 사용하여 텍스트를 더 읽기 쉽고 가시적으로 만듭니다 .

/* 🎨 Apply a 5px wide crimson text stroke to h1 elements */

h1 {
  -webkit-text-stroke: 5px crimson;
  text-stroke: 5px crimson;
}

3. 텍스트 강조

h1 {
  text-emphasis: "⏰";
}

4. span태그 사용하지 않고 강조하기

 h1::first-letter{
  font-size: 2rem;
  color:#ff8A00;
}

5. 변수를 사용해서 css 컬럴변경

/* 🎨 crimson color will be applied as var(--black) is not defined */

:root {
  --orange: orange;
  --coral: coral;
}

h1 {
  color: var(--black, crimson);
}

6.텍스트를 세로또는 가로로 배치

<h1>Cakes & Bakes</h1>
--
/* 💡 specifies the text layout direction to sideways-lr  */

h1 {
  writing-mode: sideways-lr;
}

7.레인보우 애니메이션

button{
  animation: rainbow-animation 200ms linear infinite;
}

@keyframes rainbow-animation {
  to{
    filter: hue-rotate(0deg);
  }
 from{
    filter: hue-rotate(360deg);
  }
}

8. 유튜브 사용해서 템플릿 만들기

https://github.com/nisarhassan12/portfolio-template

9. hover 줌인처리 하기

/* 📷 Define the height and width of the image container & hide overflow */

.img-container {
  height: 250px; width: 250px; overflow: hidden;
 }

/* 🖼️ Make the image inside the container fill the container */

.img-container img {
  height: 100%; width: 100%; object-fit: cover; 
  transition: transform 200m ease-in;
 }

 img:hover{
  transform: scale(1.2);
 }

10. attribute selector 

<a href="">HTML</a>
<a>CSS</a>
<a href="">JavaScript</a>

---

/* 🔗 targets all a elements that have a href attribute */

a[href] {
  color: crimson;
}

11. clipping elements

clip-path속성을 사용하여 요소를 삼각형 또는 육각형과 같은 사용자 지정 모양으로 변경가능

div {
  height: 150px;
  width: 150px;
  background-color: crimson;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

12. @support rule

https://github.com/devsyedmohsin/css-tips-tricks#check-if-property-is-supported 

GitHub - devsyedmohsin/css-tips-tricks: A handmade collection of pro css tips tricks. Give it a star if you find it useful 🌟

@supports (accent-color: #74992e) {
/* code that will run if the property is supported */
  blockquote {
    color: crimson;
  }

}

13.css중첩

<header class="header">
  <p class="text">Lorem ipsum, dolor</p>
</header>

--

/* 🎉 You can try CSS nesting now in Safari Technology Preview*/

.header{

  background-color: salmon;

  .text{
    font-size: 18px;
  }

}

14.클램프 기능

clamp()반응적이고 유동적인 타이포그래피에 이 기능을 사용

/* Syntax: clamp(minimum, preferred, maximum) */
h1{
  font-size: clamp(2.25rem,6vw,4rem);
}

15. 필수 속성이 없는 입력, 선택 및 텍스트 영역과 같은 양식 필드의 스타일을 지정할 수 있습니다 :optional

/* Selects  all optional form fields on the page */

*:optional{
  background-color: green;
}

16. 텍스트 열 만들기

/* 🏛️ divide the content of the "p" element into 3 columns  */

p{
  column-count: 3;
  column-gap: 4.45rem;          
  column-rule: 2px dotted crimson;
}