I am trying to locate an SVG to have a look like this:
And I want to do it by having a ::before or ::after pseudo-elements. But I can't because the SVG is too big and its first location is far from the borders of the parent element.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>A modern <span>publishing platform</span> </h1>
<p>Grow your audience and build your online brand</p>
<div class="buttons">
<button class="btn ">Start for Free</button>
<button class="btn border ">Learn More</button>
</div>
</header>
</body>
</html>
*{
box-sizing: border-box;
}
html{
font-size: 10px;
}
body{
margin: 0;
padding: 0;
font-family: Poppins;
position: relative;
}
header{
width: 100%;
padding:2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
color: white;
border-bottom-left-radius: 12rem;
position: relative;
z-index: -1;
background-image: linear-gradient(to right,
hsl(13, 100%, 72%),
hsl(353, 100%, 62%));
h1{
margin-top: 10rem;
width: 100%;
font-size: 2.7rem;
span{
display:block;
}
}
p{
font-size: 1.7rem;
font-weight: 100;
}
.buttons{
display: flex;
align-items: center;
justify-content: flex-end;
.btn{
padding: 1rem 2rem;
background-color: white;
border-radius: 3rem;
border: none;
margin: 0px 1rem;
font-style: 400;
font-family: Poppins;
border: .1rem solid white;
}
.border{
background-color: transparent;
color: white;
}
margin-bottom: 10rem;
}
}
header::before{
content: url(images/bg-pattern-intro.svg);
position: absolute;
transform: scale(.1);
}
Can anyone tell me what to do? And why doesn’t the .svg locate itself close to the border of its parent in the first place?
You need to set a width and a height to your pseudo-element. As-is, it's basically an empty in-line element with no actual content to prop it open, so it appears to be invisible. If you inspect in chrome, you'll see at least one of its dimensions is 0.
In this case, I'd also make the pseudo-element display: block so it behaves more like a div.
It appears that when you set the svg image url as the content value then the default behavior is to fill the available container.
Here's a working example:
header::before {
content: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg);
width: 50px;
height: 50px;
position: absolute;
display: block;
}
<header></header>
Another option is to set the svg as a background-image. You'll probably also want to set a background-size value (in this case, contain) so that the background image scales based on its container instead of the svg file's inherent viewBox attribute.
header::before {
content: "";
background: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg) center center / contain no-repeat;
width: 50px;
height: 50px;
position: absolute;
display: block;
}
<header></header>
Related
I have been trying to set the .flex-container to cover entire page below the horizontal rule, but when I resize the window, in around 1200px width, the flex box container is not going all the way down. I am fine with the buttons coming as a column when viewing on a small screen, as already happening.
what I want to happen
body {
background-color: #06283D;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
.heading {
color: #1894E7;
display: flex;
justify-content: center;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 3.6em;
margin: 5%;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
position: relative;
left: 0;
right: 0;
}
.flex-container>button {
background-color: #DFF6FF;
width: 350px;
margin: 6%;
text-align: center;
line-height: 75px;
font-size: 30px;
border-radius: 10px;
cursor: pointer;
border: none;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
transition-duration:0.3s;
}
.flex-container>button:hover {
transform: translateY(-5px);
transition-duration:0.3s;
box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}
#media screen and (max-width: 1086px){
.flex-container>button{
margin: 7%;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Papers</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600&family=Roboto:wght#300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="public/css/styles.css">
</head>
<body>
<div class="heading">
<h1>Loren ipsum</h1>
</div>
<hr style="margin:0;position: relative;left:-15px;width:100%;height:0.5px;border-width:0;color:gray;background-color:black;opacity:0.5">
<div class="flex-container">
<button>1Year</button>
<button>2Year</button>
<button>3Year</button>
<button>4Year</button>
</div>
</body>
</html>
If you make the styling of the flex-container:
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
Then it will certainly cover the whole page.
I'm not sure I understand the point of using position: absolute, so if that's not requisite, you get rid of position:absolute and instead change it to height: 100vh, it'll stretch to be equal to the vertical height of the viewport. If 100vh is too tall, you can change it accordingly.
Another option would be to give the body a dynamic height like 100vh (which will force the entire page to be exactly the height of the viewport) and add overflow:hidden to the body. Note, in this scenario if any of the buttons wrap and force the parent div to be any larger, you won't be able to scroll to them.
A final option would be to wrap the whole thing in a wrapper div and then make that div display: flex; see here: https://jsfiddle.net/slingtruchoice/jc03nft2/
Position absolute can be really annoying to work with, in my humble opinion. I avoid it when possible, simply because it affects the way other elements (siblings in particular, ie divs that come after your .flex-container div) interact with it. The use cases for position: absolute would be if you're trying to overlay an object on top of another object, or move it to a non-standard position within a parent container. If you look at the jsfiddle link at the bottom, i've included an example of ways to use position:absolute at the top.
body {
background-color: #06283D;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
.heading {
color: #1894E7;
display: flex;
justify-content: center;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 3.6em;
margin: 5%;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
height: 100vh; /* here's the change*/
}
.flex-container>button {
background-color: #DFF6FF;
width: 350px;
margin: 6%;
text-align: center;
line-height: 75px;
font-size: 30px;
border-radius: 10px;
cursor: pointer;
border: none;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
transition-duration: 0.3s;
}
.flex-container>button:hover {
transform: translateY(-5px);
transition-duration: 0.3s;
box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}
#media screen and (max-width: 1086px) {
.flex-container>button {
margin: 7%;
}
}
<div class="heading">
<h1>Hello World!</h1>
</div>
<div class="flex-container">
<button>Click Me!</button>
<button>Click Me!</button>
<button>Click Me!</button>
<button>Click Me!</button>
</div>
https://jsfiddle.net/slingtruchoice/56e0sj4k/
when trying to add a <div> inside another it results in the main container to be pushed down and equal amount to the added <div>. I can fix the issue by setting the position of the added to absolute but I am trying to understand which attribute is causing this behavior.
https://imgur.com/t9Q0ocm
for example Adding the red <div> inside the purple <div> caused the purple <div> to be pushed down
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Blue</title>
</head>
<body>
<aside class="side-menu"></aside>
<main class="main-content">
<div class="c-content">
<div class="c-content-text">
</div>
</div>
<div class="r-content">
<div class="r-content-text">
</div>
</div>
<div class="video-container"></div>
</main>
</body>
</html>
CSS
html {
font-family: Roboto, san serif;
font-size: 16px;
font-weight: normal;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-size: 3.125rem;
line-height: 3.6875rem;
text-transform: uppercase;
color: #ffffff;
}
p {
font-size: 1rem;
font-family: Roboto;
color: #ffffff;
font-size: 16px;
line-height: 24px;
}
body {
background-color: #1458e4;
font-size: 0;
margin: 0;
padding: 0;
}
.side-menu {
width: 5%;
height: 100vh;
/* background-color: coral; */
position: sticky;
display: inline-block;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.main-content {
background-color: cyan;
display: inline-block;
width: 95%;
}
.c-content {
background-color: rgb(184, 11, 184);
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
width: 67%;
height: 100vh;
}
.r-content {
display: inline-block;
background-color: darkkhaki;
width: 33%;
height: 100vh;
padding: 25.4375rem 4.6875rem 19.1875rem 3.375rem;
}
.video-container {
background-color: lemonchiffon;
height: 68vh;
}
.c-content-text {
display: inline-block;
/* position: absolute; */
background-color: tomato;
width: 500px;
height: 500px;
}
.r-content-text {
background-color: turquoise;
width: 500px;
height: 500px;
}```
Remove display: inline-block in class c-content-text should also solved your issue.
I think this thread answer's your question Inline-block element height issue
AFAIK, the inline-block has relation with font-size and line-height, and you set the body to 0px, which makes lots of the issues hard to describe. E.g. Try to remove the font-size: 0px; from the body. And no matter you remove ('inline' or add absolute), the behavior is the same. Althought the page is still looks not good.
Last, i would suggest you to try the grid layout for your layout design, your scenario should be easy to implement with grid layout.
I've been attempting to get multiple buttons to align vertically and horizontally next to each other in the center of the page. This is what I am aiming for: aligned buttons
However, I have only either gotten the images to center, but then they are not horizontally aligned. Or, I have gotten them to align horizontally, but they are not centered. Here is the code I am using on the buttons.
//used to remove the transition item so that the image changes. This is necessary to show image transition on load.
$(".hoverImage").removeClass("transitionHoverImage")
//sets welcome text opacity to 0 so it can be faded in
$('.welcomeText').css("opacity", 0);
//wait a second before attempting to fade text in. Second parameter of "fadeTo" sets opacity to 1 (100%)
$('.welcomeText').delay(1400).fadeTo(800, 1);
$('.portfolioBtn').css("opacity", 0);
$('.portfolioBtn').delay(1400).fadeTo(800, 1);
$('.resumeBtn').css("opacity", 0);
$('.resumeBtn').delay(1400).fadeTo(800, 1);
body {
font-family: Oswald, Baloo, Calibri, sans-serif;
background: black url(../images/background.jpg) no-repeat center;
height: 3600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.about {
display: block;
text-align: center;
background-color: #ffffff rgba(255, 255, 255, 0.5);
position: relative;
width: 904px;
padding: 33px 27px 34px;
z-index: 1;
}
.logo {
position: fixed;
left: .25em;
top: 3%;
height: 210px;
width: 150px;
z-index: 1;
}
/* you want to set up a transform, translate for this transform: translate (0, -100px); and */
.hoverImage {
position: relative;
z-index: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.transitionHoverImage {
transform: translate(0px, 200px);
}
.door {
transition: transform 1.5s ease-out;
}
.welcomeText {
position: relative;
top: 120px;
z-index: 1;
font-size: 7em;
color: white;
text-align: center;
}
.centerBtns {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -700px;
text-align: center;
width: 15%;
margin: 0 auto;
font-size: 2em;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
padding: 1.5em 2.8em;
z-index: 2;
}
.resumeBtn {
}
.portfolioBtn {}
/* why is this so finnicky?!?!?!?!?!?!?!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!???????????
/* dropdown menu code starts here */
/*this is the code for the revealed box and the dropshadow of box */
.dropdown-content {
display: none;
position: fixed;
right: 2em;
top:3%;
background-color:#343434;
min-width: 1em;
border-radius: 1em;
box-shadow: .25em 0em .5em #343434;
padding: 0em;
z-index: 1;
}
/* this is the highlight color when you hover over an item */
.dropdown-content a:hover {
background-color: dimgray;
}
/*w3 said I needed this code, so I put it in */
.dropdown:hover .dropdown-content{
display:block;
}
/*revealed dropdown style */
.dropdown-content a {
color: lightgray;
border-radius: 6px;
border-style: solid;
border-color: #343434;
background-color: #343434;
font-weight: bold;
text-align: center;
padding: .5em;
text-decoration: none;
display: block;
}
/*menu button for dropdown*/
.menu-button {
position: fixed;
right: 2em;
top:3%;
font-weight: bold;
font-size: 1em;
color: lightgray;
padding: 1em;
background-color: #343434;
border-color: #343434;
border-style: solid;
border-width: 2px;
border-radius: 6px;
z-index: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- favicon links-->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<title>DenneyDesign</title>
<!-- CSS Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<ling href="css/animate.css" rel="stylesheet">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Baloo|Oswald" rel="stylesheet">
</head>
<body>
<!--Menu Bar-->
<div class="dropdown">
<button class="menu-button">MENU</button>
<div class="dropdown-content">
HOME
ABOUT
ARTWORK
RESUME
SOCIAL
</div>
</div>
<!--Logo-->
<div>
<img class ="logo" src="images/logo.png">
</div>
<!--Welcome Text-->
<div>
<header>
<h1 class='welcomeText'>WELCOME</h1>
</header>
<!--Hover Image-->
<img class="door hoverImage transitionHoverImage" src="images/door_slider.png">
</div>
<!--Buttons-->
<div>
<button class="centerBtns"><b>PORTFOLIO</b></button><button class="centerBtns resumeBtn"><b>RESUME</b></button>
</div>
<!--About-->
<div>
<header>
<h1><a name="about">ABOUT</a></h1>
</header>
</div>
</body>
<!--javascript-->
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</html>
Thanks for your help!
Flexbox does this easily. Use display: flex; justify-content: center; align-items: center; on the parent.
div {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
background: black;
}
<div>
<button>button</button>
<button>button</button>
</div>
Using flexbox is indeed the simplest solution, but just in case I re-arranged your CSS:
.centerBtns {
position: relative;
text-align: center;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
z-index: 2;
width: 40%;
font-size: 1.5em;
padding: 1.5em;
line-height: 3em;
}
<div>
<button class="centerBtns"><b>PORTFOLIO</button><button class="centerBtns resumeBtn">RESUME</b></button>
</div>
If you want both buttons to have the same width make sure the width % is large enough to contain the text. Or if not just remove the width property and tweak around with the last 3 properties to get the results you want.
There are some issues with the code you've provided, and I believe that may be making it difficult to isolate the problem.
A stripped down version of what you posted shows how this can be achieved with a combination of relative positioning and flexbox.
body {
height: 100vh;
background-size: auto auto;
background-color: red;
position: relative;
}
.nav {
border: solid 1px blue;
background: rgba(0,0,255,0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 750px;
display: flex;
align-items: center;
justify-content: center;
}
.nav__button {
font-size: 44px;
margin: 50px;
width: 250px;
padding: 30px 0;
}
<div class="nav">
<button class="nav__button">Portfolio</button>
<button class="nav__button">Resume</button>
</div>
Plunker mirror of the above here: http://plnkr.co/edit/LwJyRFFpSE9dj4KtCuw6
You can use FlexBox. If you have a few buttons, you can set the "justify-content" property as "center", and set a margin to each button. On the other hand, if you have many buttons, you can set the "justify-content" as "space-around", and remove the margin.
https://jsfiddle.net/pablodarde/nhxukt5c/
HTML
<div class='buttons'>
<button>
<b>PORTFOLIO</b>
</button>
<button>
<b>RESUME</b>
</button>
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.buttons button {
display: inline-flex;
margin: 5px;
}
tl;dr - How can I center the blue div found in the third image in the white space, not the page?
I've been experiencing quite the headache recently. I've created a website with two distinct columns, but, is achieved with only one div element. This can be seen below.
It's pretty obvious from the picture that the first column is to be regarded as a sidebar, and hence, has the class .sidebar. .sidebar has a fixed width property of 400px. The rest of the page is simply the rest of the div with the class .container, which extends to 100% on both its width and height
properties. As I would image this is hard to image from just reading this text, I've found a way to illustrate how the page is setup.
Gray is the html element.
White is the body element.
The aqua on white is the div with the class .container.
The following aqua is the div with the class .sidebar.
Let's now insert the div that's giving me issues.
As you can see, a single blue div has been added. This has the class .test, and which simply sets the width, height, and margin properties. As you can now see, when the margin is set to 0 auto, the div is centered to the window and not the white space. Obviously this is the expected action.
The issue I'm facing is that I have no idea how I can center the blue div in the white space. I'm not sure how I would create anything the exact width of the white space, and hence, don't know how margin: 0 auto would be any use. How would I center my test element in the white space? Can this be achieved through CSS and HTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome.</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Raleway' rel='stylesheet' type='text/css'>
<link href="https://www.codekaufman.com/assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="https://www.codekaufman.com/assets/css/alerts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="banner-alert">Please excuse the mess. I'm currently working to improve the site. Thanks.
</div>
<div class="container">
<div class="side-bar">
<div class="temp-logo"></div>
<ul class="nav">
<li class="nav-button-disabled">About</li>
<li class="nav-button-disabled">GitHub</li>
<li class="nav-button-disabled">Contact</li>
</ul>
<div class="emphasis-button-disabled">Support</div>
<div class="legal">Copyright © 2015 Jeffrey Kaufman. All Rights Reserved.</div>
</div>
<div class="test"></div>
</div>
</body>
</html>
#charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
color: #000;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
.container {
height: 100%;
}
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: #EEE;
}
.temp-logo {
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 150px;
background: #000;
}
.nav {
width: 200px;
margin: 0 auto;
margin-top: 75px;
list-style-type: none;
}
.nav-button {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: pointer;
transition: 0.5s;
}
.nav-button:hover {
margin-left: 20px;
}
.nav-button-disabled {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: default;
color: #AAA;
}
.nav-category {
margin-top: 40px;
margin-bottom: 20px;
font-size: 2em;
cursor: default;
border-bottom: 1px #000 solid;
}
.emphasis-button {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
color: #C30;
transition: 0.4s;
cursor: pointer;
}
.emphasis-button-enabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
transition: 0.4s;
cursor: pointer;
color: #EEE;
background: #C30;
}
.emphasis-button-disabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
line-height: 45px;
left: 138px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #AAA;
color: #AAA;
cursor: default;
}
.emphasis-button:hover {
color: #EEE;
background: #C30;
}
.legal {
font-family: 'Open Sans', sans-serif;
position: absolute;
font-size: 0.85em;
text-align: center;
width: 400px;
height: 20px;
left: 0;
bottom: 20px;
}
.test {
width: 600px;
height: 200%;
background: blue;
margin: 0 auto;
}
Wrap it in another element with position=absolute, a right, top and bottom value of 0 and a left value of 400px:
<div style="position:absolute;right:0;top:0;bottom:0;left:400px;">
<div class="test"></div>
</div>
Your side bar already have position fixed, so please add padding left to your container it will work
.container {
height: 100%;
padding-left: 400px; /*width of your .sidebar*/
}
try changing the width for a percentage and adding a new div that covers the rest of the white space so you can center the blue element on that new div.
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 20%;
height: 100%;
background: #EEE;
}
.new-div{width:80%;float:left;}
Set the test inside the new div
<div class="new-div"><div class="test"></div></div>
Is there a CSS property to invert the font-color depending on the background-color like this picture?
There is a CSS property called mix-blend-mode, but it's not supported by IE. I recommend using pseudo elements. If you like to support IE6 and IE7 you can also use two DIVs instead of pseudo elements.
.inverted-bar {
position: relative;
}
.inverted-bar:before,
.inverted-bar:after {
padding: 10px 0;
text-indent: 10px;
position: absolute;
white-space: nowrap;
overflow: hidden;
content: attr(data-content);
}
.inverted-bar:before {
background-color: aqua;
color: red;
width: 100%;
}
.inverted-bar:after {
background-color: red;
color: aqua;
width: 20%;
}
<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>
Use mix-blend-mode.
http://jsfiddle.net/1uubdtz6/
div {
position:absolute;
height:200px
}
/* A white bottom layer */
#whitebg {
background: white;
width:400px;
z-index:1
}
/* A black layer on top of the white bottom layer */
#blackbg {
background: black;
width:100px;
z-index:2
}
/* Some white text on top with blend-mode set to 'difference' */
span {
position:absolute;
font-family: Arial, Helvetica;
font-size: 100px;
mix-blend-mode: difference;
color: white;
z-index: 3
}
/* A red DIV over the scene with the blend-mode set to 'screen' */
#makered {
background-color: red;
mix-blend-mode: screen;
width:400px;
z-index:4
}
<div id="whitebg"></div>
<div id="blackbg"></div>
<div id="makered"></div>
<span>test</span>
I know this is an old question, but I wanted to add another solution I've been using before I learned of mix-blend-mode.
The idea is to have the information duplicated in two layers, a back and a front, where the back and front have different background and text colors. These are identical in dimension and text. In between, I use a clipping box div to crop the front (top) layer to the desired width, showing the front layer where it is not clipped, and revealing the back layer outside of the clipping window.
This is similar to the "Two div" solution in the accepted answer, but uses the extra clipping box. What's advantageous in this solution is the easy centering of text if desired, and simple, direct selection of the colors.
HTML:
<div class='progress' id='back'>
<span></span>
<div class='progress' id='boundbox'>
<div class='progress' id='front'>
</div>
</div>
</div>
CSS:
.progress {
display: block;
margin: 0;
/* Choose desired padding/height in coordination with font size */
padding: 10px;
height: 28px;
}
#back {
position: relative;
/* Choose a border to your liking, or none */
border: 1px solid lightgray;
/* Choose your desired text attributes */
text-align: center;
font-family: Calibri, "Sans Serif";
font-size: 16pt;
/* Set the desired width of the whole progress bar */
width: 75%;
/* Choose the desired background and text color */
background-color: white;
color: black;
}
#front {
position: absolute;
left: 0;
top: 0;
/* Choose the desired background and text colors */
background-color: navy;
color: white;
}
#boundbox {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
I use jQuery to programmatically set the percent progress and make sure that the width of the front matches that of the back, and that they have the identical text. This can also easily be done with pure Javascript.
// Set *front* width to *back* width
// Do this after DOM is ready
$('#front').width($('#back').width())
// Based upon an event that determines a content change
// you can set the text as in the below example
percent_complete = 45 // obtain this value from somewhere; 45 is just a test
$('#front').text(percent_complete.toString() + '% complete')
$('#back span').text($('#front').text())
bb_width = (percent_complete * $('#back').width())/100
$('#boundbox').css('width', bb_width.toString())
And here's a fiddle: Progress bar.
I tested this in Chrome, Firefox, Microsoft Edge, and IE version 11.
I've seen that this is quite an old question, but having found myself with the same problem I came up with a solution that uses only CSS but requires using the same text 3 times in 3 separate divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: fit-content;
padding: 1rem;
border: 1px solid black;
position: relative;
color: white; /* Hide the first text */
}
.container .bellow, .container .above {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container .bellow span, .container .above span {
position: relative;
top: 1rem; /* Same as padding */
left: 1rem; /* Same as padding */
}
.container .bellow {
color: black; /* The text as seen normally */
}
.container .above {
color: white; /* Text color when background slides in*/
overflow: hidden;
white-space: nowrap;
background-color: red;
width: 0; /* width: 50%; --> See the effect*/
transition: width 5s;
}
.container:hover .above {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
Input text (hover)
<div class="bellow">
<span>Input text (hover)</span>
</div>
<div class="above">
<span>Input text (hover)</span>
</div>
</div>
</body>
</html>
I think this is more simple to understand.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.titulo{
text-align: center;
margin: 2em;
}
.padre{
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10em;
position: relative;
width: 1000px;
height: 500px;
}
.caja-1{
background-color: black;
width: 500px;
height: 500px;
left: 0;
mix-blend-mode: screen;
position:absolute;
}
.caja-3{
width: 500px;
height: 500px;
display: flex;
background-color: white;
position: absolute;
right: 0;
}
.texto{
font-size: 5em;
color: white;
mix-blend-mode: difference;
position:absolute;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ESTILOS CONTRASTADOS CSS3</title>
</head>
<body>
<h1 class="titulo">MIX-BLEND-MODE CSS EFFECT</h1>
<div class="padre">
<div class="caja-1"></div>
<div class="caja-3"></div>
<h1 class="texto">CODE STOCK CENTER</h1>
</div>
</body>
</html>