Pure CSS로 '도구 설명 꼬리' 효과를 어떻게 만들 수 있나요?

Linda Hamilton
풀어 주다: 2024-11-08 20:33:02
원래의
599명이 탐색했습니다.

How Can I Create a

순수한 CSS로 "툴팁 꼬리" 만들기

CSS만을 사용하여 "툴팁 꼬리"를 만든다는 개념이 매력적입니다. 이 효과를 얻는 방법은 다음과 같습니다.

테두리 트릭을 사용한 기본 "툴팁 꼬리"

첫 번째 예에서는 영리한 테두리 조작을 사용하여 "툴팁 꼬리" 효과를 만듭니다.

HTML:

<div>Cool Trick:
    <div class="tooltiptail"></div>
</div>
<br>

<div>How do I get this effect with only CSS?
    <div class="anothertail"></div>
</div>
로그인 후 복사

CSS:

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff #ffffff;
    border-style: solid;
    border-width: 20px;
    width: 0px;
    height: 0px;
}

.anothertail {
    background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
    display: block;
    height: 29px;
    width: 30px;

}
로그인 후 복사

향상됨 상자 그림자가 있는 "툴팁 꼬리"

"도구 설명 꼬리" 끝에 치수와 그림자를 추가하려면 상자 그림자를 활용할 수 있습니다.

#tailShadow {
    position: absolute;
    bottom: -8px;
    left: 28px;
    width: 0;
    height: 0;
    border: solid 2px #fff;
    box-shadow: 0 0 10px 1px #555;
}
로그인 후 복사

크로스 브라우저 호환 Shadow가 포함된 "Tooltip Tail"

다음 스니펫은 box-shadow에 대한 브라우저 간 호환성을 보장합니다. 효과:

#tailShadow {
    position: absolute;
    bottom: -8px;
    left: 28px;
    width: 0;
    height: 0;
    border: solid 2px #fff;
    -moz-box-shadow: 0 0 10px 1px #555;
    -webkit-box-shadow: 0 0 10px 1px #555;
    box-shadow: 0 0 10px 1px #555;
}
로그인 후 복사

이러한 기술을 사용하면 CSS에서 웹 요소의 시각적 매력과 기능을 향상시키는 사용자 정의 "툴팁 꼬리"를 만들 수 있습니다.

위 내용은 Pure CSS로 '도구 설명 꼬리' 효과를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!