This question already has answers here:
How do I add a highlight behind the text via CSS so it looks like Instagram-one below?
(2 answers)
Closed 11 months ago.
How to achieve this type of text highlighting using CSS?
This is my result and the code below combining CSS and vuetify.
<div>
<div class="tittle-font pt-4 rounded-t-xl ">
SOFTWARE
</div>
<br/>
<div class="tittle-font rounded-tr-xl ">
DEVELOPMENT
</div>
<br/>
<div class="tittle-font pb-4 rounded-b-xl rounded-tr-xl">
AND CONSULTING
</div>
</div>
.tittle-font {
font-size: calc(34px + (36 + 36 * 0.7) * ((100vw - 320px) / 1920));
line-height: calc(46px + (65 + 65 * 0.7) * ((100vw - 320px) / 1920));
font-weight: 300;
background-color: #fff500;
display: inline-block;
padding-left: 30px;
padding-right: 30px;
}
You can use after and before pseudo elements.
First of all our boxes will have position:relative and our pseudo elements need to have position:absolute
I create a circle and make it tangent to borders with ::after
Than i create another square and put it into corner which have lower z-index and have overflow:hidden
z-index is important here because when we set background color of circle to body color(which is white here), circle will disappear and the only thing left is ::before element which seems to have inverse border radius
*,
*::before,
*::after {
box-sizing: border-box;
}
.tittle-font {
position: relative;
font-size: calc(34px + (36 + 36 * 0.7) * ((100vw - 320px) / 1920));
line-height: calc(46px + (65 + 65 * 0.7) * ((100vw - 320px) / 1920));
font-weight: 300;
background-color: #fff500;
display: inline-block;
padding-left: 30px;
padding-right: 30px;
}
.box-1{
border-top-left-radius:1rem ;
border-top-right-radius: 1rem;
}
.box-2{
border-top-right-radius: 1rem;
}
.box-3{
border-top-right-radius: 1rem;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.box-1::after{
content: "";
position: absolute;
width: 2rem;
height: 2rem;
background-color: white;
z-index:5;
right: -2rem;
bottom:0rem;
border-radius: 100%;
}
.box-1::before{
content: "";
position: absolute;
width: 1rem;
height: 1rem;
background-color: #fff500;
z-index:4;
right: -1rem;
bottom:0rem;
overflow: hidden;
}
.box-2::after{
content: "";
position: absolute;
width: 2rem;
height: 2rem;
background-color: white;
z-index:5;
right: -2rem;
bottom:0rem;
border-radius: 100%;
}
.box-2::before{
content: "";
position: absolute;
width: 1rem;
height: 1rem;
background-color: #fff500;
z-index:4;
right: -1rem;
bottom:0rem;
overflow: hidden;
}
<div>
<div class="tittle-font pt-4 box-1 rounded-t-xl">SOFTWARE</div>
<br />
<div class="tittle-font rounded-tr-xl box-2">DEVELOPMENT</div>
<br />
<div class="tittle-font pb-4 rounded-b-xl rounded-tr-xl box-3">
AND CONSULTING
</div>
</div>
simple way and of course you can add padding, border-radius or any styling you need. hope this help <3
span{
background-color: #FFFF00;
width: fit-content;
}
<div>
<span>some heighlighted text here.</span> with simple way
</div>
Related
I've this style for my titles on my website:
.heading-text>* {
position: relative;
}
.heading-text h4 {
font-size: 34px;
margin-bottom: 30px;
letter-spacing: -.7px;
line-height: 40px;
}
.heading-text.heading-line h4:before {
content: '';
position: absolute;
width: 100%;
height: 15px;
bottom: 5px;
background-color: #fcf8e3;
z-index: -1
}
<div class="heading-text heading-line">
<h4>
My super loooong title
</h4>
</div>
<div class="heading-text heading-line">
<h4>
My short title
</h4>
</div>
The issue I'm facing is the yellow bar is not fitting the text width.
Is there a way it can be adjust automatically ?
Thanks.
You could make the h4 not take the whole screen, by using display:inline-block;
.heading-text>* {
position: relative;
display:inline-block;
}
Try this:
.heading-text>* {
position: relative;
}
.short-text {
display: inline-block;
}
.heading-text h4 {
font-size: 34px;
margin-bottom: 30px;
letter-spacing: -.7px;
line-height: 40px;
}
.heading-text.heading-line h4:before {
content: '';
position: absolute;
width: 100%;
height: 15px;
bottom: 5px;
background-color: #fcf8e3;
z-index: -1
}
<div class="heading-text heading-line">
<h4>
My super loooong title
</h4>
</div>
<div class="heading-text heading-line">
<h4 class="short-text">
My short title
</h4>
</div>
So, my objective here is to have the div slide in once the state (React) value is met, but all it ever does is abruptly appear instead of slide in from off the screen.
.network-message {
position: relative;
top: -67px;
width: 100%;
height: 5vh;
display: flex;
justify-content: center;
background-color: red;
color: #fff;
font-size: calc(15px + (17 - 15) * (100vw - 1440px) / (2560 - 1440));
align-items: center;
transition: transform 1s ease-in;
transform: translateY(67px);
.network-button {
margin-left: 2em;
button {
border: none;
padding: 0.5em 1.5em;
background-color: #254294;
color: #fff;
font-size: calc(11px + (13 - 11) * (100vw - 1440px) / (2560 - 1440));
cursor: pointer;
}
}
}
<div class='network-message'>
Looks like Microsoft's CRM is down at the moment. Please be patient
while they work to resolve the issue.
<div class='network-button'>
<button type='button'>
OK
</button>
</div>
</div>
I need to display a border around a div tag with a title in the border itself. In order to do this, this is what I have come up with so far
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
}
.componentTitle {
font-size: 18px;
width: 15%;
background-color: white;
margin-top: -25px;
}
<div class='componentWraper'><p class='componentTitle'>This is the title</p>This is the component body text</div>
As you can see I am using margin property to push the title up on top of the border. I am not sure if this is the proper approach to do this and I have the following questions.
I am positioning the title using pixels (margin) and a fixed value (-25px). This is a site that has to work on mobile phones, tablets as well. Is this an acceptable approach?
I am setting the background-color to white so that the border does not appear behind the text, is this an ok approach?
Is there a better and more acceptable way to do this, I do not want to use fieldset because we have little control over the border (border-radius).
There are three logical ways you can use to achieve this.
You can use a <fieldset> with a legend which is the basic HTML way of doing this. You can find more information about this here.
Use custom CSS with positioning, not negative margins or etc.:
body {
background: #fff;
}
.componentWraper {
margin: 40px; /* just for contrast */
position: relative;
border: 2px solid tomato;
border-radius: 12px;
padding: 20px;
}
.componentWraper .componentTitle {
position: absolute;
top: -25px;
background: #fff;
padding: 0 10px;
}
<div class='componentWraper'>
<p class='componentTitle'>This is the title</p>This is the component body text</div>
Use custom CSS with pseudo-elements:
body {
background: #fff;
}
.componentWraper {
margin: 40px; /* just for contrast */
position: relative;
border: 2px solid tomato;
border-radius: 12px;
padding: 20px;
}
.componentWraper::before {
content: 'This is the title';
position: absolute;
top: -10px;
padding: 0 10px;
background: #fff;
}
<div class='componentWraper'>This is the component body text</div>
I think you're on the right track. I'd make a few changes to have more control over the styling. You can use ems or pixels.
Wrap the title and content in a new div and give that a negative margin:
<div class='componentWrapper'>
<div>
<div class='componentTitle'>This is the title</div>
<div class='componentContent'>
<p>This is the component body text</p>
</div>
</div>
.componentWrapper div {
margin-top: -1em;
}
Set your title to display: inline-block and use padding to control the white space around it (instead of using width)
.componentTitle {
font-size: 18px;
background-color: white;
display: inline-block;
padding: .5em;
}
codepen
snippet:
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
margin-top: 1em;
}
.componentWrapper div {
margin-top: -1.2em;
}
.componentTitle {
font-size: 18px;
background-color: white;
display: inline-block;
padding: .5em .3em;
}
<div class='componentWrapper'>
<div>
<div class='componentTitle'>This is the title</div>
<div class='componentContent'>
<p>This is the component body text</p>
</div>
</div>
This is what I came up with. I wanted to get rid of the negative margin, but couldn't figure out a way to do that.
See the Pen offset title by Yvonne Aburrow (#vogelbeere) on CodePen.
HTML
<div class="componentWrapper">This is the component body text</div>
CSS
.componentWrapper {
border: 1px solid blue;
border-radius: 40px;
padding: 16px;
width: 95%;
margin: 3em;
}
.componentWrapper:before {
content: "this is the title";
font-size: 18px;
width: 10%;
background-color: white;
border: 1px solid blue;
border-radius: 12px;
display: block;
margin-top: -29px;
padding: 3px;
}
I am not sure how a screen reader would deal with the title text being in the CSS (or how you would scale that up if you have a lot of different titles.
How can I get that yellow box aligned like on the picture? I tried some stuff with table cells but it kinda destroyed everything. I also played a bit with the float conditions but the results were horrible too. Can you help me?
Here's my code:
HTML
<div class="job_board">
<div class="job_box">
<span class="job_title_working_field"> <!-- Just made that span for grouping but it's unnecessary. -->
<div class="job_title"><h1>Product Development <span class="light">(m/w)</span></h1></div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</span>
<div class="slide_button"></div>
</div>
</div>
CSS
.light {
font-weight: normal;
}
.job_box {
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
span.job_title_working_field {
table-cell;
}
.slide_button {
position: absolute;
width: 50px;
height: 100%;
background: yellow;
display: table-cell;
}
JSFiddle
Since .slide_button is within an element, you would simply relatively position the parent element:
.job_box {
position: relative;
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
font-family: "Helvetica", sans-serif;
}
And then absolutely position the yellow .slide_button element at the top/right - relative to the parent.
UPDATED EXAMPLE HERE
.slide_button {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
background: yellow;
}
If you look at the above example, you will notice that a horizontal scrollbar is present. If you want to remove this, use box-sizing:border-box in order to include the padding within the .job_box element's dimension calculations.
UPDATED EXAMPLE HERE
.job_box {
box-sizing:border-box;
-moz-box-sizing:border-box;
}
It's also worth noting that I removed the default 8px margin on the body element.. body{margin:0}
I changed the markup order a little and updated the css
you are combining too many styles: table-cell + absolute + float don't mix well
http://jsfiddle.net/pixelass/3Qqz4/2/
HTML:
<div class="job_board">
<div class="job_box">
<div class="slide_button"></div>
<div class="job_title_working_field">
<div class="job_title">
<h1>Product Development <span class="light">(m/w)</span></h1>
</div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.light {
font-weight: normal;
}
.job_box {
width: 100%;
background-color: #082730;
color: white;
text-align: center;
display: block;
font-family:"Helvetica", sans-serif;
position: relative;
height: 120px;
vertical-align: top;
}
.job_title h1 {
margin: 0;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
.job_title_working_field {
padding: 30px 50px;
}
.slide_button {
width: 50px;
height: 100%;
background: yellow;
float: right;
}
There is div container and 2 divs inside. It should be image(first div) and text near it with chosen distance between them.
alt text http://img24.imageshack.us/img24/1160/2delcontact.png
The code below works fine in Firefox/Chrome/Safari, but it works incorrect in IE7/Opera.
alt text http://img710.imageshack.us/img710/5675/2delcontactie7opera.png
xhtml:
<div id="mainContact">
<div id="contactIcon">
<img id="phoneImg" alt="phone" src="img/cellPhone.png" />
</div>
<div id="contactField">
<span id="topMailAddress">07897 255 664</span>
</div>
</div>
css:
html, body{ font-family: Tahoma; }
img{ border: 0px; }
#mainContact{
width: 135px;
float: right;
overflow: hidden;
font-family: Trebuchet MS;
}
#contactIcon{
width: 19px;
margin-right: 7px;
float: left;
text-align: right;
}
#phoneImg{
position: relative;
bottom: 14px;
}
#contactField{
float: right;
width: 109px;
text-align: right;
font-size: 1.12em;
color: #454545;
}
#topMailAddress{
position: relative;
width: 109px;
top: 13px;
}
here is this example on server: link text
What can be the reason of this problem?
Try this
HTML
<div id="mainContact">
<img id="phoneImg" alt="phone" src="img/cellPhone.png" />
<span id="topMailAddress">07897 255 664</span>
</div>
<br class="clear" />
CSS
#mainContact {
width: 200px; // Width of whole element - adjust to always fit number
}
#mainContact #phoneImg,
#mainContact #topMailAddress {
display: block;
float: left;
}
#mainContact #phoneImg {
margin-right: 10px; // Adjust gap between image and text
}
br.clear {
clear: both;
height: 1px;
overflow:hidden;
font-size: 1px; // For IE and the like
}
Have fun ;)