I have the following image working in HTML/CSS but now I need the same except with the arrow on the upper left side. Also a longer arrow (but I'm sure I can figure that out).
I've create a fiddle here http://jsfiddle.net/bnzuug5b/4/
However the arrow (on the left) is pointing the wrong way.
Below is the CSS I've been working with:
#chatCenterMemberInfoPopOutContainerDIV {
border-radius: .1875em;
z-index: 5;
position: absolute;
box-shadow: 0 0 0 1px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 2px -2px rgba(0,0,0,0.2),0 0 1px 1px rgba(0,0,0,0.15);
background-repeat: repeat-x;
background-position: 0 0;
background-image: linear-gradient(to bottom,rgba(255,255,255,0.7) 0,rgba(255,255,255,0) 100%);
background-color: #e1e1e1;
width: 140px;
height: 80px;
left: 50px;
top: 50px;
display: block;
}
#chatCenterMemberInfoPopOutContainerDIV:before {
border-left-color: #aaa;
border-width: 5.5px;
margin-top: -1.5px;
}
#chatCenterMemberInfoPopOutContainerDIV:after, #chatCenterMemberInfoPopOutContainerDIV:before {
border: 4px solid transparent;
border-left-color: #f2f2f2;
position: absolute;
content: '';
right: 100%;
top: 9px;
}
#chatCenterMemberInfoPopOutContainerDIV:after, #chatCenterMemberInfoPopOutContainerDIV:before {
border: 4px solid transparent;
border-left-color: #f2f2f2;
position: absolute;
content: '';
right: 100%;
top: 9px;
}
Any assistance would be greatly appreciated - used on site: http://www.musician.dating
thx
To get the arrow facing to the left side you need to set top and bottom's border-color to transparent and give a color to border-right.
#chatCenterMemberInfoPopOutContainerDIV {
border-radius: .1875em;
z-index: 5;
position: relative;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 4px 2px -2px rgba(0, 0, 0, 0.2), 0 0 1px 1px rgba(0, 0, 0, 0.15);
background-repeat: repeat-x;
background-position: 0 0;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0) 100%);
background-color: #e1e1e1;
width: 140px;
height: 80px;
left: 50px;
top: 50px;
}
#chatCenterMemberInfoPopOutContainerDIV:before,
#chatCenterMemberInfoPopOutContainerDIV:after {
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 14px solid #F5F5F5;
position: absolute;
content: '';
top: 15px;
left: -14px;
}
#chatCenterMemberInfoPopOutContainerDIV:before {
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 15px solid #CECECE;
top: 13px;
left: -15px;
}
<div id="chatCenterMemberInfoPopOutContainerDIV"></div>
Find the following id's in your css
#chatCenterMemberInfoPopOutContainerDIV:after, #chatCenterMemberInfoPopOutContainerDIV:before
and change
border-left-color: #f2f2f2;
to be:
border-right-color: #f2f2f2;
FIDDLE
Create a div with triangle shape and provide the margins.
Try this enter code herehttp://jsfiddle.net/sathyanaga/fyt4fagL/`
Related
.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 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.
I made a horizontal progress bar that does not have a problem with it
But the progress bar's vertical lines are not correct.
I put a picture of the problem.
jsfiddle.net/post98/juGXZ/1/
HTML
<body>
<div class="progress-bar horizontale">
<div class="inner"><span>|||||||</span></div>
</div>
<div class="progress-bar verticale">
<div class="inner"><span>___ ___ ___ ___ ___</span></div>
</div>
</body>
CSS
body {
background: url('https://www.dropbox.com/s/8g7pf7ig7fw5e0v/main_bg.png') repeat;
}
.progress-bar.verticale {
width: 24px;
height: 300px;
/*border: 1px solid #060707;*/
margin: 10px auto;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
border-radius: 10px;
padding: 4px;
transform: rotate(180deg);
display: inline-block;
}
.progress-bar.horizontale {
width: 300px;
height: 24px;
/*border: 1px solid #060707;*/
margin: auto;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
border-radius: 10px;
padding: 4px;
display: inline-block;
}
.progress-bar.horizontale .inner {
background: linear-gradient(#FFCC33, #CC9900);
border-radius: 12px;
position: absolute;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
height: 24px;
width: 200px;
}
.progress-bar.horizontale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 120px/40px sans-serif ;
letter-spacing: -6px;
height: 24px;
opacity: 0.06;
overflow: hidden;
transform: skewX(-30deg);
}
.progress-bar.verticale .inner {
background: linear-gradient(#FFCC33, #CC9900);
border-radius: 12px;
position: absolute;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
height: 200px;
width: 24px;
}
.progress-bar.verticale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 20px/30px sans-serif ;
letter-spacing: -6px;
height: 200px;
width: 20px;
opacity: 0.06;
overflow: hidden;
transform: skewY(30deg);
}
Here the Picture
You can make the lines thick by replacing the underscores _ by a thick character like this one: ▀
A demo.
Edit:
ASCII code of the character: 223 (Top half block).
You can thicken the lines like this:
.progress-bar.verticale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 120px/30px sans-serif ; //thicken lines to same width as horizontal progress bar.
letter-spacing: -6px;
height: 200px;
width: 25px; //change width to fit width of div.
opacity: 0.06;
overflow: hidden;
transform: skewY(30deg);
margin:0px 0px 0px 0px;
bottom: 35px; //Position revision to justify font resizing.
}
Im creating a ribbon using css. the page it is on is FOUND HERE
I know the rest of my page needs more work but right this second I am focusing on the ribbon.
I need it to be auto 90% and center no matter what the screen size. at the moment it is cut off on the left a little and not center.
my css code:
.ribbon {
width: 90%;
position: absolute;
text-align: center;
font-size: 15px!important;
background: #2cdb1c;
background: -webkit-gradient(linear, left top, left bottom, from(#2cdb1c), to(#618028));
background: -webkit-linear-gradient(top, #2cdb1c, #618028);
background: -moz-linear-gradient(top, #2cdb1c, #618028);
background: -ms-linear-gradient(top, #2cdb1c, #618028);
background: -o-linear-gradient(top, #2cdb1c, #618028);
background-image: -ms-linear-gradient(top, #2cdb1c 0%, #618028 100%);
-webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
font-family: 'Helvetica Neue',Helvetica, sans-serif;
}
.ribbon h1 {
font-size: 23px!important;
color: #000000;
text-shadow: #b9c9b5 0 1px 0;
margin:0px;
padding: 15px 10px;
}
.ribbon:before, .ribbon:after {
content: '';
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #379c27;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
-webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
-webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
border-color: #000000 transparent transparent transparent;
position: absolute;
display: block;
border-style: solid;
bottom: -1em;
content: '';
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
.ribbon-stitches-top {
margin-top:2px;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
}
.ribbon-stitches-bottom {
margin-bottom:2px;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
}
Can someone please help me? thank you.
It can't be positioned as absolute. Remove that. Make sure its parent has 100% width and then set margin:0 auto;
You could put your entire ribbon inside a divide. Then instead of centering the ribbon just give it a width of 100%.
ribbon_divide {
margin: 0 auto;
width: 90%;
}
You should wrap ribbon element and set width=100% for ribbon.
.ribbon-wrapper {
position: relative;
width: 90%;
margin: 0 auto;
}
.ribbon {
width: 100%
}
<div class="ribbon-wrapper">
<!-- Your ribbon html code -->
</div>
Just wrap your ribbon with a div.
<div style="width:90%;margin:0 auto;">
<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>Xclo.mobi</h1></strong><div class="ribbon-stitches-bottom"></div></div>
</div>
You could actually center it based on percentage and absolutely:
.ribbon {
position: absolute;
width: 90%;
left: 50%;
margin-left: -45%;
}
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.