I'm getting a weird result in IE11 (surprise) with a background image fade.
I have this for my CSS:
.parent {
position: relative;
min-height: 400px;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
-ms-flex-pack: center;
-ms-flex-align: center;
color: #fff;
z-index: 0;
margin-top: 100px;
}
.parent::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 50%;
bottom: 0;
background: -webkit-linear-gradient(transparent, #FFF) left repeat;
background: linear-gradient(transparent, #FFF) left repeat;
min-height: inherit;
}
But when I check it out in IE11 it sorta works but I'm getting this hard line down the image:
Not sure what I'm missing?
Related
I trying to create this two corner cut div, one is filled , another is border, both with shadow.
However I facing an issue, which is for border shape corner, I unable to create border with corner cut.
I appreciate with any other idea to create this kind of filled shape and border shape.
.buttongroup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.buttongroup .gap {
width: 30px;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.neonbutton {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: 100%;
position: relative;
}
.neonbutton .l {
width: 100%;
height: auto;
background-color: #37E8FC;
}
.neonbutton .r {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
width: 30px;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.neonbutton .corner {
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 0 30px;
border-color: transparent transparent transparent #37E8FC;
}
.neonbutton .square {
height: 30px;
width: 30px;
background-color: #37E8FC;
}
.neonbutton .value {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
color: #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 17px;
font-weight: bold;
}
.neonbutton.outline .l {
background-color: transparent;
border: 2px solid #37E8FC;
border-right: none;
}
.neonbutton.outline .corner {
background-color: transparent;
}
.neonbutton.outline .square {
background-color: transparent;
border-right: 2px solid #37E8FC;
border-bottom: 2px solid #37E8FC;
}
<div class="buttongroup">
<div class="neonbutton">
<div class="l"></div>
<div class="r">
<div class="corner"></div>
<div class="square"></div>
</div>
<div class="value">Lorem</div>
</div>
<div class="gap"></div>
<div class="neonbutton outline">
<div class="l"></div>
<div class="r">
<div class="corner"></div>
<div class="line"></div>
<div class="square"></div>
</div>
<div class="value">Lorem</div>
</div>
</div>
I would do the first one like below:
.box {
--c:20px; /* control the cut */
font-size: 25px;
padding: 10px 30px;
display: inline-block;
position: relative;
z-index: 0;
filter: drop-shadow(0 0 5px #37E8FC)
}
.box:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: #37E8FC;
clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
}
body {
background: #000;
}
<div class="box">some text</div>
And the second one:
.box {
--b:5px; /* control the border */
--c:20px; /* control the cut */
font-size: 25px;
padding: 10px 30px;
display: inline-block;
position: relative;
color:#fff;
z-index: 0;
filter: drop-shadow(0 0 5px #37E8FC)
}
.box:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: linear-gradient(to bottom left, #37E8FC 50%,#0000 50.5%) 100% 0/calc(var(--c) - 0.3*var(--b)) calc(var(--c) - 0.3*var(--b)) no-repeat;
border:var(--b) solid #37E8FC;
clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
}
body {
background: #000;
}
<div class="box">some text</div>
This is what my background currently looks like with the following CSS and background attachement fixed applied
/* APPLY SECTION */
section.apply {
height: 55rem;
width: 100%;
background: url("../img/apply.jpg") no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
position: relative;
}
.apply::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.apply * {
position: relative;
z-index: 10;
}
.apply .apply-content {
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.apply .apply-content h2 {
max-width: 30rem;
font-size: 3.2rem;
color: #fff;
font-weight: 300;
text-align: center;
}
This is with background-attachement fixed removed
How do I add background attachment fixed and be able to center the background using background-position, size, and repeat?
section.apply {
height: 55rem;
width: 100%;
background: url("../img/apply.jpg") no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
position: relative;
background-position-y:10px
}
try using this
I have set below code for background image on empty div but it is not responsive. I don't want to set fixed height. is there any other way to do so?
.flexslider .slides .page-hero {
background-position: 50% 0%;
background-image: url('https://simu.danoneactivia.co.uk/sites/EN_UK/files/carousel/final-Frontpage-Activia-banner.jpg');
}
.front .page-hero {
overflow-y: visible;
}
.page-hero {
background-color: #008b3c;
}
.page-hero {
height: 535px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-size: cover;
background-repeat: no-repeat;
color: #fff;
text-align: center;
position: relative;
margin-bottom: 3em;
}
I'm trying to achieve a design close to the snippet here. My problem is that I can't find a way to replace the blue background of .title by a simple transparency (so that the container's background stays visible). If I simply remove the blue background, the border becomes visible where .title is.
Also the "title" is generated by JS so I can't reliably predict the length of div as it may slightly vary depending on the situation.
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
.zone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 20px 0;
text-align: center;
}
.title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.title span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
height: 20px;
color: hsla(200, 70%, 20%, 1);
cursor: default;
background: hsla(200, 70%, 55%, 1);
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 30px 20px 30px;
width: 200px;
border: 0.1rem solid hsla(200, 70%, 20%, 1);
border-radius: 0rem;
margin-top: 10px;
}
<div class="container">
<div class="zone">
<div class="title">
<span>Text Title</span>
</div>
<div class="content"></div>
</div>
</div>
Does anyone have an idea how to achieve what I'm trying to do ? Please let me know if my explanation is too brief or unclear.
Thank you !
You can achieve that with pseudo elements. Take a look at this:
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
.zone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 20px 0;
text-align: center;
}
.title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.title span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
height: 20px;
color: hsla(200, 70%, 20%, 1);
cursor: default;
}
.title span::before,
.title span::after{
content: "";
height: 2px;
position: absolute;
background: hsla(200, 70%, 20%, 1);
width: calc(50% - 40px);
top: 9px;
}
.title span::before{
left: 0;
}
.title span::after{
right: 0;
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 30px 20px 30px;
width: 200px;
border-right: 0.1rem solid hsla(200, 70%, 20%, 1);
border-left: 0.1rem solid hsla(200, 70%, 20%, 1);
border-bottom: 0.1rem solid hsla(200, 70%, 20%, 1);
border-radius: 0rem;
margin-top: 10px;
}
<div class="container">
<div class="zone">
<div class="title">
<span>Text Title</span>
</div>
<div class="content"></div>
</div>
</div>
You could try to use a fieldset with a legend instead of a div:
https://jsfiddle.net/v9p60p6g/1/
<html>
<head>
<style>
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
fieldset {
border: solid black 2px;
}
legend {
}
</style>
</head>
<body>
<div class="container">
<fieldset>
<legend>Testtitel</legend>
Content
</fieldset>
</div>
</body>
</html>
You can get the desired effect by adding more elements
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
.zone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 20px 0;
text-align: center;
}
.title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.title__text {
flex: 0 0 auto;
padding: 0 10px;
height: 20px;
color: hsla(200, 70%, 20%, 1);
cursor: default;
/* background: hsla(200, 70%, 55%, 1); */
}
.title__border {
flex: 1;
border-top: 0.1rem solid hsla(200, 70%, 20%, 1);
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 30px 20px 30px;
width: 200px;
border: 0.1rem solid hsla(200, 70%, 20%, 1);
border-top: 0.1rem solid transparent;
border-radius: 0rem;
margin-top: 10px;
}
<div class="container">
<div class="zone">
<div class="title">
<span class='title__border'></span>
<span class='title__text'>Text Title</span>
<span class='title__border'></span>
</div>
<div class="content"></div>
</div>
</div>
And don't use selectors like .title span. They do not target specific element and styles used by them cannot be reused somewhere else, which means excessive code duplication. Element selectors (like .title span) are also likely to cause problems (you are selecting all spans in .title element) whenever you change your code (adding another span with different styles is hard), which means even more duplicated code! Duplicated code = more complex code = code that is harder to maintain!
You should get BEM or SMACSS or any other methodology (you may even create your own).
I have a block element with a background image. I am attempting to:
Add a transparent gradient overlay on top of a background image
Center another block element using flexbox,
I have already achieved both of these independently of each other, see the CodePen as well as the images and code below.
Using the transparent overlay (with the child block HTML removed):
Centering the child block (with the overlay CSS removed):
However when I try and combine the effects, the flexbox stops working and the overlay is missing around the child block
Here is my HTML
<div class="container">
<p>title goes here</p>
</div>
Here is my CSS:
.container {
background: url("http://msue.anr.msu.edu/uploads/images/forest.jpg");
height: 400px;
width: 100%;
box-shadow: inset 0px -4px 14px 0px rgba(50, 50, 50, 0.71);
background-size: 100% auto;
z-index: 0;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.container p {
display: block;
color: red;
text-align: center;
font-size: 24pt;
background-color: blue;
z-index: 2;
}
.container:after {
content: '';
background: linear-gradient(135deg, #dc4225, #292484);
width: 100%;
height: 100%;
opacity: 0.5;
top: 0;
left: 0;
display: block;
z-index: 1;
position: relative;
}
How can I get the semitransparent overlay overlay and the flexbox happening at the same time?
For .container:after, change position: relative to position: absolute.
Live, working example:
.container {
background: url("http://msue.anr.msu.edu/uploads/images/forest.jpg");
height: 400px;
width: 100%;
box-shadow: inset 0px -4px 14px 0px rgba(50, 50, 50, 0.71);
background-size: 100% auto;
z-index: 0;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.container p {
display: block;
color: red;
text-align: center;
font-size: 24pt;
background-color: blue;
z-index: 2;
}
.container:after {
content: '';
background: linear-gradient(135deg, #dc4225, #292484);
width: 100%;
height: 100%;
opacity: 0.5;
top: 0;
left: 0;
display: block;
z-index: 1;
position: absolute;
}
<div class="container">
<p>title goes here</p>
</div>
Codepen Version: http://codepen.io/anon/pen/gpqxoo
In case folks need to set position of the container to absolute like I do:
.container {
#include inline-flex;
#include flex-direction(column);
#include align-items(center);
#include justify-content(center);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
font-size: 16px;
height: 100%;
width: 100%;
position: absolute;
white-space: normal;
z-index: 1;
}
.container::after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.8);
z-index: -1;
}
The importance pieces here are rgba, and z-index. Background image of the container is set dynamically in code, but that isn't relevant here.