IT story

순수 CSS를 사용하여 "툴팁 꼬리"를 어떻게 만들 수 있습니까?

hot-time 2020. 9. 9. 20:17
반응형

순수 CSS를 사용하여 "툴팁 꼬리"를 어떻게 만들 수 있습니까?

방금 깔끔한 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;
}
<div>Cool Trick:
  <br />
  <div class="tooltiptail"></div>
</div>
<br />

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

이렇게하면 "도구 설명 꼬리"라는 작은 화살표 / 삼각형 효과가 생성됩니다. 이것은 내 마음을 날려 버린다! 이게 어떻게 작동하는지 정말 궁금 해요?!

또한이 CSS 트릭을 확장하여 다음과 같은 효과를 만드는 방법이 있습니까?

여기에 이미지 설명 입력

이것은 흥미로운 문제입니다. 지금은 그림자를 무시하고 CSS 만 사용하여이 작업을 수행 할 수 있습니까?

업데이트 1

내 초기 질문에 대한 해결책을 찾았습니다. 여기 바이올린이 있습니다 ...

http://jsfiddle.net/duZAx/7/

HTML

<div style="position: relative;">Cool Trick:<br />
    <div class="tooltiptail"></div>
    <div class="tooltiptail2"></div>
</div>

CSS

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff #ffffff;
    border-style: solid;
    border-width: 20px;
    width: 0px;
    height: 0px;
}
.tooltiptail2 {
    display: block;
    border-color: transparent #ffffff transparent transparent;
    border-style: solid;
    border-width: 18px;
    width: 0px;
    height: 0px;
    position: relative;
    left: 4px;
    top: -38px;
}

이제 그림자를 포함하고 브라우저 간 호환이 가능한 순수한 CSS를 사용하여 위의 작은 그림을 정확히 모방하는 방법은 무엇입니까?

업데이트 2

아래 답변을 조합 한 후 내 솔루션은 다음과 같습니다. 여러 브라우저에서 테스트하지는 않았지만 Chrome에서는 멋지게 보입니다.

http://jsfiddle.net/UnsungHero97/MZXCj/688/

HTML

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS

#toolTip {
    background-color: #ffffff;
    border: 1px solid #73a7f0;
    width: 200px;
    height: 100px;
    margin-left: 32px;
    position:relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px -1px black;
    -moz-box-shadow: 0px 0px 8px -1px black;
    -webkit-box-shadow: 0px 0px 8px -1px black;
}

#toolTip p {
    padding:10px;
}

#tailShadow {
    background-color: transparent;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 16px;
    left: -8px;
    z-index: -10;
    box-shadow: 0px 0px 8px 1px black;
    -moz-box-shadow: 0px 0px 8px 1px black;
    -webkit-box-shadow: 0px 0px 8px 1px black;
}

#tail1 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #73a7f0 transparent transparent;
    position:absolute;
    top: 8px;
    left: -20px;
}

#tail2 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #ffffff transparent transparent;
    position:absolute;
    left: -18px;
    top: 8px;
}

다음은 상자 그림자가있는 예입니다. 모든 최신 버전의 브라우저가이를 지원해야합니다.

http://jsfiddle.net/MZXCj/1/

HTML :

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS :

body {font-family:Helvetica,Arial,sans-serif;}

#toolTip {
    position:relative;
}

#toolTip p {
    padding:10px;
    background-color:#f9f9f9;
    border:solid 1px #a0c7ff;
    -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}

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

#tail1 {
    position:absolute;
    bottom:-20px;
    left:20px;
    width:0;height:0;
    border-color:#a0c7ff transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

#tail2 {
    position:absolute;
    bottom:-18px;
    left:20px;
    width:0;height:0;
    border-color:#f9f9f9 transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}


body {
  font-family: Helvetica, Arial, sans-serif;
}
#toolTip {
  position: relative;
}
#toolTip p {
  padding: 10px;
  background-color: #f9f9f9;
  border: solid 1px #a0c7ff;
  -moz-border-radius: 5px;
  -ie-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#tailShadow {
  position: absolute;
  bottom: -8px;
  left: 28px;
  width: 0;
  height: 0;
  border: solid 2px #fff;
  box-shadow: 0 0 10px 1px #555;
}
#tail1 {
  position: absolute;
  bottom: -20px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #a0c7ff transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}
#tail2 {
  position: absolute;
  bottom: -18px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #f9f9f9 transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}
<div id="toolTip">
  <p>i can haz css tooltip</p>
  <div id="tailShadow"></div>
  <div id="tail1"></div>
  <div id="tail2"></div>
</div>

다음은 첫 번째 질문에 대한 설명입니다 (게으 르기 때문에 실제 CSS는 다른 사람에게 맡길 것입니다. 투표 할 가치가 있다고 생각하는 답변을 찬성 해주세요!) :

이렇게하면 "도구 설명 꼬리"라는 작은 화살표 / 삼각형 효과가 생성됩니다. 이것은 내 마음을 날려 버린다! 이게 어떻게 작동하는지 정말 궁금 해요?!

  1. 가장자리 색상은 다양하지만 스타일은 같지만 (귀하의 경우에는 solid) 테두리를 렌더링 할 때 인접한 모서리 쌍을 구분하는 이음새가 대각선입니다. 그것은 무엇을 매우 유사 여기 다이어그램 의 묘사 groove, ridge, inset및 outset테두리 스타일.

    모든 브라우저가 동일한 방식으로 작동하고 내가 기억할 수있는 한 그렇게 해왔지만이 동작은 CSS2.1 사양이나 CSS Backgrounds and Borders 모듈에서 완전히 정의되지 않았습니다. 후자는 모서리의 색상 및 스타일 전환을 설명하는 섹션이 있으며, 설명은 모서리 반경이 0 인 테두리의 경우 렌더링되는 선이 실제로 패딩 모서리의 모서리와 모서리의 모서리를 연결하는 선임을 암시하는 것 같습니다. 테두리 가장자리 (동일한 너비 테두리의 경우 45도 각도의 선이 됨)이지만 사양은 여전히 ​​이것이 항상 그런 것은 아니라는 점을 경고합니다 (특히 모서리 반경이 0 인 테두리를 명시 적으로 고려하지도 않기 때문에). 1

  2. 에 의해 콘텐츠 (오리지널 W3C) 박스 모델 콘텐츠 사이즈가 0x0으로 정의되는 더불어 40x40 영역이 20 화소의 테두리 밖으로 생성된다.

  3. 네 모서리를 연결하는 대각선으로 정사각형을 나누면 직각이 정사각형의 중간 점에서 만나는 네 개의 직각 삼각형이 생성됩니다 (아래 참조).

  4. 위쪽, 아래쪽 및 왼쪽 테두리는 .tooltiptail요소 컨테이너 의 배경과 일치하도록 흰색이고 오른쪽 테두리는 도구 설명의 배경색과 일치하는 파란색 음영입니다.

    border-color: #ffffff #a0c7ff #ffffff #ffffff;

결과적으로 테두리가 레이블이 지정되고 테두리 경계가 내 신뢰할 수있는 선 도구를 사용하여 추가됩니다.

툴팁 꼬리의 방향을 바꾸는 것은 단순히 툴팁 색상을 전환하는 것입니다. 예를 들어, 이것은 팁의 바닥에 부착 된 꼬리를 산출합니다 :

border-color: #a0c7ff #ffffff #ffffff #ffffff;

jsFiddle 미리보기

1 표준 준수를 고집하는 사람이라면이 모든 것을 해킹이라고 생각할 수도 있습니다.

이 툴팁은 하나의 div요소 로만 수행합니다 .

HTML :

<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue justo, venenatis non tincidunt sit amet, suscipit eget ligula.</div>

CSS :

.tooltip{
    position: relative;
    border: 1px solid #73a7f0;
    width: 200px;
    margin-left: 20px;
    padding: 5px 14px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
    -webkit-box-shadow: -0px 0px 6px rgba(0, 0, 0, .7);
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
}
.tooltip:before{
    content: ' ';
    display: block;
    position: absolute;
    left: -8px;
    top: 15px;
    width: 14px;
    height: 14px;
    border-color: #73a7f0;
    border-width: 1px;
    border-style: none none solid solid;
    background-color: #fff;
    box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -moz-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

데모

설명:

다른 예와 마찬가지로 테두리가있는 일반 div가 있습니다. 꼬리는 CSS의 간단한 조합입니다.

  • 나는 의사 선택기를 사용합니다 : before (: after도 잘 작동합니다)
  • 내용에 공백을 넣어 꼬리를 표시합니다.
  • 도구 설명 측면의 모서리를 고정하기 위해 상자를 45도에서 회전합니다.
  • 크기와 위치는 놀라운 일이 아닙니다.
  • 원하는 양면에 테두리를 추가합니다.
  • 그리고 마지막으로 바깥 쪽 테두리에 그림자를 추가합니다.

그림자없는 툴팁

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: 50px;
  top: 100px;
  -moz-box-shadow: 0px 10px 30px #000;
  -webkit-box-shadow: 0px 10px 30px #000;
  box-shadow: 0px 10px 30px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}
<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="atail2">
    </div>
  </div>
</div>

바이올린 데모

Shadow와 함께 (WebKit에서 조금 이상해 보입니다 ... 내 생각에 최적화해야합니다) :

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: -5px;
  top: -16px;
  -moz-box-shadow: 0px 10px 20px #000;
  -webkit-box-shadow: 0px 10px 20px #000;
  box-shadow: 0px 10px 20px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}
<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="ashadow"></div>
    <div class="atail2">
    </div>
  </div>
</div>

데모 1 , 데모 2

크로스 브라우저 접근 방식 : 

.tooltip {
  position:relative;
  padding:10px;
  border-bottom:1px solid #000;
  background:#ccc;
}

.arrow {
    background:transparent;
    display:inline-block;
    position:absolute;
    bottom:-20px;
    border-left:10px solid transparent;
    border-bottom:10px solid transparent;
    border-top:10px solid #000;
    border-right:10px solid transparent; 
}
.arrow i {
    display:inline-block;
    position:absolute;
    top:-10px;
    left:-9px;
    width:0;
    height:0;
    border-left:9px solid transparent;
    border-bottom:9px solid transparent;
    border-top:9px solid #ccc;
    border-right:9px solid transparent;
}
* html .arrow {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}
* html .arrow i {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}
<div class="tooltip">
    <span class="arrow"><i></i></span>
    Tooltip text that wants to be your friend.
</div>

이것은 IE7 +에서 작동합니다 (( filter: chroma(color=white);)를 사용하여 IE6에서도 작동 하지만 화살표 주위에 검은 색 테두리가 표시되지 않습니다).

IE6 수정 :

* html .arrow {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);

}
* html .arrow i
        {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);
        }

이렇게하면 IE6에 의해 렌더링되는보기 흉한 검은 색 투명도가 크로마 필터에서 지정한 색상으로 만들어집니다 (백그라운드에서 사라지도록 흰색을 적용했습니다).

CSS 3 접근 방식 :

CSS3 회전으로 할 수는 있지만 CSS3를 준수하지 않는 브라우저에서는 실패합니다.

.tooltip {
    position:relative;
    padding:10px;
    background:#ccc;
    border-bottom:1px solid #000;
}
.tooltip:before {
    content:"";
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    bottom:-6px;
    border-left:1px solid #000;
    border-bottom:1px solid #000;
    background:#ccc;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

<div class="tooltip"> 
    Tooltip text that wants to be your friend.
</div>

CSS의 : before 및 : after 가상 요소를 사용할 수 있습니다. 예를 들어 : before는 삼각형을 삽입하고 : after는 직사각형을 삽입하는 데 사용할 수 있습니다. 이 두 가지를 조합하면 버블 도구 설명이 생성됩니다.

예 : 

a[bubbletooltip]:before
{
    content: "";
    position: absolute;
    border-bottom: 21px solid #e0afe0;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    visibility: hidden;
    bottom: -20px;
    left: -12px;
}

a[bubbletooltip]:after
{
    position: absolute;
    content: attr(bubbletooltip);
    color: #FFF;
    font-weight:bold;
    bottom: -35px;
    left: -26px;
    white-space: nowrap;
    background: #e0afe0;
    padding: 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius: 6px;
    visibility: hidden;
}

온라인 도구는 http://www.careerbless.com/services/css/csstooltipcreator.php 에서 사용할 수 있습니다 .

참고 URL : https://stackoverflow.com/questions/5623072/how-can-i-create-a-tooltip-tail-using-pure-css

반응형

'IT story' 카테고리의 다른 글

Lombok에서 슈퍼 생성자를 호출하는 방법  (0) 2020.09.09
TortoiseSVN에서 파일을 무시하려면 어떻게합니까?  (0) 2020.09.09
2 개의 Windows emacs에서 버퍼를 교체하는 방법  (0) 2020.09.09
.tpl 파일이란 무엇입니까?  (0) 2020.09.09
바로 가기 키를 사용하여 Visual Studio 텍스트 편집기를 확대 / 축소하는 방법이 있습니까?  (0) 2020.09.09

'IT story'의 다른글

  • 현재글순수 CSS를 사용하여 "툴팁 꼬리"를 어떻게 만들 수 있습니까?

관련글

댓글

티스토리툴바