background reverses border-radius - background

Why reverses a background property of a lower element the border-radius set on a higher element?
I have this HTML code:
<div class="wrapper">
<div class="content">
<div class="header">Title</div>
<div class="form"></div>
</div>
</div>
And this CSS code:
.wrapper {
background: none repeat scroll 0 0 #F8F8F8;
border-radius: 5px 5px 5px 5px;
height: 250px;
left: 100px;
overflow: visible;
position: absolute;
top: 10%;
width: 400px;
z-index: 10000
.header {
background: none repeat scroll 0 0 #222222;
border-top-left-radius: 5px;
box-shadow: 0 0 5px #444444;
position: relative;
z-index: 1;
}
}
The result is that there is no border-radius at the top, just at the bottom. If I remove the background property of the .headerclass the border-radius works on all four sides. What is the problem here?

You are nesting a selector inside other, which is wrong.
Try this.
.wrapper {
background: none repeat scroll 0 0 #F8F8F8;
border-radius: 5px 5px 5px 5px;
height: 250px;
left: 100px;
overflow: visible;
position: absolute;
top: 10%;
width: 400px;
z-index: 10000
}
.header {
background: none repeat scroll 0 0 #222222;
border-top-left-radius: 5px;
box-shadow: 0 0 5px #444444;
position: relative;
z-index: 1;
}
this must work,
and if you apply any background color on any of the child div then you have to explicitly set its corner radius..

Check this
http://jsfiddle.net/arunberti/LtRUu/
.wrapper {
background: none repeat scroll 0 0 red;
border-radius: 5px 5px 5px 5px;
height: 250px;
left: 100px;
overflow: visible;
position: absolute;
top: 10%;
width: 400px;
z-index: 10000;
color:red;
}
.header {
background: none repeat scroll 0 0 #222222;
border-top-left-radius: 5px;
box-shadow: 0 0 5px #444444;
position: relative;
z-index: 1;
}

Related

Safari linear gradient

I have a trouble using linear-gradient in Safari 15.2.
I wanna to create a block with fade effect at the end if children do not fit.
I have created an example: https://codepen.io/serejich/pen/xxXLvEG.
Code:
<div class="gradient-container">
<div class="elements">
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
<div class="gradient"></div>
</div>
* {
margin: 0;
}
.gradient-container {
background-color: coral;
width: 200px;
height: 30px;
position: relative;
display: flex;
align-items: center;
}
.elements {
padding: 0 10px;
display: flex;
column-gap: 10px;
overflow-x: hidden;
}
.elements p {
color: #fff;
white-space: nowrap;
}
.gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) calc(100% - 50px), coral);
}
If you will open this in Safari, there would be something like a white area at the right of block.
What causes this and are there any ways to fix it?
This is a bug in safari that has to do with the way browsers interpolate between gradients.
A common answer is to do what you did, using rgba(255, 255, 255, 0), however, Safari still interprets this as white and leads to that unwanted additional of white to the gradient. A fix is to use the same color you are transitioning from (coral in this case) and set it to transparent, which for coral would be rgba(255, 127, 80, 0). The example below uses the code from your pen with the fix applied for safari.
See this stack for more
* {
margin: 0;
}
.gradient-container {
background-color: coral;
width: 200px;
height: 30px;
position: relative;
display: flex;
align-items: center;
}
.elements {
padding: 0 10px;
display: flex;
column-gap: 10px;
overflow-x: hidden;
}
.elements p {
color: #fff;
white-space: nowrap;
}
.gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*RGBA equivalent to coral html color with alpha set to 0 - fixes safari interpolation bug*/
background: linear-gradient(to right, rgba(255, 127, 80, 0) calc(100% - 50px), coral);
}
<div class="gradient-container">
<div class="elements">
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
<div class="gradient"></div>
</div>

Can't make CSS Animations work with #keyframes and position relative/absolute

I am trying to practice simple CSS Animations with Keyframes.
I am trying to move the square from left to right, however, this does not seem to be working with position relative/absolute. I works when I do transform: translateX(...) or something similar, but not with the aforementioned method. Any ideas why?
CSS Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(70, 70, 162);
}
.box1 {
height: 600px;
width: 80%;
background-color: white;
margin: 50px auto;
border: 5px solid black;
position: relative;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
animation-name: left-right;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes left-right {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
right: 0px;
}
}
So, in the Keyframes you had right
100% {
top: 0px;
right: 500px;}
where as it needed to be left
100% {
top: 0px;
left: 500px;}
full code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(70, 70, 162);
}
.box1 {
height: 600px;
width: 80%;
background-color: white;
margin: 50px auto;
border: 5px solid black;
position: reletive;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
animation-name: left-right;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes left-right {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
left: 500px;
/*here*/
}
}

Vue js Vue-cli performing "npm run build", compiles css for image opacity to 1%

when I perform npm run serve everything work as intended.
when I perform npm run build there is "no error".
when I loot at the website the images can't be seen, then I inspect element I see the image opacity in my gallery section changes to 1%.
this is my template code:
<div class="gallery container">
<div
class="images"
v-for="(image, index) in images"
:key="index"
>
<img :src="image.small" #click="selectImage(index)" />
</div>
</div>
My scss code:
<style lang="scss" scoped>
.gallery-wrapper {
padding: 3rem 0;
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
.images {
display: flex;
justify-content: center;
align-items: center;
img {
height: auto;
cursor: pointer;
width: 100%;
opacity: 85%;
border: 5px solid aliceblue;
&:hover {
opacity: 100%;
transition: 0.5s;
border: none;
margin: 5px 0;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.62);
width: 90%;
}
}
}
}
}
</style>
other images are working fine. only the gallery images changes opacity when performing npm run build.
I look at the dist folder it generated a class with 1% opacity.
build result dist/css/app.ae40bac8.css:
.gallery-wrapper .gallery .images img[data-v-c5a51ec0] {
height: auto;
cursor: pointer;
width: 100%;
opacity: 1%;
border: 5px solid #f0f8ff;
}
.gallery-wrapper .gallery .images img[data-v-c5a51ec0]:hover {
opacity: 1%;
-webkit-transition: 0.5s;
transition: 0.5s;
border: none;
margin: 5px 0;
-webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.62);
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.62);
width: 90%;
}
it seems the webpack generated the wrong opacity.
Something that worked for me is using 0.85 instead of 85%

Bootstrap Lighbox - how to add caption with link?

I would like some of my Lightbox gallery images to have a caption with a link to another website. And if the caption link can open up in a new window/tab like the target="_blank" style. But I have no idea how to do this. Could I have some help please? Thanks in advance :)
Code for one gallery image:
<li class="col-xs-6 col-sm-6 col-md-3 col-lg-3 bottom-space">
<a href="img/photos/gallery/gallery_photo044.jpg" data-lightbox="tristone" data-title="My caption goes here">
<img class="img-responsive" src="img/photos/gallery-thumbs/gallery-thumbs044.jpg">
</a>
</li>
I have read somewhere I could use data attributes, so I tried data-href:
<li class="col-xs-6 col-sm-6 col-md-3 col-lg-3 bottom-space">
<a href="img/photos/gallery/gallery_photo044.jpg" data-lightbox="tristone" data-title="My caption goes here" data-href="http://mylinkgoeshere">
<img class="img-responsive" src="img/photos/gallery-thumbs/gallery-thumbs044.jpg">
</a>
</li>
But of course that didn't work since I don't really know what data-href does so I was just guessing :( I did look up about it but I guess my coding level isn't good enough so I don't understand it ^^;
Lightbox.css:
/* Preload images */
body:after {
content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
display: none;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
background-color: white;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-container {
padding: 4px;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../img/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../img/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../img/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #ccc;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../img/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

IE 10 vertically stretching images?

heres the code. it seems to be working on this editor on stackoverflow...but when rendered on ie10 it take the palceholder image and stretches it (almost as if it were 200% in height and 100% in width
<style>
section`enter code here` {
padding: 1em;
text-align: center;
}
.content {
margin: 0 auto;
max-width: 1000px;
}
.content > h2 {
clear: both;
margin: 0;
padding: 4em 1% 0;
color: #484B54;
font-weight: 800;
font-size: 1.5em;
}
.content > h2:first-child {
padding-top: 0em;
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1100px;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 310px;
max-width: 310px;
max-height: 310px;
width: 48%;
background: #d30c55;
text-align: center;
}
.grid figure img {
position: relative;
display: block;
height: 100%;
width:auto;
max-height: 100%;
max-width: 100%;
opacity: 1;
}
.grid figure figcaption {
padding: 0em 2em 2em 2em;
color: #ffffff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-weight: 200;
}
.grid figure h2 span {
font-weight: 400;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/*---------------*/
/***** transition *****/
/*---------------*/
figure.effect-transition {
background-color: #a39d99;
}
figure.effect-transition img {
/* opacity: 0.7; */
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition:hover img {
opacity: 0.1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition h2 {
margin-top: 80%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-transition p {
margin: 1em 0 0;
padding: 0.6em;
border: 1px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
}
figure.effect-transition:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,-170px,0);
}
figure.effect-transition:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,-30px,0) scale(1);
}
#media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}
.grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 100%;
}
}
</style>
<div class="container">
<div class="content">
<div class="grid">
<figure class="effect-transition" style="background-color: #d40e8c;"><img alt="blabla" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=310%C3%97310&w=310&h=310" /> <figcaption>
<h2>Go back <span>home</span></h2>
<p>Some random text here</p>
View more</figcaption></figure>
</div>
</div>
</div>
(I do not have the code on me at this exact moment to show).
I've built something with HTML5 and CSS3. Everything works wonderfully except on some peoples computers (everyone has IE10), the image files are being stretched vertically ?
This is being built for my company (internal)...Is there a reason why this would happen on only some peoples version of IE10?
Thank you,
Nick
Please Check with the css as shown below,
img.someClass{
max-width:100%;
width:auto
}
What did the trick for me was setting a max-width at something like
max-width: 110px;
and afterwards a width:100%;
images were nog not stretched anymore
UPDATE: nvm, this caused the img to have a width of 0 on Firefox