I am trying to set a div inside trapezoid shaped div.
But the inner div is invisible in anyway.
I also tried z-indexes.
.trapezoid
{
border-color: transparent transparent rgba(255,0,0,0.2) transparent;
border-width: 0px 10px 38px 10px;
border-style: solid;
height: 0;
width: 40px;
background-size: 430px;
overflow: hidden;
background-repeat: no-repeat;
display: block;
text-indent: -99999px;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 25px;
margin-right: 25px;
cursor: pointer;
}
.innerIcon
{
width: 100%;
height: 38px;
border-radius: 16px;
background-color: rgba(0,0,0,0.4);
}
<div class="trapezoid" title="Fire Range Down">
<!-- This inner div is invisible -->
<div class="innerIcon"></div>
</div>
Please give me some solution.
The trapezoid is made up of just border, so it does not have a height ( height:0px specified in css). so overflow:hidden was causing the problem which is removed . Setting position:absolute to inner div and postion:relative to trapezoid will do the trick.
Here is the updated code:
.trapezoid {
border-color: transparent transparent rgba(255, 0, 0, 0.2) transparent;
border-width: 0px 10px 38px 10px;
border-style: solid;
height: 0;
width: 40px;
background-size: 430px;
/*overflow: hidden;*/
background-repeat: no-repeat;
display: block;
text-indent: -99999px;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 25px;
margin-right: 25px;
cursor: pointer;
/*New Css */
position: relative;
}
.innerIcon {
width: 100%;
height: 38px;
border-radius: 16px;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0px;
}
<div class="trapezoid" title="Fire Range Down">
<!-- This inner div is invisible -->
<div class="innerIcon"></div>
</div>
Try this css
.innerIcon
{
position: absolute;
width: 39px;
height: 38px;
border-radius: 16px;
background-color: rgba(0,0,0,0.4);
}
Related
I'm trying to adapt the images from the buttons (#but2, #but1) to their full height possible (in the div) and their corresponding width according to their height (width: auto).
I've tried with this code for the images from the buttons:
#but1 img, #but2 img{
height: 100%;
width: auto;
}
But I can't get the output I want. I share an image showing what's the output of that code and what's the output I want.
Thanks a lot for your help!
#but1 {
margin-left: auto;
margin-right: 5px;
background-color: transparent;
border: 0;
}
#but2 {
margin-left: 5px;
margin-right: auto;
background-color: transparent;
border: 0;
}
#but1 img,
#but2 img {
width: 100%;
height: auto;
}
.button-container {
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
#but-cont-2 {
margin-top: 25px;
background-color: #79b2f7;
position: relative;
}
#textarea {
width: 85%;
background-color: transparent;
border: 0;
height: 100%;
outline: none;
resize: none;
float: left;
}
.text {
width: 100%;
background-color: transparent;
float: right;
border: 0;
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: right;
right: 21px;
}
<div>
<div class="button-container" id="but-cont-1">
<textarea id="textarea" name="prod"></textarea>
<button onclick="sub()" id="but1">
<img id="but1" src="https://cdn-icons-png.flaticon.com/512/861/861180.png" alt="">
</button>
</div>
<div class="button-container" id="but-cont-2">
<label id="cont" class="text"></label>
<button id="but2">
<img id="but2" src="https://cdn-icons-png.flaticon.com/128/1078/1078599.png" alt="">
</button>
</div>
</div>
Try using display: flex; for the button and try to resize the images with pixels like width: 20px; and height: auto; or verse versa, it should fix it.
Here is my idea of doing that: https://jsfiddle.net/L1ma5qrc/86/
*{
margin: 0;
padding: 0;
}
body{
padding: 20px
}
#but1 {
/* margin-right: 5px; */
/* background-color: transparent; */
border: 0;
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
border: 1px solid lightgray;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
#but1:before {
content: "";
display: block;
background: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png") no-repeat;
background-size: 50%;
background-position: center right;
height: 50px;
width: 50px;
margin-right: 16px;
margin-left: auto;
}
#but2 {
/* margin-right: 5px; */
/* background-color: transparent; */
border: 0;
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
border: 1px solid lightgray;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
#but2:before {
content: "";
display: block;
background: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png") no-repeat;
background-size: 50%;
background-position: center left;
height: 50px;
width: 50px;
margin-right: auto;
margin-left: 16px;
}
<div>
<div class="button-container" id="but-cont-1">
<button id="but1">
</button>
</div>
<div class="button-container" id="but-cont-2">
<button id="but2">
</button>
</div>
</div>
I think I'd look at applying the images as backgrounds. It cleans up the markup quite a bit and makes positioning easier.
Other tips:
Don't use floats for alignment. They're an outdated layout technique and have very few appropriate uses anymore.
Avoid absolute positioning when possible. It can also be troublesome.
Floats don't work with absolute positioning. Use one or the other if you must.
Rely less on IDs in your CSS. Ideally everything is class-based so it's reusable.
Consider not removing outlines. They're important for accessibility.
Avoid using label elements other than with form inputs. That would be nonstandard and also a possible accessibility issue.
.button-container {
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.button-container.alt {
margin-top: 25px;
background-color: #79b2f7;
}
.button-container button {
width: 100%;
height: 100%;
background-size: auto 60%;
background-position: 93% 50%;
background-repeat: no-repeat;
border: 0;
}
.button-container button.icon-recycle {
background-image: url("https://cdn-icons-png.flaticon.com/512/861/861180.png");
}
.button-container button.icon-trash {
background-image: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png");
background-position: 7% 50%;
}
#textarea {
position: absolute;
width: 85%;
background-color: transparent;
border: 0;
height: 100%;
outline: none;
resize: none;
}
.text {
width: 100%;
background-color: transparent;
border: 0;
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: right;
right: 21px;
}
<div>
<div class="button-container">
<textarea id="textarea" name="prod"></textarea>
<button class="icon-recycle" onclick="sub()"></button>
</div>
<div class="button-container alt">
<span class="text"></span>
<button class="icon-trash"></button>
</div>
</div>
How can I achieve rounded hover effect like in the attached image (at the right bottom pic)
Here is the fiddle link
Here is the relevant css:
.box_details {
float:left;
width:200px;
height:200px;
margin-right:35px;
background-color:#fff;
border-radius:3px;
box-shadow: 0px 6px 19px 16px rgba(239,242,245,1);
}
.box_details:hover {
background-color:#f4f6f8;
color:#939bc5;
}
You can make a circle that has a bigger width than its parent element and center it. Check the code snippet for a demonstration of this.
.box_details {
float: left;
width: 200px;
height: 200px;
margin-right: 35px;
background-color: #fff;
display: block;
position: relative;
border-radius: 3px;
box-shadow: 0px 6px 19px 16px rgba(239, 242, 245, 1);
overflow: hidden;
}
.box_details:hover .circle {
margin-top: 140px;
transition-duration: 0.4s;
}
p {
text-align: center;
}
.circle {
position: absolute;
width: 200%;
height: 100px;
left: 0;
right: 0;
margin: 0 auto;
background: lightgrey;
border-radius: 50%;
margin-left: -50%;
margin-top: 250px;
transition-duration: 0.4s;
}
<div class="box_details">
<div class="circle">
<p>Hi!</p>
</div>
</div>
How to Make chat arrow appear image so the image will be visible in the background of the arrow. And image can have border-radius round.
Just like below image.
Thanks in advance.
.userMsgImage {
position: relative;
min-height: 40px;
margin-left: 20px;
}
.userMsgImage a,
.userMsgImage img {
border-radius: 4px;
display: block;
max-width: 200px;
}
.userMsgImage a img {
margin-left: 0;
}
.userMsgImage::after,
.userMsgImage::before {
left: 0px;
content: "";
width: 0px;
position: absolute;
border-color: transparent transparent transparent rgb(255, 255, 255);
border-style: solid;
}
.userMsgImage::before {
top: 0px;
height: 30px;
border-width: 0px 0px 40px 40px;
}
.userMsgImage::after {
top: 12px;
height: calc(100% - 12px);
border-width: 40px 0px 0px 40px;
}
<div class="userMsgImage">
<a href="https://images.techhive.com/images/article/2014/05/skype-logo-open-graph-100272883-large.jpg" target="_blank">
<img src="https://images.techhive.com/images/article/2014/05/skype-logo-open-graph-100272883-large.jpg" alt="loading" width="200px">
</a>
</div>
See below code snippet - I had added a couple of absolutely positioned <span> elements with borders and border-radius to give the effect of a corner on the left top and bottom.
.userMsgImage {
position: relative;
min-height: 40px;
margin-left: 20px;
}
.userMsgImage a,
.userMsgImage img {
border-radius: 4px;
display: block;
max-width: 200px;
}
.userMsgImage a img {
margin-left: 0;
}
.userMsgImage::after,
.userMsgImage::before {
left: 0px;
content: "";
width: 0px;
position: absolute;
border-color: transparent transparent transparent rgb(255, 255, 255);
border-style: solid;
}
.userMsgImage::before {
top: 0px;
height: 30px;
border-width: 0px 0px 40px 40px;
}
.userMsgImage::after {
top: 12px;
height: calc(100% - 12px);
border-width: 40px 0px 0px 40px;
}
.corner-left-top {
position: absolute;
left: 36px;
top: -4px;
border-top-left-radius: 8px;
border-left: 4px solid #fff;
border-top: 4px solid #fff;
width: 20px;
height: 20px
}
.corner-left-bot {
position: absolute;
left: 36px;
bottom: -4px;
border-bottom-left-radius: 8px;
border-left: 4px solid #fff;
border-bottom: 4px solid #fff;
width: 20px;
height: 20px
}
<div class="userMsgImage">
<a href="https://images.techhive.com/images/article/2014/05/skype-logo-open-graph-100272883-large.jpg" target="_blank">
<img src="https://images.techhive.com/images/article/2014/05/skype-logo-open-graph-100272883-large.jpg" alt="loading" width="200px">
</a>
<span class="corner-left-top"></span>
<span class="corner-left-bot"></span>
</div>
I am trying to make a div look a little like a speech box with a triangle at the top left, currently I have this:
.bubble
{
position: relative;
width: 240px;
height: 120px;
padding: 12px;
background: brown;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-left: 30px;
margin-top: 30px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 17px 23px 17px 0;
border-color: transparent brown;
display: block;
width: 0;
z-index: 1;
left: -23px;
top: 0px;
}
<div class="bubble"></div>
And I am looking to have it like:
.bubble
{
position: relative;
width: 240px;
height: 120px;
padding: 12px;
background: brown;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-left: 30px;
margin-top: 30px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0px 23px 17px 0;
border-color: transparent brown;
display: block;
width: 0;
z-index: 1;
left: -23px;
top: 0px;
}
<div class="bubble"></div>
Here try this one, i removed the border-top in your style, so it goes like this, border-width: 0px 23px 17px 0;. Let me know if this is what youre aiming for.
EDIT: By the way if you want to make some adjustments to that triangle you can adjust the border-right and border-bottom to make it look like what you've shown in your image.
I've added a grey box to my site. i want the box to follow the bottom of my page as more pictures are uploaded to my site. How do I make that work.
.GreyBG {
background: #595959;
position: absolute;
border-style: solid;
width: 50%;
//578px;
height: 70%;
border: 1px solid rgba(0, 0, 0, .2);
top: 220px;
left: 0px;
right: 0px;
border-width: 1px;
border-color: #21262c;
border-radius: 1px;
margin-left: auto;
margin-right: auto;
z-index: -1;
}
<div class="GreyBG"></div>
It depends on the parent element and its display parameters, but in general just remove position: absolute;, which will make it static and scroll with the rest.
Change top:220px to bottom :0;
This will stick the div to bottom of the page.
Update
Change the css to this:
.GreyBG {
background: #595959;
position: absolute;
border-style: solid;
width: 50%;
//578px;
height: 70%;
border: 1px solid rgba(0, 0, 0, .2);
top: 220px;
left: 0px;
right: 0px;
border-width: 1px;
border-color: #21262c;
border-radius: 1px;
margin-left: auto;
margin-right: auto;
z-index: -1;
max-height: 100%;
overflow-x: hidden;
}
.GreyBG img {
width: initial;
height: inherit;
}