logo
down
shadow

border-radius renders edges from gradient-background


border-radius renders edges from gradient-background

By : Gabe
Date : November 22 2020, 09:00 AM
I wish this help you i'm trying to get a nav with bootstrap (nav-pills with justify) and only want the border-radius at the left edges from the first item and at the right edges from the last item. (this works with no problem at all) , Try this out - instead background-image try background
CSS
code :
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #f3f8fc 100%, #f3f8fc 100%) repeat scroll 0 0;
    border-color: #f3f8fc;
    color: #7ba4d0;
    text-shadow: none;
}


Share : facebook icon twitter icon
IE9 border-radius and background gradient bleeding

IE9 border-radius and background gradient bleeding


By : shekhar
Date : March 29 2020, 07:55 AM
To fix this issue Here's one solution that adds a background gradient, using a data URI to create a semi-transparent image that overlays any background color. I've verified that it's clipped correctly to the border radius in IE9. This is lighter weight than SVG-based proposals but as a downside, is not resolution-independent. Another advantage: works with your current HTML/CSS and does not require wrapping with additional elements.
I grabbed a random 20x20 gradient PNG via a web search, and converted it into a data URI using an online tool. The resulting data URI is smaller than the CSS code for all that SVG mess, much less the SVG itself! (You could apply this conditionally to IE9 only using conditional styles, browser-specific css classes, etc.) Of course, generating a PNG works great for button-sized gradients, but not page-sized gradients!
code :
<span class="button">This is a button</span>
span.button { 
  padding: 5px 10px;
  border-radius: 10px;
  background-color: orange;  
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
  background-size: 100% 100%;

  border: 2px solid white;
  color: white;
}
Firefox: border-color, border-radius and background color creates ragged edges and white space

Firefox: border-color, border-radius and background color creates ragged edges and white space


By : user3071547
Date : March 29 2020, 07:55 AM
I hope this helps you . This is most likely a bug in Firefox. You could do a simple trick to solve this problem: (it's not the best solution, I know, but the problem seems to be serious)
markup: a fake border through a 'wrapper' div
code :
<div class="wrapper">
    <div class="box">Hello world</div>
</div>
.wrapper {
    border-radius: 15px;
    background: #333;
    padding:3px; /*simulating border*/
}
.box {
    border-radius: 15px;
    background: #333;
}
.box {
    border:3px solid #333;
    border-radius: 15px;
    background: #333;
    -moz-box-shadow:0px 0px 1px #333; /* just on ffox */
}
Border radius, background image, background gradient, and IE8, IE10

Border radius, background image, background gradient, and IE8, IE10


By : Maksymilian Kotłowsk
Date : March 29 2020, 07:55 AM
will help you border-radius is not available in IE8
http://www.quirksmode.org/css/backgrounds-borders/
code :
.common
{
    width: 100px;
    height: 40px;
    border: 1px solid #004f9e;
    padding: 5px 5px 5px 50px;
    margin: 0px;
    font-weight: bold;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    !behavior: url(../../Graphics/PIE/PIE.htc);
    position: relative;
    border-collapse:collapse;
}

.add-to-carttest
{
    background-image: url('https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png');
    background-position:20px 20px;
    background-repeat:no-repeat;
    background-attachment:fixed;
    top:-6px;
    left:-51px;
}

.gradient
{
    background: -moz-linear-gradient(#e1f0ff, #73b9ff); 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e1f0ff), to(#73b9ff));
    background: -webkit-linear-gradient(#e1f0ff, #73b9ff);
    background: -ms-linear-gradient(#e1f0ff, #73b9ff);
    background: -o-linear-gradient(#e1f0ff, #73b9ff);
    background: linear-gradient( #e1f0ff, #73b9ff);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1f0ff', endColorstr='#73b9ff',GradientType=0 );
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1f0ff', endColorstr='#73b9ff',GradientType=0 )";
}
<div class="common gradient">
    <div class="common add-to-carttest"></div>
</div>
How to get border radius and gradient background working together in IE 9

How to get border radius and gradient background working together in IE 9


By : Leela Sailaja
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Give the element a container, with the border radius and set the overflow of the container to hidden and also give this element the border:
HTML
code :
<div class='rounded'>
    <a href="#" class="my_box">TEXT</a>
</div>
.rounded{
    -webkit-border-top-left-radius:33px;
    -moz-border-radius-topleft:33px;
    border-top-left-radius:33px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:33px;
    -moz-border-radius-bottomright:33px;
    border-bottom-right-radius:33px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    overflow:hidden;
    display:inline-block;
    border:1px solid #e65f44;
}
Background border radius with linear gradient

Background border radius with linear gradient


By : Sheena Deutsch
Date : March 29 2020, 07:55 AM
I hope this helps . I'm trying to make 2 background, as follow the image. I'm trying to do with linear-gradient and border radius, but I'm getting only a 90º border and don't know how to change the border.enter image description here here is the code , You can do it like this:
code :
.box {
  padding:20px;
  display:inline-block;
  font-size:30px;
  background:
    linear-gradient(blue,blue) left/100px 100% no-repeat,
    radial-gradient(circle at left,blue 44%,transparent 45%) 100px 0/74px 74px no-repeat;
}
<div class="box">
 Some content here 
</div>
.box {
  padding:20px;
  display:inline-block;
  font-size:30px;
  background:
    linear-gradient(blue,blue) left/var(--p,50px) 100% no-repeat,
    radial-gradient(circle at left,blue 44%,transparent 45%) var(--p,50px) 0/74px 74px no-repeat;
}
<div class="box">
 Some content here 
</div>
<div class="box" style="--p:20px">
 Some content here 
</div>
<div class="box" style="--p:150px">
 Some content here 
</div>
Related Posts Related Posts :
  • Greensock Tweenlite transformations
  • css-prop outline on DIV element not showing or incorrect
  • Center image based on size inside div with whitespace
  • Layout divs either with wrapping or side by side using CSS only
  • Cocoa webview UserAgent "webkit-legacy" issue
  • is it possible to create a background like this using css3?
  • Unexpected space between two divs
  • Pointy leaf shape CSS
  • Background-Blend-Mode for multiple background images
  • Slowing down the delay between "frames" in a CSS animation?
  • Safari won't -webkit-transform: scale()
  • Changing checkbox layout without using label
  • Combining CSS nth-child functions
  • angularjs / gridster / n3-charts : $digest error in chrome/firefox but not in safari
  • BEM multiple classes selector
  • What are the default IE select box styles?
  • Fill element with slanted background on hover
  • Bootstrap columns not showing correctly in Firefox
  • Center an element in Bootstrap 4 Navbar
  • CSS 'Content footer' sticks to the bottom when content doesn't exceed scrollheight but flows with content when it does
  • Scrolling with ionic css (without ionic.js)
  • How exactly background-size and background-repeat works?
  • How to keep the div and label in the same row?
  • How to use css3 'flexbox' to make a layout like this?
  • Trying to center an image within a flex item using flexbox. What's going on here?
  • Why does the poster attribute of the video element cause my video to offset?
  • Removing a class in a CSS stylesheet
  • How to CSS pairs of DIV text left/right of center
  • create custom size button in ionic
  • Dynamically build up a SASS map and then use the values
  • Which browsers support -webkit-text-fill-color?
  • Scale of image with CSS3 animation
  • Remove horizontal scroll in block with "position:absolute" divs inside
  • Absolute positioned div split into two when displayed
  • How to place field label on top of field instead of left side in Grails
  • Decreased CSS Specificity with new HTML5 elements
  • Why isn't the width or margin in my @media query registering properly?
  • DIV's background ain't visible around <textarea> placed within
  • Centering divs inside a container
  • How to get multiple bottom only borders on a circle
  • keyframe animation on load
  • CSS transform Scale translates the object, how to avoid this?
  • css hover effect fixed to dev element and not extending when scrolling
  • How to get bootstrap columns to stack responsively?
  • Creating an MVC Layout that has a sidebar sometimes and other times not
  • create 3 responsive box with background color and Image
  • wordpress registration page - create a style sheet for it
  • How to put logo in left, and text vertically-aligned next to it?
  • css dropdown menu not displayed
  • CSS not loading correctly on Jekyll (GitHub)
  • Why this :not() instruction isn't working?
  • How to vertical-align:bottom 2 floated divs with text
  • Foundation SASS
  • How to display two columns of blocks with CSS
  • Validating check boxes in HTML
  • CSS how to fill height of container?
  • column-width property in Multiple column layout
  • Rails 4 x SASS: load specific stylesheet in Internet Explorer
  • How to change CSS of website if accessed through a mobile browser
  • Transform LESS Mixin into Stylus Mixin
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co