Emojicons - 초경량 아이콘 세트인 Emojis

약간의 CSS를 사용하면 이모티콘을 매우 ​​가볍고 멋진 아이콘 세트로 바꿀 수 있습니다. 물론 OS마다 다르게 보이지만 그게 매력의 일부라고 생각합니다.

트릭은 이모티콘이 포함된 HTML 요소에 다음 CSS를 설정하는 것입니다.

<span class="icon">👍🏽</span>

.icon {
  background-color: cadetblue;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

선택한 컨테이너에 이모티콘을 넣으면 배경색이 적용됩니다.


그림 1. 단색 채우기 색상의 이모티콘



이것으로 완전히 멋질 수 있습니다.

배경

거기에 그라디언트를 던지십시오 - 왜 안되나요?


그림 2. 그라데이션 채우기가 있는 이모티콘



아니면 Grumpy Cat의 얼굴이 있는 불 아이콘이 필요할 수도 있습니다. 나는 당신의 인생을 모릅니다.


그림 3. 이미지 채우기가 있는 이모티콘



참고: 녹아웃 효과에 윤곽선만 사용되기 때문에 Windows에서는 잘 보이지 않습니다.

그림자

그림자를 만들 수 있는 몇 가지 방법이 있습니다.

위와 같은 멋진 배경을 원한다면 필터를 사용할 수 있습니다.

.icon {
  background: linear-gradient( #d6ff7f, #003bcc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(30px 10px 4px #4444dd);
}

그림 4. 필터를 사용하여 그림자가 있는 이모티콘



그러나 경고 - 웹 사이트에서 수많은 필터를 사용하는 경우 렌더링 성능에 영향을 미칠 수 있습니다.

text-shadow CSS 속성을 사용할 수도 있습니다. 이것에 대한 이상한 점은 텍스트 그림자가 아이콘 내부를 채우고 배경색이 된다는 것입니다. 따라서 스프레드나 오프셋이 없는 텍스트 그림자를 추가하면 이것이 배경이 될 수 있습니다. 추가 텍스트 그림자가 이 첫 번째 그림자 아래에 그려지므로 텍스트 그림자를 추가할 수 있습니다.

div {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 0 cadetblue, 2px 2px 0 black;
}

그림 5. 텍스트 그림자를 사용하여 그림자가 있는 이모티콘

요점

윤곽선이 있는 이모티콘은 조금 더 까다롭습니다. 불행히도 webkit-text-stroke CSS 속성은 웹킷 브라우저의 이모티콘에서 작동하지 않는 것 같습니다. 🤷 Edge에서 작동합니다. 그러나 그림자 링을 사용하여 그렇게 할 수 있습니다.

div {
  background: linear-gradient( #d6ff7f, #003bcc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: 
    drop-shadow(0px -1px 0 black) 
    drop-shadow(1px -1px 0 black) 
    drop-shadow(-1px 0 0 black) 
    drop-shadow(1px 0 0 black) 
    drop-shadow(-1px 1px 0 black) 
    drop-shadow(0 1px 0 black) 
    drop-shadow(1px 1px 0 black)

그림 6. 그림자 필터를 사용한 윤곽선이 있는 이모티콘



또는 텍스트 그림자를 사용하여 다시 - 첫 번째는 배경색을 제공합니다.

div {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 
    0 0 0 white,
    -2px -2px 0 black,
    0px -2px 0 black,
    2px -2px 0 black,
    -2px 0 0 black,
    2px 0 0 black,
    -2px 2px 0 black,
    0 2px 0 black,
    2px 2px 0 black;
 }

그림 7. 텍스트 그림자를 사용한 윤곽선이 있는 이모티콘



그림자는 이모티콘에 약간 이상하게 칠해지기 때문에 윤곽선이 잘 보이도록 실험해야 할 수도 있습니다.

접근성

이모티콘은 상자에서 꺼내자마자 사용할 수 있습니다. 예를 들어 보이스오버는 이모티콘을 만나면 내장 대체 텍스트처럼 이모티콘의 이름을 읽습니다.


그림 8. 이모티콘 접근성 테스트



스크린리더가 말하는 것을 무시하고 싶다면 아이콘 요소에 aria-label와 같은 aria-label="tweet icon"를 추가할 수 있습니다. .

브라우저 지원

Safari, Chrome, Firefox 및 Edge에서 이 데모를 시도했는데 모두 훌륭하게 작동했습니다. IE11 지원이 필요하시다면 우선 죄송합니다. 마이크로소프트도 더 이상 이를 지원하고 싶지 않습니다. 그러나 실제로, 당신은 아마도 이 경우에 이 기술을 사용할 수 없을 것입니다. Windows 이모티콘은 aria-hidden="true" 및 background-clip 를 사용할 때 윤곽선만 녹아웃되기 때문에 흥미로운 경우입니다. 꽤 멋있을 것 같지만 단색을 원하신다면

마무리

다음은 웹 개발에 매우 ​​유용하거나 멋지게 보이는 스타일의 몇 가지 이모티콘입니다.


그림 9. 이모티콘 목록



일부는 사용 중인 OS에 따라 다른 것보다 더 나을 수 있습니다.

톤이 더 있습니다. Get Emoji , Emojipedia 또는 수많은 이모티콘 웹 사이트 중 하나를 확인하여 이모티콘 목록을 얻을 수 있습니다.

읽어 주셔서 감사합니다. 평화.