I'm trying to solve an exercise but I can not do it.
In theory I have to move the ::before and ::after elements of the .calendar element in the proper way so they can be placed just like the picture.
Please move the ::before and ::after of the element in the proper way so they can be placed just like the picture.
Change their colors as well so they can have the same color, and apply the border-radius to the ::before and ::after of the to make them look like a ring in 2 dimensions seen from the front.
.calendar {
top: 0em;
left: 1em;
padding-top: 5px;
width: 80px;
background: #ededef;
font-size: 54px;
text-align: center;
color: #000;
border-radius: 3px;
position: absolute;
}
.calendar em {
display: block;
font-size: 15px;
color: #fff;
background: #04599a;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.calendar:before,
.calendar:after {
content: "";
float: left;
width: 8px;
height: 8px;
background: #111;
z-index: 1;
border-radius: 10px;
box-shadow: 0 1px 1px #fff;
position: absolute;
}
.calendar:before {
left: 11px;
}
.calendar:after {
right: 11px;
}
.calendar em:before,
.calendar em:after {
content: "";
float: left;
margin: 10px;
width: 5px;
height: 15px;
background: grey;
z-index: 5;
border-radius: 50px;
position: absolute;
}
.calendar em:before {
left: 30px;
}
.calendar em:after {
right: 13px;
top: -16px;
left: 2px;
bottom: 10px;
position: absolute;
}
<p class="calendar">7 <em></em></p>
You shouldn't be using floats in general. They needlessly complicate positioning and aren't necessary. There are more modern ways to align things if that's what you're after.
Mostly, just position your elements with top and left:
.calendar {
top: 0em;
left: 1em;
padding-top: 5px;
width: 80px;
background: #ededef;
font-size: 54px;
text-align: center;
color: #000;
border-radius: 3px;
position: absolute;
}
.calendar em {
display: block;
font-size: 15px;
color: #fff;
background: #04599a;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.calendar:before,
.calendar:after {
content: "";
width: 8px;
height: 8px;
background: #111;
z-index: 1;
border-radius: 10px;
box-shadow: 0 1px 1px #fff;
position: absolute;
top: 5px;
}
.calendar:before {
left: 11px;
}
.calendar:after {
right: 11px;
}
.calendar em:before,
.calendar em:after {
content: "";
margin: 10px;
width: 5px;
height: 15px;
background: grey;
z-index: 5;
border-radius: 50px;
position: absolute;
top: -16px;
}
.calendar em:before {
left: 52px;
}
.calendar em:after {
right: 13px;
left: 2px;
bottom: 10px;
position: absolute;
}
<p class="calendar">7 <em></em></p>
Related
I want to make a speech bubble shape identical to the image.
What part of the CSS shown below can be modified to make it look like the picture?
Can you help me to get the look I want?
.body{
background : linear-gradient(to bottom, #fff,red)
}
.chat {
position: relative;
width: 270px;
padding: 10px;
margin: 1em auto 50px;
text-align: center;
color: black;
background: #fff;
border: 1px solid gray;
border-radius: 30px;
}
.chat:before {
content: "";
position: absolute;
z-index: 2;
top: -2px;
left: -7px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.chat:after {
content: "";
position: absolute;
z-index: 3;
top: -2px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-bottom-right-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
<div class="chat"></div>
We can't bring exactly as it is. I have tried to bring it near the shape.
.chat {
position:relative;
width:270px;
padding:10px;
height:50px;
margin:1em auto 50px;
text-align:center;
color:black;
background:#e5e5ea;
//border: 1px solid gray;
border-radius: 30px;
}
/* creates part of the curve */
.chat:before {
content: "";
position: absolute;
z-index: 2;
top: 7px;
left: -8px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
/* creates part of the curved pointy bit */
.chat:after {
content: "";
position: absolute;
z-index: 3;
top: 7px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-top-right-radius: 14px;
-webkit-transform: translate(-30px, -2px);
}
<div class="chat">
</div>
Here's a example based on Pure CSS speech bubbles by Nicolas Gallagher.
It uses overlapping pseudo-elements with border-radius to create the bubble's pointy curved stem. This may not be a pixel-perfect match to your mockup, but you can modify the values to improve the shape as desired.
body {
background: lightgray;
margin: 0;
}
.speech-bubble {
position: relative;
padding: 50px;
margin: 1em 20px;
text-align: center;
color: black;
background: white;
border-radius: 30px;
}
.speech-bubble:before {
content: "";
position: absolute;
z-index:-1;
left: -22px;
top: 0;
width: 40px;
border-bottom: 35px solid white;
border-top-right-radius: 25px;
}
.speech-bubble:after {
content: "";
position: absolute;
z-index:-1;
left: -28px;
top: -3px;
height: 38px;
width: 28px;
background: lightgray;
border-top-right-radius: 20px;
}
<div class="speech-bubble">Hello, world.</div>
This demo might help visualize how the stem is created:
body {
background: lightgray;
margin: 0;
}
.speech-bubble {
position: relative;
padding: 50px;
margin: 1em 20px;
text-align: center;
color: black;
background: white;
border-radius: 30px;
}
.speech-bubble:before {
content: "";
position: absolute;
z-index: -1;
left: -22px;
top: 0;
width: 40px;
border-bottom: 35px solid green;
border-top-right-radius: 25px;
}
.speech-bubble:after {
content: "";
position: absolute;
z-index: -1;
left: -28px;
top: -3px;
height: 38px;
width: 28px;
background: red;
border-top-right-radius: 20px;
}
<div class="speech-bubble">Hello, world.</div>
Also see:
How to create a curved speech bubble?
Speech bubble with arrow
I need to make this exact div with right arrow. As you can see it's little bit curved
Here's what I got. I want to make it a little bit longer and curved as in picture above
.speech-bubble {
display:inline-block;
padding:5px;
position: relative;
background: #dcf8c6;
border-radius: .4em;
}
.speech-bubble:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: #dcf8c6;
border-right: 0;
margin-top: -5px;
margin-right: -5px;
}
<div class="speech-bubble"> Hello Mike! Could you please call me back </div>
.speech-bubble {
display: inline-block;
position: relative;
}
.speech-bubble > span {
background: #dcf8c6;
border-radius: 0.4em;
display: inline-block;
padding: 10px;
z-index: 1;
}
.speech-bubble::after {
background-color: #ffffff;
border-radius: 0 0 50% 0;
border-right: 0;
bottom: 14px;
content: '';
height: 30px;
margin-top: -5px;
margin-right: -5px;
position: absolute;
right: -21px;
transform: rotate(10deg);
width: 30px;
z-index: -1;
}
.speech-bubble::before {
background-color: #dcf8c6;
border-radius: 50%;
border-right: 0;
bottom: 7px;
content: '';
height: 30px;
margin-top: -5px;
margin-right: -5px;
position: absolute;
right: -11px;
transform: rotate(20deg);
width: 30px;
z-index: -1;
}
<div class="speech-bubble">
<span>Hello Mike! Could you please call me back</span>
</div>
Here's the bubble's code
.speech-bubble {
display: inline-block;
padding: .5em 2em 2em 2em;
position: relative;
background: #dcf8c6;
border-radius: .4em;
font-family: 'Arial', sans-serif;
color: #888;
box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
}
About the right arrow, what about using a background-image (png). If you want that shape you need to use border-radius. Using a .png image is way easier.
By the way, I wouldn't use a unique div to be a container and a text-wrapper...
How can we make this shape using CSS?
I'm able to write the below code using CSS but the shape generated output is a bit off. Can we do that using CSS?
.btn-arrow {
width: 15px;
height: 24px;
border: 2px solid red;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-left: 0;
display: inline-block;
position: relative;
}
.btn-arrow:after,
.btn-arrow:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.btn-arrow:after {
border-right-color: white;
border-width: 12px;
margin-top: -12px;
}
.btn-arrow:before {
border-right-color: red;
border-width: 14px;
margin-top: -14px;
}
body {
padding: 20px;
}
<div class="btn-arrow"></div>
With CSS you can achieve that.
Just create ::after and ::before pseudoelements and the main box rotate 45 degrees. You can adjust the degrees on the linear-gradient part instead of "to right" sentence.
This trick is necessary because border-image and border-radius can't live both on the same element.
You can see more about this:
Possible to use border-radius together with a border-image which has a gradient?
https://css-tricks.com/examples/GradientBorder/
.shape {
position:relative;
width: 100px;
border-radius: 100% 100% 100% 0;
height: 100px;
transform: rotate(45deg);
margin: 0 auto;
background: white;
background-clip: padding-box;
}
.shape::after {
position: absolute;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
background: linear-gradient(to right, #fe3870, #fc5d3e);
content: '';
z-index: -1;
border-radius: 100% 100% 100% 0;
}
.shape::before {
position: absolute;
top: 8px;
bottom: 8px;
left: 8px;
right: 8px;
background: white;
content: '';
z-index: 1;
border-radius: 100% 100% 100% 0;
}
<div class="shape">
</div>
One of many possible solutions in just CSS:
This solution only requires one pseudo element.
.btn-arrow {
width: 44px;
height: 44px;
border-top-right-radius: 40px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
background: -webkit-linear-gradient(left, rgba(232,51,105,1) 0%,rgba(235,94,67,1) 100%); /* Chrome10-25,Safari5.1-6 */
transform:rotate(45deg);
position: relative;
}
.btn-arrow::after {
display: block;
width: 30px;
height: 30px;
border-top-right-radius: 40px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
background: white;
position: absolute;
content: '';
top: 7px;
left: 7px;
}
body {
padding: 20px;
}
<div class="btn-arrow"></div>
Adjust the CSS to look like this
.btn-arrow {
width: 30px;
height: 30px;
border: 2px solid red;
border-radius: 100%;
border-left: 0;
display: inline-block;
position: relative;
}
.btn-arrow:after,
.btn-arrow:before {
right: calc(100% - 6px);
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.btn-arrow:after {
border-right-color: white;
border-width: 12px;
margin-top: -12px;
}
.btn-arrow:before {
border-right-color: red;
border-width: 14px;
margin-top: -14px;
}
body {
padding: 20px;
}
This is my code
.privacycheck1 {
position: relative;
top: 265px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 35px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
<div class="privacycheck1"></div>
I want to make it so when someone hovers over the privacycheck1, I want them to see an arrow connecting to the box pointing at privacycheck1's circle.
Is there anyway to make a class in a class?
You can use an extra span element to create this.
First create the tail of the arrow using the span and then create the arrow head using the border-hack on the after pseudo-element. You can find a wide range of arrows here
.privacycheck1 {
position: relative;
top: 30px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 30px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 30px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
.arrow {
position: absolute;
width: 15px;
height: 5px;
background: green;
left: 20px;
top: 8px;
display:none;
}
.arrow:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid green;
left:15px;
top:-2px;
display:none;
}
.privacycheck1:hover span,.privacycheck1:hover span:after{
display:block;
}
<div class="privacycheck1"><span class="arrow"></span>
</div>
You don't need an extra span. You can use an :after just like you used a :before.
.privacycheck1:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 100%;
width: 0;
height: 0;
margin-top: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #CF0000;
}
If you use top: 50%; and margin-top negative half the arrow height it will always be perfectly aligned in the vertical center. In this case I gave the arrow height: 30px; so the margin-top is -15px
Oh and you made a mistake in you hover:before. 'font-weight: 100px;' doesn't exist, you can use 'bold', '700' or another value.
Another tip, add this to your hover:before
left: calc(100% + 15px);
This way your box will always have the right distance between the 'dot' and the text box. The box will use the width of the parent (the element with position: relative;) + 15px (the width of the arrow) to align from the left.
I want to show three horizontal dots (I've made a demo on jsfiddle)
span {
position: relative;
background-color: blue;
border-radius: 5px;
font-size: 0;
margin-left: 20px;
padding: 5px;
}
span:before {
position: absolute;
left: -10px;
content: '';
background-color: green;
border-radius: 5px;
font-size: 0;
margin-left: 35px;
padding: 5px;
}
span:after {
position: absolute;
right: 0;
content: '';
background-color: grey;
border-radius: 5px;
font-size: 0;
margin-left: 35px;
padding: 5px;
}
I don't know if this is the best way to achieve this. Also, I want them to line-up horizontally. And I don't understand why they aren't. Any suggestion how to fix this ?
Since you are using absolute positioning, you could use top property to position the pseudo generated contents vertically, and play with left property for horizontal alignment
Example Here
span:before {
position: absolute;
left: -20px; /* <-- align the circle horizontally */
top: 0; /* <-- Added declaration */
content: '';
background-color: green;
border-radius: 5px;
font-size: 0;
padding: 5px;
}
span:after {
position: absolute;
left: 20px; /* <-- align the circle horizontally */
top: 0; /* <-- Added declaration */
content: '';
background-color: grey;
border-radius: 5px;
font-size: 0;
padding: 5px;
}
In this case there's no need to use margin of the pseudo-elements.
Additionally, you could avoid negative values for left property to make the circles appear in the right. (Example Here).
//using left instead of right in after
span {
position: relative;
background-color: blue;
border-radius: 5px;
font-size: 0;
margin-left: 20px;
padding: 5px;
}
span:before {
position: absolute;
left: -10px;
content: '';
top: 0;
background-color: green;
border-radius: 5px;
font-size: 0;
margin-left: 35px;
padding: 5px;
}
span:after {
position: absolute;
left: 10px; //using left instead of right
content: '';
background-color: grey;
border-radius: 5px;
font-size: 0;
margin-left: 35px;
top: 0;
padding: 5px;
}
Check this jsFiddle
HTML
<span></span>
CSS
span {
position: relative;
background-color: blue;
border-radius: 5px;
font-size: 0;
margin-left: 20px;
padding: 5px;
}
span:before {
position: absolute;
left: -20px;
top: 0;
content: '';
background-color: green;
border-radius: 5px;
font-size: 0;
padding: 5px;
}
span:after {
position: absolute;
left: 20px;
top: 0;
content: '';
background-color: grey;
border-radius: 5px;
font-size: 0;
padding: 5px;
}