logo
down
shadow

Background gradient in border?


Background gradient in border?

By : tomanu
Date : November 15 2020, 06:54 AM
will help you Here's an svg equivalent with linearGradient instead of a single color.
code :
<svg width="200" height="200">
  <defs>
    <linearGradient gradientUnits="userSpaceOnUse" id="gradient" x1="0" y1="0" x2="100%" y2="0">
      <stop offset="0%" stop-color="red" stop-opacity="1" />
      <stop offset="100%" stop-color="yellow" stop-opacity="1" />
    </linearGradient>
  </defs>
  <path d="M0,0 L200,0 L200,200 L 0,200z" />
  <path d="M75,20 h100 l-100,100" fill="url(#gradient)" />
  <path d="M125,80 v100 h-100z" fill="url(#gradient)" />
</svg>


Share : facebook icon twitter icon
can i get it with css3 & html5? (gradient background, border gradient, transparency)

can i get it with css3 & html5? (gradient background, border gradient, transparency)


By : stone1652
Date : March 29 2020, 07:55 AM
To fix this issue here is design of my button (different backgrounds for example, zoom ~1500% and actual size). how can i do it with single element and some css3, or minimum of additional elements? css guru, anyone? , HTML
code :
<a href="#" class="button"></a>​
.button {
    position: relative;
    z-index: 1;
    display: block;
    width: 22px;
    height: 22px;
    background: -webkit-linear-gradient(#f5f0ee, #e7ddd7);
    background: -ms-linear-gradient(#f5f0ee, #e7ddd7);
    background: -moz-linear-gradient(#f5f0ee, #e7ddd7);
    background: linear-gradient(#f5f0ee, #e7ddd7);
    border: 1px solid #c0b9b3;
    border-radius: 3px;
    box-shadow: inset 0px 1px #fcfbfb, 0px 1px rgba(0, 0, 0, 0.3);
}

.button:before {
    content: "";
    position: absolute;
    left: -4px;
    top: -4px;
    z-index: -1;
    padding: 4px;
    width: 22px;
    height: 22px;
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    background: -ms-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    background: -moz-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    background: linear-gradient(#f5f0ee, #e7ddd7);
    border-radius: 3px;
    box-shadow: 0px 1px rgba(255, 255, 255, 0.3);
}
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>
<div>: background gradient cropped when no border

<div>: background gradient cropped when no border


By : Darkonan123
Date : March 29 2020, 07:55 AM
Does that help Margin collapsing is happening. There are tons of questions/answers about margin-collapsing on stackoverflow. I've answered one (maybe more) myself: Adding CSS border changes positioning in HTML5 webpage
Basically the h1's margin "collapses" and is applied to the surrounding header instead. No background is cropped. The header simply gets smaller.
Trying to make a gradient border WITHOUT using a background div gradient

Trying to make a gradient border WITHOUT using a background div gradient


By : Sh33pman
Date : March 29 2020, 07:55 AM
seems to work fine I'm trying to figure out how to make a border that has a gradient. Here's the catch - the border is not at the very edge of the div, so I can't use the old put-a-div-inside-a-div-and-make-the-background-div's-background-gradient trick. THe gradient nalso has to be repeating. I've already used a child div to create the effect of the border being inside the parent div, but now I need to make it gradient, too. For an example, I'm actually trying to make it exactly like the borders around the divs at the bottom of this page: waysidefinehomes.com. The ones on here are just background images so I can't use them, I need this site to be responsive. Any thoughts? in advance! , You can achieve the background with a radial gradient.
code :
div {
  width: 500px;
  height: auto;
  overflow: auto;
  border-radius: 10px;
  background: radial-gradient(at 30% 20%, #ededed, #d6d1c7);
  padding: 20px;
  margin-bottom: 20px;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet quam massa. Aliquam et felis tempor, auctor lectus id, mattis quam. Ut ante libero, porta et ante nec, porttitor mattis sapien. Vestibulum porta bibendum lorem quis tristique. Pellentesque
  vestibulum, enim sed malesuada facilisis, lacus magna faucibus justo, sit amet venenatis metus metus sed purus. Sed vehicula mi et eleifend lacinia. Nunc eu auctor sem. Morbi vel pellentesque nibh. Aliquam convallis malesuada elit, in tincidunt sapien
  congue vitae. Etiam maximus eget neque eu dignissim. Aenean ut turpis at metus ullamcorper vehicula a non enim. Nullam tristique placerat odio vel molestie. Fusce commodo, sem vel aliquam tempus, est nibh consectetur nisi, et congue lorem arcu eu nibh.
  Morbi placerat malesuada urna posuere cursus. Nullam risus urna, mollis sit amet urna id, convallis pellentesque ligula.</div>
div.outside {
  width: 500px;
  height: auto;
  overflow: auto;
  border-radius: 10px;
  background: radial-gradient(at 30% 20%, #ededed, #d6d1c7);
  padding: 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
}
div .inside {
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: transparent;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px;
}
<div class="outside">
  <div class="inside">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet quam massa. Aliquam et felis tempor, auctor lectus id, mattis quam. Ut ante libero, porta et ante nec, porttitor mattis sapien. Vestibulum porta bibendum lorem quis tristique. Pellentesque
    vestibulum, enim sed malesuada facilisis, lacus magna faucibus justo, sit amet venenatis metus metus sed purus. Sed vehicula mi et eleifend lacinia. Nunc eu auctor sem. Morbi vel pellentesque nibh. Aliquam convallis malesuada elit, in tincidunt sapien
    congue vitae. Etiam maximus eget neque eu dignissim. Aenean ut turpis at metus ullamcorper vehicula a non enim. Nullam tristique placerat odio vel molestie. Fusce commodo, sem vel aliquam tempus, est nibh consectetur nisi, et congue lorem arcu eu
    nibh. Morbi placerat malesuada urna posuere cursus. Nullam risus urna, mollis sit amet urna id, convallis pellentesque ligula.
  </div>
</div>
CSS gradient (background and border)

CSS gradient (background and border)


By : Ivan
Date : March 29 2020, 07:55 AM
it should still fix some issue you can use border-image for the border, and just use background-image for the background gradient. Just like this:
code :
    .btn-primary {
        background-color: blue;
        background-image: linear-gradient(to bottom, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%);
        background-position: 0 0, 100% 0;
        background-repeat: no-repeat;
        background-size: 10% 100%;
        border-bottom: 4px solid #f15a24;
        border-top: 4px solid #f7931e;
        box-sizing: border-box;
        margin: 50px auto;
        border-image: linear-gradient(to left, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%     
    }
Related Posts Related Posts :
  • CSS Media Queries not kicking in when there supposed to
  • Video JS - poster image cover/contain
  • center the div absolute using css but i cannot figure out why its not moving to centre
  • simple css code, i dont understand
  • Autoformatting LESS code with vim
  • Can we use different CSS language/pre processors for different components in a Angular Project
  • combined multiple classes into one css rule
  • Detect mobile device browsers, not only screen width
  • CSS folded corners of div with shadow
  • bootstrap 3: why do my <div>s stack from 992 px width onwards when using "col-sm-6"
  • IE7, IE8 support for css3 media query
  • Gradient ends are blurry when using pixel measurements
  • display bootstrap popovers outside divs with overflow:hidden
  • How to make a non responsive site by using Bootstrap?
  • Selecting an element that doesn't have a child with a certain class
  • Embedded Twitter Widget Height issue
  • Twitter Bootstrap - How to get buttons to be block level only on extra small and small devices
  • How can I add a vertical scrollbar to my div automatically?
  • Trouble changing the link font color using typography.js in gatsby
  • Nesting up scss with main.scss and subcomponent scss files
  • Why does my FontSquirrel font not work?
  • Div positioning (overlays when not wanted)
  • Align button vertically in alert field
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • FireFox & Chrome CSS Differs
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • CSS How to align checkbox image
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Bootstrap keep button other border gradient when removing border-left
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Overlapping Anchor Tags When Hovering Over One
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • increase size of search terms in a magento site by applying css class-name
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org