I've been wondering for a little while now what the best way to do this is. see this link for example: http://prntscr.com/48a54f
Basically if i have a full width website but i want to have 2 colors that are not just blocks but have this shape to them. also keeping in mind that the site would be responsive. I assume i can get around some smaller alignment issues with media queries but whats the best practice to use here? Is there a CSS3 transform option? (i dont need to worry too much about older browser support), my thinking is that if there is a css3 transform option that could be applied to a div or section tag then i could nest the content inside that in to half columns, something like this maybe?
<section class="backgroundStyle">
<div class="column-6">
<!-- some content -->
</div>
<div class="column-6">
<!-- some content -->
</div>
</section>
You can do it with an extra psuedo element and transform. Background image or gradient would probably be most efficient, however, this allows a little more control of each side if you need to adjust it.
#outer {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
#left {
width: 50%;
height: 100%;
background-color: #CCC;
}
#right {
width: 50%;
background-color: #333;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
#right:after {
content: "";
display: block;
width: 30%;
transform: rotation(50deg);
background-color: #333;
position: absolute;
left: -20%;
top: -5%;
height: 120%;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
<div id="outer">
<div id="left"></div>
<div id="right"></div>
</div>
http://jsfiddle.net/dHLHt/2/
Could do a CSS gradient:
http://jsfiddle.net/isherwood/28agr/
background: linear-gradient(135deg, rgba(186, 39, 55, 1) 0%, rgba(186, 39, 55, 1) 51%, rgba(239, 197, 202, 1) 51%, rgba(239, 197, 202, 1) 100%);
http://www.cssmatic.com/gradient-generator
Related
I've been trying to create a gray connector between div containers (image below) for a while now. The margin between the containers is set to 2.5vw per container on each side.
I've tried to create it using an .svg background on a :before pseudo element and positioning it, but I couldn't make it work. The gray connector should stay fixed in relation to the boxes until the boxes wrap (mobile version), in which case the connectors should be hidden. The mobile version is easy to setup, but when the elements are next to each other I'm finding it almost impossible to apply the gray connector to the elements. The connector should stay fixed in relation to the containers when transitioning between laptop screens and large desktop screens.
Here's the outcome I want:
Gray connector between boxes.
Here's the outcome I've got and the code I've used:
Outcome I've got.
.box-container:after{
content: '';
height: 700px;
width: 600px;
position: absolute;
background-image: url("folder_path/Connector-1.svg");
background-repeat: no-repeat;
background-position: -80px 60px;
background-overflow: visible !important;
z-index: 0 !important;
}
.box-container{
z-index: 1 !important;
}
Maybe I've been going at it the wrong way, all workarounds are welcome.
Here is one way to do it:
main {
width: 100%;
height: 100%;
position: relative;
}
section {
display: inline-block;
width: 100px;
height: 200px;
background: orange;
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}
section + section {
margin-left: 46px;
}
.connector {
position: absolute;
top: 0;
z-index: -1;
background: #444;
width: 100px;
height: 200px;
transform-origin: top left;
transform: skewX(36.87deg); /* do some trigonometry here to get the deg */
}
.connector:nth-of-type(2) {
left: 150px;
}
<main>
<section></section>
<section></section>
<section></section>
<div class="connector"></div>
<div class="connector"></div>
</main>
I figured out the solution! It's to create a pseudo-element, with a height of 100% and a width equal to the margin between the elements. To keep it responsive, it's important to use vw for the width unit, both for the margin between elements and also the width of the decoration itself. The margin of the <div>s are 2.5vw each, so setting the width of the pseudo element to 5 makes it fit perfectly. Heres the code:
.container:after{
content: '';
z-index:-1;
position: absolute;
top: 0;
right: -5vw;
width: 5vw;
height: 100%;
background-color: #444;
clip-path: polygon(0% 0%, 100% 40%, 100% 100%, 0% 60%);
}
I am trying to recreate this:
But I have not been able to do so. I tried with adding a :before on the img but that doesnt work. How would you go on about making this. It has to be responsive in the way that the background doesnt get bigger than the image.
SEO is not important so background-image or whatever is fine with me too.
WRITTEN IN SCSS - CHANGE IN HTML IS OK
UPDATED CODE TO ROB's ANSWER
This is the code I have so far
.imgbox {
padding: 5%;
position: relative;
height: auto;
.backdrop {
position: relative;
min-width: 100px;
min-height: 100px;
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
background: rgb(208, 0, 0);
background: linear-gradient(
90deg,
rgba(208, 0, 0, 1) 0%,
rgba(149, 0, 0, 1) 100%
);
}
transform: translateX(-5px) translateY(5px);
}
.img {
width: 100%;
height: auto;
transform: translateX(5px) translateY(-5px);
}
}
<div className="imgbox">
<div className="backdrop">
<div></div>
</div>
<img
className="img"
src={'https://source.unsplash.com/400x250'}
alt="test"
>
</div>
It's simple with a box shadow.
The paddings in the parent are there to prevent it from cropping the shadow.
.imgbox {
padding: 0 0 30px 30px;
}
.imgbox .img {
display: inline-block;
box-shadow: -30px 30px 0 rgb(208, 0, 0);
}
<div class="imgbox">
<img
class="img"
src='https://source.unsplash.com/400x250'
alt="test"
/>
</div>
Very easy to get the gradient with a pseudo-element:
.image-container::after {
content:'';
position: absolute;
z-index:-1;
bottom:-24px;
left:-24px;
width:100%;
height:100%;
background: linear-gradient(red, firebrick);
}
You can change the gradient and offset using background, left and bottom respectively. I'm not sure if there is a second gradient as well, to the top right? If so, you pair this with a ::before to get a second background, and play around the with z-index to get the ordering correct.
Just remember - for an absolute positioned pseudo element to work, you'll need to set position:relative on the parent container, and content:'';
Codepen here.
I can't seem to specify the color on the header for my website.
The code is here:
.header {
height: 95vh;
background-size: cover;
background-position: top;
position: relative;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
&__logo-box {
position: absolute;
top: 4rem;
left: 4rem;
z-index: 4;
}
&__logo {
height: 35px;
transform: scale(1.5);
z-index: 4;
}
&__text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 5;
}
}
.video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
object-fit: cover;
}
.gradient {
background: linear-gradient(
90deg,
rgba(30, 95, 156, 1) 1%,
rgba(16, 55, 130, 0.2637429971988795) 100%
);
z-index: 2;
min-width: 100%;
min-height: 100%;
height: calc(100vh - 80px);
object-fit: cover;
position: relative;
}
.hor-nav{
position: fixed;
top: 40px;
right: 40px;
height: 50px;
z-index: 20;
color: $color-white;
}
ul{
list-style-type: none;
color:$color-white;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.header-bg{
background-color:#2998ff;
}
<header class="header">
<div class="gradient">
</div>
<video autoplay muted loop class="video">
<source src="img/bg-video.mp4" type="video/mp4" />
</video>
<div class="header-bg">
<div class="header__logo-box">
<img src="http://logos.xmltv.se/en.tlc.discovery.dk.png" alt="logo" class="header__logo" />
</div>
<div class="hor-nav">
<ul>
<li>Home</li>
<li>About </li>
<li>Invest</li>
<li>Insights</li>
<li>Technology</li>
<li>Performance</li>
<li>Education</li>
</ul>
</div></div>
</header>
I want to put the background color of #2998ff; to my header The background needs to be placed behind the navigation and the logo.
I've tried putting it in one div .header-bg and it still dosen't seem to work the way I want it to work.
<div style="background-color:#2998ff;"></div>
You should try something like this
Sometimes style definitions can overlap others. Try using !important at the end of the background-color declaration.
There's a few things going on.
browser web tools
All of these can be expiremented and tested in real time by using right click -> inspect element, or open web dev tools. If you're doing anything with web developement, they are insanely useful. Learn how to use them.
Invalid CSS
& is not a valid operator in CSS. If you're using a pre-processor like LESS, you need to run it to output CSS the browser can understand.
&__logo-box {
position: absolute;
top: 4rem;
left: 4rem;
z-index: 4;
}
Which CSS Selector do you want?
If you want to select all <header> elements, you would use
header {
background-color: red;
}
If you want anyone with the class name header use:
.header {
background-color: red;
}
If you want only one specific element that has the ID of header, use:
#header {
background-color: red;
}
If you want any div that's a child of header:
header div {
background-color: red;
}
Search for "css tutorials" and the word "selectors" for more info.
css overwriting?
Sometimes style definitions can overlap others
It's not this case of overwiting this time. Check your webpage with browser's DOM inspector / web tools. The header background is being set if you use the header selector. Select the element you want, to see all of it's computed CSS properties.
There's overlapping divs with transparency, making it harder to tell. Set all elements to a solid background color, to see. You'll probably need to add padding or margin to see them. Otherwise, the header div covers your header.
Mentioned above inline CSS
You do not want inline CSS, like this:
<div style="background-color:#2998ff"></div>
That will increase filesize and makes it harder to mantain code. It's a lot more work to make any change. Instead, use the right combinations of selectors. You can use heirarchy (like the first <p> element inside a <header>), or by classes, or by Ids. You can use multiple css classes on a single element. (I can't tell from the markup what you are expecting. You're probably overcomplicating the layout.
I'm using bootstrap 3 as my grid framework along with css to create a semi-transparent area with one skewed/slanted edge, but am running into problems with my elements due to layered opacity.
The expectation is that the center is slanted, but the right side is still square.
Is there a better way to accomplish this?
Please see the jsfiddle for a working example.
<div class="container">
<div class="row marketing-text">
<div class="col-sm-6">
<!-- Intentionally empty, jsfiddle was giving me issues with the offset -->
</div>
<div class="col-sm-6 right">
<h5 class="uppercase">Header Text</h5>
<p>Long Text Input</p>
</div>
</div>
</div>
<style>
.row.marketing-text .right {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
background-color: rgba(255, 139, 0, 0.5);
}
.row.marketing-text .right::before {
content: " ";
transform-origin: top;
-ms-transform: skew(-20deg, 0deg);
-webkit-transform: skew(-20deg, 0deg);
transform: skew(-20deg, 0deg);
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(255, 139, 0, 0.5);
}
</style>
https://jsfiddle.net/aq9Laaew/255707/
Referring your example, Overlapping layers having background-color with opacity/rgba value will definitely not achieve the desired output.
Better way to accomplish this would be using :before and :after pseudo-elements
I want to achieve this using html and css:
I have tried to set the opacity of the container to 0.3 and the box to 1, but it doesn't work: both divs have 0.3 opacity.
jsFiddle of my try here
The effect I am trying to achive is a popup box that comes on top of the page. It is highlighted by fading the content below (by lowering the opacity).
You can use opacity in combination with background color, like this:
#container {
border: solid gold 1px;
width: 400px;
height: 200px;
background:rgba(56,255,255,0.1);
}
#box {
border: solid silver 1px;
margin: 10px;
width: 300px;
height: 100px;
background:rgba(205,206,255,0.1);
}
<div id="container">
containter text
<div id="box">
box text
</div>
</div>
Live demo
As far as I know you can't do it in a simple way. There a couple of options here:
Use absolute positioning to position box "inside" the container.
#container {
opacity: 0.3;
background-color: #777788;
position: absolute;
top: 100px;
left: 100px;
height: 150px;
width: 300px;
}
#box {
opacity: 1;
background-color: #ffffff;
position: absolute;
top: 110px;
left: 110px;
height: 130px;
width: 270px;
}
<div id="container"></div>
<div id="box">
<p>Something in here</p>
</div>
Use Javascript - almost the same as above, but position and size don't have to be hardcoded.
You can't apply an opacity property without affecting a child element!
"Opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another... If you do not want to apply opacity to child elements, use the background property instead." https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
If you want the opacity to be applied only to the background, without affecting the child elements, use:
background-color: rgba(255, 255, 255, .3)
However, you can achieve the desired effect if you place them inside a div parent element and use CSS position property:
.parent {
border: solid green 3px;
position: relative;
width: 400px;
height: 200px;
}
.sibling-one {
border: solid red 3px;
position: absolute;
box-sizing: border-box;
width: 400px;
height: 200px;
opacity: .3;
}
.sibling-two {
border: solid blue 1px;
margin: 10px;
width: 200px;
height: 100px;
position: absolute;
transform: translateY(50%);
}
<div class="parent">
<div class="sibling-one">
<p>A sibling's one element</p>
</div>
<div class="sibling-two">
<p>A sibling's two element</p>
</div>
</div>
Try using rgba as a 'pre content' overlay to your image, its a good way to keep things responsive and for none of the other elements to be effected.
header #inner_header_post_thumb {
background-position: center;
background-size: cover;
position: relative;
background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
border-bottom: 4px solid #222;
}
header #inner_header_post_thumb .dark_overlay {
position: relative;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
header #inner_header_post_thumb .dark_overlay .container .header-txt {
padding-top: 220px;
padding-bottom: 220px;
color: #ffffff;
text-align:center;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
font-size: 40px;
color: #ffffff;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
font-size: 24px;
color: #ffffff;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p {
font-size: 18px;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
font-weight: 700;
}
<header>
<div id="inner_header_post_thumb">
<div class="dark_overlay">
<div class="container">
<div class="row header-txt">
<div class="col-xs-12 col-sm-12">
<h1>Title On Dark A Underlay</h1>
<h3>Have a dark background image overlay without affecting other elements</h3>
<p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>
</div>
</div>
</div>
</div>
</div>
</header>
See a working codepen here
Using background-color: rgba(#777788, 0.3); instead of opacity could maybe fix the problem.
Apply this css rule
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
In addition to this, you have to declare background: transparent for IE web browsers.
For more details visit the following link:
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Any child of an element with opacity set will take on that opacity.
To achieve this style you could use rgba colours and filters for IE for the background, and opacity on the textual elements. So long as the second box isn't a child of one of the text elements, then it won't inherit the opacity.
Another workaround is to simply use an overlay background to create a similar effect.
I personally like a black overlay with about a 65% opacity, but for what you are trying to do you may want to use a white overlay at round 70%.
Create a small (100 x 100 or less) PNG in Photoshop or GIMP that has the color and opacity you want. Then just set that as the background of your light box.
If you create multiple PNGs at different opacities you can easily switch between them with JS or dynamically at load via backend scripting.
It's not technically what you are trying to do, but aesthetically it can give a very similar effect and UX wise accomplishes the same thing. It is also very easy to do, and widely supported across pretty much everything.
Opacity will always inherits by the child element regardless whatever the element in there, there is no workaround up to today have suggested, when the moving of the child element outside the transparency background is not an option like in a popup menu/dialog box creation, use of background with the rgba is the solution.
Here is a input box that i created that i can turn on or off with the class property invisible by javascript
<div id="blackout" class="invisible">
<div id="middlebox">
<p>Enter the field name: </p>
<input type="text" id="fieldvalue" />
<input type="button" value="OK" id="addfname" />
</div>
</div>
CSS
#blackout {
z-index: 9999;
background: rgba(200, 200, 200, 0.6);
height: 100%;
width: 100%;
display: block;
padding: 0px;
clear: both;
float: left;
position: absolute;
margin-top: -10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -10px;
}
#blackout #middlebox {
border: thick solid #333;
margin: 0px;
height: 150px;
width: 300px;
background-color: #FFF;
top: 50%;
left: 50%;
position: absolute;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 10px 50px 0px 50px;
}
#middlebox p {
float: left;
width:100%;
clear:both;
}
#middlebox input {
clear:both;
margin-bottom:10px;
}
#middlebox input[type=text]{
width:100%;
}
#middlebox input[type=button]{
float:right;
width:30%;
}
.invisible{
visibility:hidden !important;
}
Use such elements that you can add :before or :after. My solution
<div class="container">
<div>
Inside of container element is not effected by opacity.
</div>
</div>
Css.
.container{
position: relative;
}
.container::before{
content: '';
height: 100%;
width: 100%;
position: absolute;
background-color: #000000;
opacity: .25
}
This might not be the most orthodox method but you can use a small semi-transparent background image for each div / container that repeats. It does seem that in this day and age you should be able to achieve this in pure (simple not hackish) css with no js but as the answers above show it isn't that straight forward...
Using a tiled image might seem dated but will work no worries across all browsers.
You can add a container's sibling absolutely positioned behind container, with the same size, and apply opacity to it.
And use no background on your container.
Now container's children have no opaque parent and the problem vanishes.