This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
I have this jsfiddle demo.
I have an thumbnail of a vimeo movie (here it is a placeholder) in the center I would like a play btn.
The whole of the image will be clickable so the play button is just for illustration.
I would like the play button dead center.
I can do it with negative margins but I won't really know the size of the play button.
How can I dead center the play button with knowing it dimensions.
.video_thumbnail {
border: 1px solid red;
position: relative;
}
.video_thumbnail:hover {
cursor: pointer;
}
.video_thumbnail .play-btn {
background: white;
background: blue;
display: inline-block;
padding: 25px;
position: absolute;
top: 50%;
left: 50%;
/*
margin-left: -35px;
margin-top: -35px;
*/
}
.video_thumbnail .play-btn:after {
content: "";
display: block;
position: relative;
left: 2px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent white;
}
You can use transform: translate(-50%, -50%);.
Jsfiddle
.video_thumbnail .play-btn {
background: white;
background: blue;
display: inline-block;
padding: 25px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Related
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 4 months ago.
I'm trying to get the following image using border, but I couldn't change the color of the places I want. I looked at the use of Rotate, but it plays in the photo inside the circle.How can I generate a color plant with css?
The code below doesn't do what I want.
.
profile-img {
width: 70px;
height: 70px;
border-bottom: 4px #272121 solid;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top: 4px #272121 solid;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
maybe not quite accurately calculated the positions of the colors, but the principle should be clear.
body {
padding: 0;
display: flex;
min-height: 100vh;
}
div {
margin: auto;
background-color: #ddd;
width: 130px;
height: 130px;
position: relative;
border-radius: 100%;
}
div::after {
content: '';
width: 150px;
height: 150px;
display: block;
z-index: -10;
position: absolute;
left: -10px;
top: -10px;
border-radius: 100%;
background-image: conic-gradient(#F8D41A, #F8D41A 35%, #FFFFE8 50%, #F8D41A 65%, #F8D41A 80%, #FFFFE8 90%, #F8D41A 100%)
}
<div></div>
I have an absolutely positioned button on the bottom left cornor. The size is fixed at 15px width and height.
The button has an :after element to increase the clickable area size.
When you hover over the button, the button expands. But this also increases size of the :after element.
How do you prevent the :after element from scaling scale(1.5) with the button element?
I tried playing around with width and height properties but this messes up the positioning.
body {
position: relative;
height: 100vh;
padding:0;
margin: 0;
}
p {
margin: 0;
padding: 0;
}
button {
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: #ffd86e;
position: absolute;
bottom: 15px;
left: 15px;
z-index: 10000;
}
button::after {
content: '';
/* z-index: -100000; */
position: absolute;
bottom: 50%;
left: 50%;
height: 50px;
width: 50px;
transform: translate(-50%, 50%);
background: transparent;
border: 1px solid black;
}
button:hover {
transform: scale(1.5);
transition: transform 0.2s;
}
<p>element is left bottom corner</p>
<button></button>
Invert the styles applied I.E. apply the styles applied to the button to the :after element and vice-versa. because otherwise the :after element will also expand when hovered over the button
button {
position:relative;
border:1px solid #000;
display: block;
padding: 1.5rem 2.5rem;
}
button::after {
content: '';
z-index: -100000;
position: absolute;
bottom: 50%;
left: 50%;
transform: translate(-50%, 50%);
display: block;
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: red;
z-index: 10000;
}
button:hover:after {
transform: translate(-50%, 50%) scale(1.5);
transition: transform 0.2s;
}
<p>element is left bottom corner</p>
<button></button>
Just create a second button which will act as a disguise. The button than you want has been given class="orgBut" and the disguised button which will be responsible for adding the borders is given class="afBut".
Both have the same position and properties, just the z-index of afBut is set to 0 so that it goes behind the orgBut.
The ::after selector is given to the afBut i.e. the disguised button which is behind your original button. And hover effect is given to the orgBut.
And that's it.
When you hover above the original button the cursor never goes to the button behind it and that is why the borders that you set are left un-affected.
The code is attached!!
`.orgBut {
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: #ffd86e;
position: absolute;
bottom: 15px;
left: 15px;
z-index: 10000;
}
.afBut {
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: #ffd86e;
position: absolute;
bottom: 15px;
left: 15px;
z-index: 0;
}
.afBut::after {
content: '';
/* z-index: -100000; */
position: absolute;
bottom: 50%;
left: 50%;
height: 50px;
width: 50px;
transform: translate(-50%, 50%);
background: transparent;
border: 1px solid black;
}
.orgBut:hover {
transform: scale(1.5);
transition: transform 0.2s;
}`
<p>element is left bottom corner</p>
<button class="orgBut"></button>
<button class="afBut"></button>
Feel free for any further issues
This question already has answers here:
Inset border-radius with CSS3
(8 answers)
Closed 6 years ago.
I'm trying to create a message bubble that looks similar to this:
However, all I can manage is this:
Using this CSS:
#messaging #test:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: relative;
bottom: 0px;
left: 120px;
width: 0;
transform: rotate(180deg);
border-width: 32px 30px 0;
border-style: solid;
border-radius-top: 10;
border-color: black transparent;
}
I tried using border-radius, but it did not yeild the desired effect
I would try something like this - http://codepen.io/AndrewSepic/pen/EKJxqM
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
margin-left: 2rem;
}
#tv:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
You could add another element to protrude from the TV shape to create the talk bubble effect. For more ideas on what you can & can't do, I'd go here.
This question already has answers here:
Add outward curving border to elements like this: ◝◟___◞◜
(3 answers)
Closed 6 years ago.
Is it possible to add corners like this image (top corners)? I'm not sure what the effect is called. If it is, what would be your approach?
Update:
There were some who suggested that this question is a duplicate, unfortunately, the solution to the duplicate does not take into account that the 'wings' are filled in with color. While it works great for a tab that has an outline, this has an actual fill.
What is this technique Called?
My approach would be to use the :before and :after pseudoclasses to add and position the corner tips.
.box {
position: absolute;
background: gray;
width: 400px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 0 0 10px 10px;
}
em {
display: block;
font-style: italic;
font-size: 1.1em;
color: white;
text-align: center;
margin: 0 auto;
width: 100%;
line-height: 2.2em;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.box:before,
.box:after {
content: '';
display: block;
border: 10px solid transparent;
border-top: 10px solid gray;
position: absolute;
top: 0;
}
.box:before {
left: -6px;
}
.box:after {
right: -6px;
}
<div class="box">
<em>Benefits Included In Members Savings Package</em>
</div>
Here is a shadow that I am trying to replicate using just CSS and I just cannot work out how to do it. I have spent hours trying. I think I need to create 2 shadow elements but I'm not sure how to proceed.
The closest thing I get is with this (an abysmal attempt - I know):
.type-product:before, .type-product:after{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 21px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 35px 20px #777;
transform: rotate(-8deg);
}
.type-product:after{
transform: rotate(8deg);
right: 20px;
left: auto;
}
Most appreciative if any CSS gurus could provide any help.
NOTE: I don't think that this link covers my problem fully. It just discusses the curve - whilst I need a curve with a color-gradient...
To me that looks like something that can be achieved using a couple of elements like shown below. The shadow is actually a linear-gradient on top of which a white circle is placed. The drawback of this approach is that it would work only with a solid background (because the circle that is overlayed would need a solid color).
That just doesn't look like it could be possible using a box-shadow because the shadow itself seems like a gradient which goes from transparent or white on the left to black in the middle to transparent or white again on the right.
The output is responsive and can adapt itself to all dimensions of the parent container. Just :hover the container in the snippet to see it in action :)
.wrapper {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.content {
height: 85%;
width: 100%;
border: 1px solid;
}
.wrapper:before {
position: absolute;
content: '';
bottom: 0px;
left: 0px;
height: 15%;
width: 100%;
background: linear-gradient(to right, transparent 2%, #444, transparent 98%);
}
.wrapper:after {
position: absolute;
content: '';
bottom: -186%;
/* height of before - height of after - 1% buffer for the small gap */
left: -50%;
height: 200%;
width: 200%;
border-radius: 50%;
background: white;
}
* {
box-sizing: border-box;
}
/* just for demo */
.wrapper {
transition: all 1s;
}
.wrapper:hover {
height: 300px;
width: 400px;
}
<div class='wrapper'>
<div class='content'></div>
</div>
You can do this with :before pseudo element and box-shadow
div {
width: 200px;
height: 100px;
border: 1px solid #aaa;
position: relative;
background: white;
}
div:before {
content: '';
border-radius: 50%;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
left: 0;
transform: translateY(103%);
box-shadow: 0px -54px 13px -47px #000000, -4px -45px 35px -28px #999999;
}
<div></div>
Aside from the answers, this could also be a good box shadow for your class as well. (This is just preference & similar to what you want).
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.type-product {
position: relative;
}
.type-product:before {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
left: 10px;
width: 50%;
top: 70%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(-8deg);
}
.type-product:after {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
right: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(8deg);
}
<div class="type-product box">
</div>
Hope you like it.