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.
Related
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 3 years ago.
I am trying a simple thing using z-index. But it is not working. Can anyone help me?
Please check the code. The blue background should go below, but it is not.
.btn {
padding: 15px 20px;
background: white;
border-radius: 20px;
border: 1px solid red;
position: relative;
z-index: 10;
}
.btn:before {
content: "";
width: 100%;
height: 100%;
background: blue;
position: absolute;
display: inline-block;
left: 0;
top: 0;
border-radius: 20px;
z-index: 5;
}
<a class="btn" href="#">Paynow</a>
Change the z-index of your pseudo-element to -1. The other numbers are irrelvant for this example.
.btn {
padding: 15px 20px;
/* background: white; */ not required if blue section is to be seen*/
border-radius: 20px;
border: 1px solid red;
position: relative;
color:white;
}
.btn:before {
content: "";
width: 100%;
height: 100%;
background: blue;
position: absolute;
display: inline-block;
left: 0;
top: 0;
border-radius: 20px;
z-index: -1;
}
<a class="btn" href="#">Paynow</a>
This question already has answers here:
how to make an oval in css?
(8 answers)
Closed 5 years ago.
I need an oval instead of a rectangle with rounded edges.
Here's the code I'm using.
div {
position: fixed;
border-radius: 25px;
background: rgba(0,0,0,.5)
width: 100px;
height: 50px;
top: calc(50% - 25px);
right: calc(50% - 50px);
}
Simply use border-radius: 50% instead :)
div {
border-radius: 50%;
background-color: rgba(0,0,0,0.5);
width: 100px;
height: 50px;
}
<div></div>
Set border-radius as a percentage.
div {
position: fixed;
width: 100px;
height: 50px;
background: rgba(0,0,0,.5);
border-radius: 50%;
}
Try this link
which will explain all the different shapes you need.
Following is an example on how you can achieve it.
#round {
position: relative;
width: 100px;
height: 100px;
margin: 20px 0;
background: orange;
border-radius: 48% / 25%;
color: white;
}
#round:before {
content: '';
position: absolute;
top: 10%;
bottom: 11%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 21% / 68%;
}
<div id="round"></div>
I'm trying to redo a client site that's currently not responsive and throughout the site she has long images that are trapezoids with text inside. Of course, on devices, you can barely read it.
So I'm trying to turn it into CSS using shapes. Tried a bunch of examples but nothing working at the moment. I think the difference is the examples seem to use hard width numbers instead of 100% for fluid width. I have a pen here: https://codepen.io/anon/pen/KmgoqE and here's the code I'm playing with as I post this (still playing, of course):
h2.test-text {
background: #000;
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -4%;
bottom: -11%;
left: -3%;
right: -3%;
z-index: -1;
-webkit-transform: perspective(50em) rotateX(-30deg);
transform: perspective(50em) rotateX(-30deg)
}
You have already good answers
To give another try. I have opted to fix your current attempt.
Basically the problem is that the background should be on the pseudo instead of on the base
h2.test-text {
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -0px;
bottom: -50%;
left: 0px;
right: 0px;
z-index: -1;
background: #000;
transform: perspective(20em) rotateX(-45deg);
transform-origin: top;
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
And now a fancy efect
h2.test-text {
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
perspective: 20em;
animation: tilt 2s infinite alternate linear;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -0px;
bottom: -50%;
left: 0px;
right: 0px;
z-index: -1;
background: #000;
transform: rotateX(-45deg);
transform-origin: top;
}
#keyframes tilt {
from {perspective-origin: left}
to {perspective-origin: right}
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
By using pseudo elements, and skew them, you can achieve that.
This one works if the line breaks up to 3 lines, and if you need more, a media query will fix that.
h2.test-text {
background: #000;
color: #FFF;
padding: 5px;
font-size: 30px;
width: calc(100% - 120px);
margin: 0 auto;
text-align: center;
position: relative;
}
h2.test-text:before,
h2.test-text:after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 70px;
background: inherit;
z-index: -1;
}
h2.test-text:before {
left: -35px;
transform: skewX(30deg)
}
h2.test-text:after {
right: -35px;
transform: skewX(-30deg)
}
h2.test-text.nr2 {
margin-top: 20px;
width: calc(60% - 100px);
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
<h2 class="test-text nr2">Check out what our Clients are Saying</h2>
You can achieve this effect by using the the common transparent border trick to achieve css triangles. Just instead of even borders and only one set to non-transparent you use different border sizes and two colors. I colored the right edge differently so it's easier to see what's going on.
h2.test-text {
background: #bada55;
color: #FFF;
font-size: 30px;
padding: 5px;
line-height: 1;
width: 80%;
text-align: center;
position: relative;
margin:40px;
}
h2.test-text:before, h2.test-text:after {
content:"";position:absolute;top:0;width:0;height:0;
border-style:solid;
border-width:20px 15px;
}
h2.test-text:before{
left: -30px;
border-color: #bada55 #bada55 transparent transparent;
}
h2.test-text:after {
right: -30px;
border-color:blue transparent transparent red;
}
<h2 class="test-text">Whatever somebody says…</h2>
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.
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%);
}