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.
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>
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
In the above code I want to insert the blue arrow to the middle right of the .wrapper-dropdown-3. As of now it is situated on the top right near the Transport span. I am not sure how I can move it to the very right middle? Any suggestions?
You can use absolute positioning against container:
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
position: relative;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
position: absolute;
right: 5px;
top: calc(50% + 6px / 2); /* 6px here is border-width value to compensate a fact that arrow is made from border */
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
Simply use positionning like this :
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
/*Code added*/
position:relative;
/**/
}
.wrapper-dropdown-3:after {
/*Code added*/
position:absolute;
right:5px;
top:50%;
/**/
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
This is what I want to achieve:
I'm looking to "cut" the lower left corner of the content in the code below
(similar to if you had folded the corner of a page down)
I'd like to know if there is any adjustments I could do to the CSS below to achieve this.
.model-properties {
padding: 0.8em 3em;
position: absolute;
top: 0px;
right: 0px;
width: 20%;
min-width: 15%;
z-index: 2;
display: none;
color: #c6d2db;
font-size: 13px;
background: linear-gradient(180deg, #182229, #182229, #293741, #293741);
max-height: 700px;
overflow: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div id="model-properties-container" class="model-properties">
.model-properties:before,
.model-properties:after
{
bottom: 0;
left: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.model-properties:after {
border-color: #88b7d5;
border-left-color: white;
border-bottom-color: white;
border-width: 30px;
}
https://jsfiddle.net/e46xvp3x/3/
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/
This is what i have got so far
After after checking out tutorial
I want know how curved effect is generated on divs the only question that i found near to what i was looking for was At here at stackoverlow but that too dint help
How folded edge effect is created on as in the above picture
Css
#MenuShape{
height:50px;
background-color:orange;
width:200px;
position:relative;
text-align:center;
left:100px;
}
#MenuShape:after{
content:"";
position: absolute;
width: 0;
height: 0;
left:200px;
border-top: 50px solid transparent;
border-left: 100px solid orange;
border-bottom: 0px solid transparent;
}
#MenuShape:before{
content:"";
position: absolute;
width: 0;
height: -50;
left:-100px;
border-top: 50px solid transparent;
border-right: 100px solid orange;
border-bottom: 0px solid transparent;
}
HTML
<div id="MenuShape" >
sachin
</div>
https://css-tricks.com/ this the site on inspecting it i found its span wrapped
anchor tag along with svg tag
<a href="/" class="home">
<svg viewBox="0 0 100 25" class="shape-tab">
<use xlink:href="#shape-tab"></use>
</svg>
<span>Blog</span></a>
Click here to see the unexpected behaviour it works fine in codepen
Here is a final demo (archived) on the folded corners:
and the following code is how you can create them:
.note {
position: relative;
width: 30%;
padding: 1em 1.5em;
margin: 2em auto;
color: #fff;
background: #97C02F;
overflow: hidden;
}
.note:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #658E15 #658E15;
background: #658E15;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
/* Firefox 3.0 damage limitation */
display: block;
width: 0;
}
.note.rounded {
-moz-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px;
}
.note.rounded:before {
border-width: 8px;
border-color: #fff #fff transparent transparent;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
<div class="note"></div>
To create a curved wave effect you can use this code:
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
<div id="wave"></div>
To achieve the curve you’ll need to inverse where it starts. Follow the same demo, just reverse your values.
See a live demonstration (archived) of how border radius can create the shapes and effects you want and adjust each corner to see it in action.