I want to style my header tag H1 as per the following design!
Header Design
The basic css to create is box is easy, how do i create the line after the box i'm using this css for creating the box
h1{
background: #a42f2f;
color: #fff;
width: 179px;
padding: 0px 8px;
}
My Fix for a wordpress Template:
.page_box h1{
background: #a42f2f;
color: #fff;
width: auto;
padding: 5px 11px;
position: relative;
z-index: 2;
font-size: 18px !important;
margin: 9px 0;
display:inline-block;
}
.page_box{
overflow-x:hidden;
}
.page_box h1:after{
content: "";
position: absolute;
height: 2px;
top: 14px;
width: 900px;
background: #ff6300;
margin-left: 11px;
}
I think this fiddle should help you.
h1{
color: #fff;
width: 100%;
padding: 0px 8px;
position: relative;
font-family: sans-serif;
text-transform: uppercase;
}
h1:before {
content: ' ';
width: 178px;
background-color: #a42f2f;
position: absolute;
height: 100%;
z-index: -10;
left: -8px;
}
h1:after {
content: ' ';
border-bottom: 2px solid orange;
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: -20;
}
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
This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 3 years ago.
I am trying to create a button with chopped corner, the only challange is to make that corner transparent, instead of background color of that corner.
Attached the exmple I am trying to achieve
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
width: 24px;
height: 24px;
background: #cccccc;
position: absolute;
right: -12px;
bottom: -12px;
transform: rotate(-132deg);
}
<div class="wrapper">
This is button
</div>
I believe that modifying the button's background - using linear-gradient from transparent to the specific color - is what you're looking for:
background: linear-gradient(315deg, transparent 15px, #07926D 0px);
And in context:
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
background: linear-gradient(315deg, transparent 15px, #07926D 0px);
}
<div class="wrapper">
This is button
</div>
You can do something like this, I am in hurry so made this, You can change anything as per your need.
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 10px 16px 35px;
position: relative;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
width: 0;
position: absolute;
height: 0;
border-style: solid;
border-width: 26px 0px 20px 20px;
border-color: transparent transparent transparent #07926D;
right: -20px;
top: 2px;
}
a.btn-border-tilt:before {
content: "";
width: 0;
position: absolute;
height: 0;
border-style: solid;
border-width: 0px 0 60px 30px;
border-color: transparent transparent transparent #07926D;
right: -4px;
top: -15px;
transform: rotate(90deg);
}
<div class="wrapper">
This is button
</div>
Check this with after and before and changes padding for text center
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 12px 16px 30px;
position: relative;
text-decoration: none;
}
.btn-border-tilt:before {
content: "";
width: 18px;
height: 30px;
background: #07926D;
position: absolute;
right: -18px;
top: 0px;
}
.btn-border-tilt:after {
content: "";
width: 0;
height: 0;
position: absolute;
width: 0;
height: 0;
border-top: 18px solid #07926D;
border-right: 18px solid transparent;
right: -18px;
bottom: 0px;
}
<div class="wrapper">
This is button
</div>
Create a triangle at the bottom.
Reference: CSS Tricks
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
border: 12px solid #aaaaaa;
border-left-color: transparent;
border-top-color: transparent;
}
<div class="wrapper">
This is button
</div>
I would like to design a border like below picture. But I am running out of ideas about how to do it.
https://codepen.io/szn0007/pen/VRGPyE
div.about-me h2{
color: #000;
border-bottom: 1px solid #efefef;
width: 20%;
margin: 0 auto;
padding: 20px;
}
THank you in advance.
Luckily with CSS you have access to two pseudo elements on every container. I added the Asterix to one of the pseudo elements :after and the line to another :before.
For example:
.fancy-underline {
position: relative;
display: inline-block;
}
.fancy-underline:before {
content: '';
position: absolute;
top: calc(100% + 10px);
left: 0;
width: 100%;
height: 1px;
background: grey;
}
.fancy-underline:after {
content: '*';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #fff;
}
<h2 class="fancy-underline">About Me</h2>
try this out:
<div class="about-me">
<h2>About Me</h2>
<p>*</p>
</div>
css:
div.about-me{
width: 100%;
text-align: center;
}
div.about-me h2{
color: #000;
border-bottom: 1px solid #efefef;
width: 20%;
margin: 0 auto;
padding: 20px;
}
p {
font-size: 50px;
transform: translatey(-72px);
}
I am having trouble getting my pseudo element to show up behind the parent element. I am trying to create a button that looks like this:
however I can't figure out how to get the brown to display behind the button. All I'm getting is this:
My styling is:
.orangeBorderedButton{
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
position: relative;
margin:10px 25px;
background-color: transparent;
border-radius: 10px;
border:1px solid white;
z-index: 3;
}
.orangeBorderedButton:after{
position: absolute;
height: 100%;
content: '';
width: 100%;
background-color: $orange;
left: -2px;
bottom: 2px;
border-radius: 10px;
z-index:1;
}
I would just turn your css around and give the background to the button and not the after element, and you should be good.
http://jsfiddle.net/zt4yufx0/28/
body{
background:black;
}
.orangeBorderedButton{
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
position: relative;
margin:10px 25px;
background-color: transparent;
border-radius: 3px;
border-color: transparent;
background-color: #aa7936;
z-index: 5;
padding: 7px 15px 3px 25px;
}
.orangeBorderedButton:after{
position: absolute;
border:1px solid white;
height: 100%;
content: '';
width: 100%;
left: 5px;
bottom: -5px;
border-radius: 3px;
z-index:-5;
}
<a data-sr>
<button class="button large orangeBorderedButton">See All</button>
</a>
Use background color in button CSS and give border to :after, See this code
.orangeBorderedButton{
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
position: relative;
margin:10px 25px;
background-color: #aa7936;
border-radius: 10px;
border: 0px;
z-index: 3;
}
.orangeBorderedButton:after{
position: absolute;
height: 100%;
content: '';
width: 100%;
border:1px solid white;
left: 2px;
top: 2px;
border-radius: 10px;
z-index: 4;
}
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.