I've been playing around with the code below, and there are two things i don't quite get. The first one is that Chrome seems to accept the vendorless radius specification. So why should we put in "-webkit" there?
-webkit-border-radius: 10px;
-moz-border-radius: 20px;
border-radius: 30px;
I also noticed that the very same commands have no effect in Firefox. The border corner stays sharp. Am i missing something about vendor extensions?
HTML
<div class="blobb">
<form id="myForm" runat="server">
<input id="info" type="text" placeholder="Info" />
</form>
</div>
CSS
div.blobb{
width: 200px;
height: 100px;
padding: 15px 25px 0 25px;
margin: 15px 0px 15px 30px;
cursor: default;
border: 1px solid #666666;
background-color: #ccaa99;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Chrome switched from the -webkit- to the unprefixed name in version 5. Firefox switched from -moz- to the unprefixed name in version 4. Details here: caniuse.com/border-radius – Šime Vidas Jul 29 at 13:03
Related
This question already has answers here:
How to remove the wrapper spans from next/image in Next.js?
(4 answers)
Closed 10 months ago.
I've been working on nextjs for the first time and I came across this thing. When I use the image tag to add an image file to my web page, it automatically wraps the inside the wrapper and adds inline CSS to it. Is there a way to remove that wrapper?
My code looks like this:-
<div className="imageContainer">
<Image height="600px" width="600px" src="/images/heroImageIndex1.png"/>
And the result looks something like this:-
<span style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"><span style="box-sizing: border-box; display: block; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 100%;"><img alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27600%27%20height=%27600%27/%3e" style="display: block; max-width: 100%; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px;"></span>`<img src="/_next/image?url=%2Fimages%2FheroImageIndex1.png&w=1200&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" srcset="/_next/image?url=%2Fimages%2FheroImageIndex1.png&w=640&q=75 1x, /_next/image?url=%2Fimages%2FheroImageIndex1.png&w=1200&q=75 2x"><noscript><img sizes="100vw" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&w=640&q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&w=750&q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&w=828&q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&w=1080&q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&w=1200&q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&w=1920&q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&w=2048&q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&w=3840&q=75 3840w" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&w=3840&q=75" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span>`
There is no such possibility with the default next.js Image component. You can only make your own custom component or use a third party library
I've got a inside and 's. My problem: the outer div got border-radius and overflow: hidden. The images are wider than it's parent . But overflow: hidden works well to hide the rest of the image. Only the border-radius works not on the images. Why?
My HTML structure:
<div class="teaser-container tc1-sidebar">
<a href="#">
<img class="teaser-image bottom" src="dist/img/teaser/bigteaser-bonus-hover.jpg" alt="teaser"><img class="teaser-image top" src="dist/img/teaser/bigteaser-bonus.jpg" alt="teaser">
</a>
</div>
CSS for outer :
position: relative;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
CSS for inner 's:
position: absolute;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Thanks for any workaround!
Look at my problem: http://jsfiddle.net/7h4SD/
see if this works simple work around
fiddle
CSS ---
.box-s1 {
width: 360px;
height:360px;
border: 1px solid #515355;
margin: 10px 0px 10px 0px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 60px;
background: url('http://weirdmovievillage.files.wordpress.com/2010/12/dexter-main-iamge1.jpg');
}
HTML
<!--
* basic problem: image is wider than box.
* round-corners don't grip
-->
<div class="teaser-image-box box-s1 tib-ef1">
</div>
Let me know if the workaround doesnot suit you. Basically setting the height and width will be equal to the image height and width :) you can also keep the image added to check its height but change visibility
display:none
In case you want the image to be there :)
I just can't figure this out. The links below work absolutely fine in every browser except IE8. If you click on the elements in IE8, the button disappears. If you click again where it was it reappears. But no amount of clicking will actually lead you to the href location. Can anybody explain to me why that might be? I've exhausted all of my thoughts and it still doesn't work. Many thanks for all your thoughts!
The html...
<div style="padding:0px 0px 30px 0px; clear: both;">
<div style="width: 50%; display: block; float: left;">
Learn More
</div>
<div style="width: 50%; display: block; float: left;">
Get Started
</div>
</div>
...and the stylesheet...
.big_button {
-moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
box-shadow: inset 0px 1px 0px 0px #bbdaf7;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff
), color-stop(1, #378de5) );
background: -moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);
filter: progid : DXImageTransform.Microsoft.gradient (
startColorstr = '#79bbff', endColorstr = '#378de5' );
background-color: #79bbff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #84bbf3;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 18px;
font-weight: bold;
padding: 15px 45px;
text-decoration: none;
margin-left: 130px;
}
.big_button:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background: -moz-linear-gradient(center top, #378de5 5%, #79bbff 100%);
filter: progid : DXImageTransform.Microsoft.gradient (startColorstr = '#378de5', endColorstr = '#79bbff' );
background-color: #378de5;
}
.big_button:active {
position: relative;
top: 1px;
}
Its because of the 'filter:' part in your css, remove it, then it will work...
I just figured it out. IE8 seems to have a problem with :active in css. So the following section of the stylesheet was causing issues:
.big_button:active {
position: relative;
top: 1px;
}
Current fix is to exclude the ':active' part of the css for the button as it's not essential. If anybody has any further information on why IE8 has issues with :active, I'd be interested to know about it.
i have this code:
<style type="text/css">
div {
margin: 100px auto;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-top: 30px solid red;
border-left: 30px solid red;
border-bottom: 30px solid transparent;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
}
</style>
<div></div>
that produce:
in firefox,
but in chrome (linux, and windows - didnt try in mac) i see nothing why?
I believe it is some sort of bug, actually. It works for me if you change the height and width to 1px. This leaves a little white dot, unfortunately, but that can be fixed by changing the background to red and the background-clip to content.
JSFiddle example.
Because you gave 0px width and 0px height to the div so you see nothing.
width: 0px;
height: 0px;
Change this, hope it'll be visible.
I'm attempting to give a 'card' element a drop-shadow which looks like it is lifted from the page. I'm doing this with the ::after pseudo-element, a css-transform, and a box shadow.
I'm using Mac OSX, Chrome (latest version) and Firefox 5. The results are
As you can see, there is a strange border-like artifact in the firefox rendering. The color of this seems to be linked to the body background color - as you can see in the second firefox example.
To do this I have the following code:
HTML:
<div class="card_container">
<div class="card">
<!-- Content //-->
</div>
</div>
CSS:
.card{
padding: 5px;
background-color: #fff;
border: 1px solid #aaa;
height: 375px;
margin-bottom: 20px;
}
.card_container::after{
content: "";
width: 210px;
height: 10px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
box-shadow: 3px 3px 3px #4a4a4a;
background-color: #4a4a4a;
position:absolute;
bottom: 20px;
right: 8px;
z-index: -1;
}
There's some more CSS around, but I'm fairly sure I've played around enough to rule anything else out.
Any ideas why this is happening, if it's platform/browser specific, and/or any fix? Thanks for any help!
:after is a tricky selector: you add an HTML element to your document, but you cannot manipulate its position freely. I suggest changing the HTML like this:
<div class="card_container">
<div class="card">
<!-- Content //-->
</div>
<div class="shadow"></div>
</div>
You have to add some the "shadow" div to every card elements in use, which might take some time.
Now for the CSS:
.card {
padding: 5px;
background-color: #fff;
border: 1px solid #aaa;
margin-bottom: 20px;
height:100px; /* just for show, can be set to auto */
}
.card_container {
width:210px;
overflow-x:hidden; /* preventing the shadow from leaking out on the sides */
}
.shadow {
width: 93%;
height: 10px;
/* rotation */
transform:rotate(2deg);
-moz-transform:rotate(2deg); /* Firefox */
-webkit-transform:rotate(2deg); /* Safari and Chrome */
/* shadow */
box-shadow: 3px 3px 3px #4a4a4a;
-moz-box-shadow: 3px 3px 3px #4a4a4a;
-webkit-box-shadow: 3px 3px 3px #4a4a4a;
background-color: #4a4a4a;
border: 1px solid #4a4a4a;
position: relative;
bottom: 33px;
left: 5px;
z-index: -1;
}
This solution is not very flexible: you will need to adjust the shadow element if you change the card's width (the wider the shadow, the less rotation, for instance).