I'm using some stylized HRs to create section separators.
But now I'm trying to create a H1 element with a border bottom smaller than H1 width (variable width according to the width of the H1 text) and with a thicker middle (height).
Something like this:
I scoured several search sources trying to find a solution but found nothing like it.
I tried to use :after and :before but still stuck.
Any idea?
What I've tried so far:
h1 {
display:inline;
border-bottom:1px solid black;
}
h1:after {
content: '';
display: block;
width: 100%;
height: 100%;
border-bottom:3px solid red;
}
<h1>
My Text
</h1>
You can easily do such thing with linear-gradient with no need of extra markup or pseudo element:
h1 {
display:inline-block;
font-size:3em;
padding-bottom:10px;
background:
linear-gradient(red 0 0) 50% calc(100% - 2px)/80% 2px,
linear-gradient(red 0 0) 50% 100% /40% 6px;
background-repeat:no-repeat;
}
<h1>Lorem Ipsum</h1>
You can use the ::before and ::after pseudo elements to create the lines:
h1 {
display:inline-block;
font-size:3em;
position: relative;
font-family: Impact, Arial;
color: #444;
font-weight: 900;
}
h1::before,
h1::after {
content: '';
display: block;
background: #ea596e;
position: absolute;
}
h1::before {
width: 40%;
height: 5px;
bottom: -12px;
left: 30%;
}
h1::after {
width: 80%;
height: 1px;
bottom: -10px;
left: 10%;
}
<h1>my <h1> tag</h1>
Related
I have 2 divs 50% width each. There is a huge header h1 which should have the color of these two divs. I have tried mix-blend-mode but it gives me some random colors when set to difference. My goal is to invert the colors but to keep the colors of the divs. This is a codepen file, I have tried to keep it as simple as possible: https://codepen.io/lukagurovic/pen/MLoZmj
The final effect is supposed to look like on in this example:
https://jsfiddle.net/1uubdtz6/
but I am not sure why doesn't it work with these colors.
Also, these divs are interactive so the color has to change dynamicly as divs are increasing in width when hovered, and there should be only stroke of text without any fill
body {
height: 100vh;
width: 100%;
position: relative;
background-color: #510035;
margin: 0 auto;
}
h1 {
font-size: 4.7em;
text-transform: uppercase;
}
.half-pager {
width: 50%;
height: 100%;
position: absolute;
display: inline-block;
overflow: hidden;
text-align: center;
}
.half-pager-dark {
background-color: #510035;
}
.half-pager-light {
right: 0;
background-color: #E8E8E8;
float: right;
}
.lp-header {
position: absolute;
}
.lp-header {
color:transparent;
mix-blend-mode: difference;
-webkit-text-stroke: 3px rgb(126, 124, 133);
z-index: 1;
}
.lp-header {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="box" class="half-pager half-pager-dark"></div>
<div id="box1" class="half-pager half-pager-light"></div>
<h1 class="lp-header">left or right</h1>
One idea is to duplicate the text and use CSS variable to define the color so you can easily change them in one place. I used clip-path to hide half of one text and show the other half:
body {
margin: 0;
--c1:#510035;
--c2:#E8E8E8;
}
body:hover {
--c1:red;
--c2:blue;
}
h1 {
font-size: 4.7em;
text-transform: uppercase;
margin: 0;
}
.first {
background:var(--c1);
-webkit-text-stroke: 3px var(--c2);
}
.second {
background:var(--c2);
-webkit-text-stroke: 3px var(--c1);
clip-path:polygon(0% 0%, 50% 0%, 50% 100%,0% 100%);
}
.lp-header {
position:absolute;
top:0;
left:0;
right:0;
min-height:100vh;
box-sizing:border-box;
color: transparent;
z-index: 1;
padding: 50px;
text-align: center;
transition:0.5s;
}
<h1 class="lp-header first">left or right</h1>
<h1 class="lp-header second">left or right</h1>
In the following example, I demonstrate the issue where the colors are perfect, except for portions at different %'s results in some or all of the text being obscured.
What I would like to achieve, is to somehow assign the font color to be the difference of the background. I recall seeing something many years ago in DHTML which allowed for this. The result I am looking for is as follows
In the 50% sample, the '5' would be in white, and the '0' would be in black.
In the 75% sample, the '75' would be in white.
In the 20% sample, the '20' would be in black.
I believe there is a way to do this using CSS/CSS3, but I am unable to locate information on it.
The resulting style information should be contained inside the 'p' style in the CSS file. No 'tricks' like splitting data or altering the HTML using JavaScript / etc. The number inside the <p> element should remain whole and in tact.
body {
background: #000000;
}
p {
background: #ffffff;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAA1BMVEVilQmZw+RvAAAAAXRSTlOF3TSvyQAAAD1JREFUeNrtwQENAAAAwqD3T20PBxQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPBmnQgAAd4aVNwAAAAASUVORK5CYII=");
background-repeat: repeat-y;
background-size: 0% auto;
color: #ffffff;
padding: 5px;
text-align: center;
border: 1px solid #3E8096;
display: block;
}
<p style="background-size: 50% auto !important">50</p>
<p style="background-size: 75% auto !important">75</p>
<p style="background-size: 20% auto !important">20</p>
Note:
I was considering a drop-shadow, however this would result in a funny
looking font when it is a white font. I also considered encapsulating
the text in a border, however the ideal result would be for the font
to adjust based on background.
body { background: navy }
div {
background-color: white;
display: inline-block;
border: 1px solid red;
width: 200px;
font-size: 50px;
text-align: center;
position: relative;
color: red;
}
span {
content: '';
position: absolute;
background: cyan;
width: 50%;
top: 0;
left: 0;
height: 100%;
display: inline-block;
mix-blend-mode: difference;
}
<div>
0000 <span></span>
</div>
body { background: navy }
div {
background-color: white;
display: inline-block;
border: 1px solid red;
width: 200px;
font-size: 50px;
text-align: center;
position: relative;
color: red;
}
div:after {
content: '';
position: absolute;
background: cyan;
width: 50%;
top: 0;
left: 0;
height: 100%;
display: inline-block;
mix-blend-mode: difference;
}
<div>00000</div>
Can I ask a little help about creating that shape with CSS?
The button needs a circle for the icon, and the simple box for the text.
Here is a possible version using the :before pseudo element. The pseudo element is converted into a circle by using border-radius: 50% and is then positioned before the rectangular div#menu as required.
You can add a image (like the one in question) to the pseudo element by using the content property like shown below:
content: url(http://yoursite.com/yourimage.png);
or using the background-image property also:
background-image: url(http://yoursite.com/yourimage.png);
#menu {
position: relative;
width: 100px;
height: 24px;
line-height: 24px;
color: white;
background-color: peru;
border: 1px solid peru;
border-radius: 2px;
padding-left: 24px;
}
#menu:before {
position: absolute;
content: '';
height: 40px;
width: 40px;
top: -9px; /* (height of parent - height of pseudo) / 2 - border-top of parent for vertical mid */
/* top: -17px; (height of parent - height of pseudo) - border-top of parent for bottom align */
left: -24px; /* some value less than width - depends on amount of overlap needed */
border: 1px solid transparent;
background-image: url(http://lorempixel.com/40/40/people/1);
background-color: peru;
border-radius: 50%;
}
/* Just for demo */
* {
font-family: Calibri;
letter-spacing: 2px;
}
#menu {
margin: 25px;
}
<div id='menu'>Menu Text</div>
Note: This is in essence a different version of the answer posted by Jason Gennaro. If you need support for IE lower versions, use his answer because they don't support :before.
Here's a quick and dirty version:
HTML
<div id="circle"></div>
<div id="rectangle">Header Text</div>
CSS
#circle{
border-radius: 50%;
width: 85px;
height: 85px;
background: brown;
float:left;
}
#rectangle{
width:300px;
height:40px;
background:brown;
color:white;
float:left;
margin-top:20px;
margin-left:-40px;
position:relative;
z-index:-1;
padding-left:60px;
padding-top:6px;
font-family:arial;
font-size:2em;
}
DEMO
http://jsfiddle.net/H6Lkk/
Explanation
use border-radius:50% and any width to create a circle.
float the two divs to allow for the overlap
use position and z-index to place the rectangle under the circle
add the logo image as necessary in the #circle
On my website http://goo.gl/ok43H I'd like to add the small "+" icon next to each white text box (I made a mockup of what i'm trying to achieve here: http://goo.gl/ftRpZ ) but I have no idea how to do that.
What would be your suggestions?
Many thanks,
Here is the html code:
<div class="presentation-plusbox">
<p>Expertise dans l'industrie</p>
<p>blblablabla</p>
<p>blabla</p>
</div>
and here is the css code:
.presentation-plusbox
{
width: 500px;
background-color:#FFFFFF;
padding:10px;
margin-left:25%;
color:#000000;
margin-bottom:8px;
opacity:0.95;
filter:alpha(opacity=95); /* For IE8 and earlier */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
You can use the :before - http://jsfiddle.net/fgRRw/
div:before {
content: "+";
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
background: orange;
color: #fff;
display: block;
left: -30px;
position: absolute;
}
Just a note - :before is not supported in IE7 and below LINK
Define your + box as a div inside of .presentation-plusbox
Also add position: relative to .presentation-plusbox
Then apply the following css to the plus box
.plusBox {
position: absolute;
top: 20px;
left: -50px;
}
Of course, you'll need to adjust top and left to get it just right.
I haven't tried it, but that should work.
p { position: relative; }
p:after {
height: 20px;
width: 20px;
background-image: url('image.url.goes.here.jpg');
position: absolute;
top: 5px;
left: -20px;
}
I have a link, with which i want use plus, which will change color on hover.
But in the past hour i cant figure out how to do this trick with spites.
Here is a link, nothing special
Find Out More!
My css code
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
padding-left: 25px;
}
.block a.plus:hover{
/*Just for example*/
background-position: -15px -1px;
}
And also plus img
CSS sprites are often vertical arranged, since this will enable you to display only a specific line in your sprite file. In order to use the sprite technique on horizontal arranged images you have to create a second element with a non-transparent background:
<a href="detailed.html" class="plus">
<span>Find Out More!</span>
</a>
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
display: inline-block;
padding-left: 16px; /* actual width of one icon */
}
.block a.plus:hover{
/*Just for example*/
background-position: 0 -16px;
}
.block a.plus span{
background-color: #fff;
}
If you don't want to use a second element you should rearrange your icons.
You can achieve this with the :before selector.
Find Out More!
a.plus {
position: relative;
padding-left: 25px;
}
a.plus:before {
position: absolute;
left: 0;
content: " ";
width: 15px;
height: 15px;
background: red url("images/plus.png") 10px 0 no-repeat;
}
The color red is just for testing, you can leave that one out. -10px 0 is the location of the image in the sprite (x y).