.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>
Related
I wanted to add property further on clock so added a outline type effect property .
But whenever I hover on element parent element hover property is also activated . Know this is type bubbling/capturing effect in JS and also this is how CSS works.
Plz CSS only if possible : may be JS can be used like this
onhover="func()"
getElementId().style.boxShadow = " "
have to add to every element
Can it be possible have outline property on hovered element only .
Any suggestion on better property for outline-radius or outline effect with radius are very needed
Thanks for help
#clockOuterCircle {
display: flex;
justify-content: center;
align-items: center;
width: 42vw;
height: 42vw;
margin: auto;
border-radius: 50%;
border: 4px solid rgb(255, 62, 62);
background-color: rgb(253, 133, 133);
user-select: none;
}
#clockOuterCircle:hover {
box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}
#clockInnerCircle {
position: relative;
width: 38vw;
height: 38vw;
text-align: center;
padding: 0%;
border-radius: 50%;
border: 6px solid black;
background-color: white;
}
#clockInnerCircle:hover {
box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}
#clockStyleCircle {
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 28.5%;
left: 28.5%;
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
}
#clockStyleCircle:hover {
box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}
#clockStyleEyeCircle1 {
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 10%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
/* inset 16px 0px #777, inset 16px 0px 1px 2px #777;*/
background-color: black;
}
#clockStyleEyeCircle2 {
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 65%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
background-color: black;
}
#clockStyleSimileCircle {
position: absolute;
width: 8vw;
height: 3vw;
top: 68%;
left: 25%;
border: 3px solid rgb(36, 36, 36);
/* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
border-bottom-left-radius: 100% 200%;
border-bottom-right-radius: 100% 200%;
background-color: black;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
}
#clockCenterDot {
position: absolute;
width: 4%;
height: 4%;
top: 48%;
left: 48%;
border-radius: 50%;
background-color: rgba(0, 0, 0);
box-shadow: 3px 3px 10px;
z-index: 4;
}
#hourNeedle {
position: absolute;
height: 30%;
width: 2%;
top: 20%;
left: 49%;
background-color: rgb(0, 0, 0);
border-radius: 5px 5px 0 0;
box-shadow: 3px 3px 10px;
z-index: 1;
}
#minuteNeedle {
position: absolute;
height: 38%;
width: 1.6%;
top: 12%;
left: 49.2%;
background-color: rgba(0, 0, 0);
border-radius: 5px 5px 0 0;
box-shadow: 3px 3px 10px;
z-index: 2;
}
#secondNeedle {
position: absolute;
height: 46%;
width: 1%;
top: 8%;
left: 49.5%;
background-color: rgba(0, 0, 0);
border-radius: 5px 5px 0 0;
box-shadow: 3px 3px 10px;
z-index: 3;
}
<div id="clockOuterCircle">
<div id="clockInnerCircle">
<div id="clockStyleCircle">
</div>
<div id="clockCenterDot"></div>
</div>
</div>
The place holder was appearing before on the right hand side and was working properly. I am using it to show suggestions to the user. Also in debugging mode ive checked that the text is present there in the placeholder value of the div but is not visible.
* {
box-sizing: border-box;
padding-bottom: 5px;
margin-bottom: 10px;
}
:host #fBar {
position: absolute;
display: block;
}
:host div {
position: relative;
overflow: hidden;
width: calc(100% - 10px);
margin: 0 5px;
height: 30px;
background-color: white;
/*border-bottom: solid 2px #1f1f1f;*/
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
font-size: 15px;
justify-content: center;
font-weight: 200px;
align-items: center;
line-height: 25px;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
}
:host div[contenteditable=true]::after {
position: absolute;
line-height: 25px;
right: 5px;
content: attr(placeholder);
pointer-events: none;
opacity: 0.6;
color: blue;
border: 1px solid red;
}
<div contenteditable="true" placeholder="I AM A PLACE HOLDER"></div>
Changes: removed :host from :host div[contenteditable=true]::before
<style>
* {
box-sizing: border-box;
padding-bottom: 5px;
margin-bottom: 10px;
}
:host #fBar {
position: absolute;
display: block;
}
:host div {
position: relative;
overflow: hidden;
width: calc(100% - 10px);
margin: 0 5px;
height: 30px;
background-color: white;
/*border-bottom: solid 2px #1f1f1f;*/
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
font-size: 15px;
justify-content: center;
font-weight: 200px;
align-items: center;
line-height: 25px;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
}
div[contenteditable=true]::before {
position: absolute;
line-height: 25px;
right: 5px;
content: attr(placeholder);
pointer-events: none;
opacity: 0.6;
color:blue;
border:1px solid red;
}
</style>
<div contenteditable="true" placeholder="I AM A PLACE HOLDER"></div>
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>
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/
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.