Create DIV Boxes with Arrows and Pointers, using CSS

Publicado em: 30 Janeiro 2015
no canal de: Arjun Khara

59,659

CSS is used to create boxes with arrows that point towards content. These are often used as tooltips and quick instructions that pop up to guide you along a website. This tutorial shows how to create these divs with arrows, and the logic behind the CSS code. Here's the code block used in this tutorial:

//The main box
.arrowBox{
width: 200px;
height: 30px;
background-color: #ffc728;
border-radius: 5px;
position: fixed;
top: 3em;
left: 230px;
padding: 10px;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 22px;
color: #313333;
text-align: center;
}

//The arrow pointer
.arrowBox:after{
content: ' ';
width: 0px;
height: 0px;
border-top: 10px solid #ffc728;
border-left: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:10px solid transparent;
position: absolute;
left: 50%;
top: 100%;
margin-left: -10px;
}

Background music by: YouTube Free Music (End of Summer, and Pas de Deux)

Nesta página do site você pode assistir ao vídeo on-line Create DIV Boxes with Arrows and Pointers, using CSS duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Arjun Khara 30 Janeiro 2015, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 59,659 vezes e gostou 1 mil espectadores. Boa visualização!

2,660