I have a div element that will display some message indicating a point on my page.
The arrow should be displayed on the left hand side of the div instead of bottom(currently).
Here is my HTML, CSS and fiddle code.
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.left::before {
left: 0%;
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
.callout.top::before {
left: 0%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
top: 40%;
border-right: 10px solid #444;
}
.callout.top-left::before {
/*left: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
.callout.top-right::before {
/*right: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
<div class="callout top">test</div>
fiddle:- https://jsfiddle.net/5t6s6p5y/
Change CSS to code like:
.callout.top::before {
border-right: 11px solid #444;
bottom: 10px;
left: -20px;
}
Example:
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.left::before {
left: 0%;
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
.callout.top::before {
border-right: 11px solid #444;
bottom: 10px;
left: -20px;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
top: 40%;
border-right: 10px solid #444;
}
.callout.top-left::before {
/*left: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
.callout.top-right::before {
/*right: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
<div class="callout top">test</div>
Also on jFiddle.
You should probably use the class right instead of top, so as to not ruin reusability.
Also, your .callout.right class is missing a left positioning.
ie
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
see: https://jsfiddle.net/5t6s6p5y/2/
Related
I have this callout cloud, please have a look at the code.
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -20px;
top: 40%;
width: -10px;
margin-right: 10px;
border-right: 5px solid blue;
}
<div class="callout right"> </div>
I want to increase the size of the triangle (the blue one) at the start, I am unable to do that. please have a look and help me here.
You can increase the border width and adjust the location:
.callout.right::before {
left: -25px; /* adjust the location of triangle */
top: 40%;
margin-right: 10px;
border-right: 10px solid blue; /* increase the border width */
}
Here is the code snippet:
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -25px;
top: 40%;
margin-right: 10px;
border-right: 10px solid blue;
}
<div class="callout right"> </div>
You can adjust the code like this and you can easily change the dimension of the triangle by only changing the width of the border:
div.callout {
background-color: #444;
background-image:linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
width: 200px;
border-radius: 15px;
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
right:100%;
top: 50%;
transform:translateY(-50%);
border-right: 15px solid blue; /*Change only this value to control the size*/
}
<div class="callout right"> </div>
Just wrote some newbie css kind of code. I don't know how to fit the image inside the border! I want to fit the water icon inside the circular border! Please run the snippet below
.notice {
position: relative;
margin: 1em;
background: #f3fff2;
padding: 1em 1em 1em 2em;
border-left: 4px solid #DDD;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}
.notice:before {
position: absolute;
top: 50%;
margin-top: -17px;
left: -17px;
background-color: #DDD;
color: #FFF;
width: 40px;
height: 40px;
border-radius: 100%;
text-align: center;
line-height: 30px;
font-weight: bold;
font-family: Georgia;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}
.info {
border-color: #e4ffe0;
}
.info:before {
content: url('http://www.free-icons-download.net/images/water-droplet-icon-72075.png');
background-color: #e4ffe0;
}
<div class="notice info">
<p>This is a an info notice, it provides feedback of a neutral nature to the user.</p>
</div>
Use content image as a background...it will be easy for you to control the size of image
Stack Snippet
.notice {
position: relative;
margin: 1em;
background: #f3fff2;
padding: 1em 1em 1em 2em;
border-left: 4px solid #DDD;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}
.notice:before {
position: absolute;
top: 50%;
margin-top: -17px;
left: -17px;
background-color: #DDD;
color: #FFF;
width: 40px;
height: 40px;
border-radius: 100%;
text-align: center;
line-height: 30px;
font-weight: bold;
font-family: Georgia;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}
.info {
border-color: #e4ffe0;
}
.info:before {
content: "";
background: #e4ffe0 url('http://www.free-icons-download.net/images/water-droplet-icon-72075.png') center/20px no-repeat
}
<div class="notice info">
<p>This is a an info notice, it provides feedback of a neutral nature to the user.</p>
</div>
Why not put it in as a background?
.notice {
position: relative;
margin: 1em;
background: #f3fff2;
padding: 1em 1em 1em 2em;
border-left: 4px solid #DDD;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}
.notice:before {
position: absolute;
top: 50%;
margin-top: -17px;
left: -17px;
background-color: #DDD;
color: #FFF;
width: 40px;
height: 40px;
border-radius: 100%;
text-align: center;
line-height: 30px;
font-weight: bold;
font-family: Georgia;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}
.info {
border-color: #e4ffe0;
}
.info:before {
content: '';
display: inline-block;
background: #e4ffe0 url('http://www.free-icons-download.net/images/water-droplet-icon-72075.png') no-repeat center/contain;
}
<div class="notice info">
<p>This is a an info notice, it provides feedback of a neutral nature to the user.</p>
</div>
I am trying to create right arrow with gray border with css. but I think the arrow is over lapping the left rectangle. some finishing touch is required here:
.arrow_box {
position: relative;
background: #fff;
border: 2px solid #aaa;
width: 300px;
padding: 8px 20px 8px 40px;
}
.arrow_box:after,
.arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-left-color: #fff;
border-width: 17px;
margin-top: -17px;
}
.arrow_box:before {
border-color: rgba(170, 170, 170, 0);
border-left-color: #aaa;
border-width: 19px;
margin-top: -19px;
}
<div class="arrow_box">Consumer Customer
</div>
You can add border on specific sides except right:
.arrow_box {
position: relative;
background: #fff;
border-left: 2px solid #aaa;
border-top: 2px solid #aaa;
border-bottom: 2px solid #aaa;
width: 300px;
padding: 8px 20px 8px 40px;
box-sizing: border-box;
}
https://jsfiddle.net/2ca4aucm/1/
i want to give box shadow on the hexagon
here is my jsfiddle
jsfiddle
and this is my hexagon css property
.hex1 {
background-color: rgba(52,152,219,.5);
text-align: center;
line-height: 70px;
height: 80px;
width: 140px;
margin: 60px 10px;
position: relative;
z-index: 1;
box-shadow:2px 2px 2px 2px grey;
}
.hex1:before {
border-top: 40px solid transparent;
border-bottom: 40px solid rgba(52,152,219,.5);
top: -80px;
}
.hex1:after, .hex1:before {
border-left: 70px solid transparent;
border-right: 70px solid transparent;
content: "";
position: absolute;
left: 0;
z-index: -1;
}
.hex1:after {
bottom: -80px;
border-top: 40px solid rgba(52,152,219,.5);
border-bottom: 40px solid transparent;
}
this is not affecting on my hexagon .. is there any way to five border and box shadow to hexagon.
please help
You Can Use these code....
#hexagon{
background: red;
width: 100px; height: 60px;
position: relative;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.7);
box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
http://jsfiddle.net/jelmerdemaat/5UMxW/3/
So, my button, for some reason, won't go to the URL that is defined when the user clicks directly on the text lying on top of the button. (ie: for my button, "Test Text")
When you click on the button, it always depresses, but it only goes to the linked URL when you click outside of the text's area.
I have tried using a <div> instead of <a>, but no luck with that either.
You can see the button live at http://198.154.213.30/~foster2/index.php/news
Below is the code for my button:
<a class="button3D" href="http://www.google.com" target="_blank">Test Text</a>
<style>
.button3D {
position: relative;
display: block;
width: 200px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -100px;
background: #650404;
font-family: sans-serif;
text-align: center;
line-height: 50px;
font-size: 24px;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
border: 1px solid #4e0202;
-webkit-box-shadow: 0 5px 15px -5px #222;
-moz-box-shadow: 0 5px 15px -5px #222;
box-shadow: 0 5px 15px -5px #222;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
}
.button3D:before {
content: "";
position: absolute;
top: -9px;
left: 0px;
width: 178px;
height: 0px;
border: 11px solid transparent;
border-bottom: 8px solid #650404;
border-top: 0;
}
.button3D:after {
content: "";
color: #c56338;
line-height: 180px;
font-size: 16px;
position: absolute;
top: -8px;
left: 1px;
width: 178px;
height: 0px;
border: 10px solid transparent;
border-bottom: 7px solid #891414;
border-top: 0;
}
.button3D:active {
width: 158px;
height: 41px;
top: 50%;
left: 50%;
margin-top: -33px;
margin-left: -79px;
line-height: 36px;
font-size: 22px;
color: #eee;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
border: 1px solid #3c0101;
background: #4e0202;
border-top: 0;
-webkit-box-shadow: 0 0 0 0;
-moz-box-shadow: 0 0 0 0;
box-shadow: 0 0 0 0;
}
.button3D:active:before {
top: 0;
height: 42px;
width: 158px;
left: -12px;
padding: 0 1px;
border: 11px solid #b3b294;
border-bottom: 8px solid #deddad;
border-top: 0;
}
.button3D:active:after {
content: "";
top: 0;
height: 50px;
width: 182px;
left: -13px;
border: 0;
-webkit-box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
-moz-box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
}
</style>
Appreciate any input/insight you can provide for me as to how I can fix this problem.
I think it is because the link is moving. When you click and hold a link you can drag off the link and it will not navigate. It appears that the moving link is triggering this functionality. The only thing I can think that you could do is use JavaScript onmousedown to navigate.