logo
down
shadow

Gradient Border Causing the Border to Disappear


Gradient Border Causing the Border to Disappear

By : Dave2906
Date : November 22 2020, 10:54 AM
To fix this issue You could do this by applying linear-gradients to :after and :before :pseudo-elements.
code :
.title h3 {
  display: table-cell;
  white-space: pre;
  padding-right: 7px;
}
.title-container {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  height: 6px;
  width: 100%;
}
.title-container:after, .title-container:before {
  position: absolute;
  content: '';
  left: 0;
  top: calc(50% + 3px);
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0));
}
.title-container:before {
  top: calc(50% - 2px);
}
<div class="title">
  <h3>Title</h3>
  <div class="title-container"></div>
</div>


Share : facebook icon twitter icon
Border with Linear Gradient fill doesn't show border at run time

Border with Linear Gradient fill doesn't show border at run time


By : user128422
Date : March 29 2020, 07:55 AM
will be helpful for those in need Here is my XAML , You need to set the BorderThickness.
border-radius + gradient + box-shadow causing ragged edge

border-radius + gradient + box-shadow causing ragged edge


By : Ronald Souza de Lima
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further The current spec defines box-shadow to be drawn outside of the border-box. However, the background/border paints elements to the background, with no regard for other elements (it doesn't paint with objects, only on top of). Since the element with the border-radius is drawn before the box-shadow, it draws the corner with a semi-transparent edge to cause the corner to look smooth (as it should). Regrettably, due to how the spec is worded for box-shadow, it is drawn after the element, and therefore painted on top of the page (after the element) with a semi-transparent edge. Normally, this would be fine, but since both the element and the box-shadow have a transparent edge on the same pixels, it causes the small, semi-transparent gap.
This is a known bug, or has at least been considered a bug by the web design community. See Bugzilla Bug #474386 (specifically comment #6) for source of my information.
jquery Cycle causing border-bottom to disappear

jquery Cycle causing border-bottom to disappear


By : user6054592
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further The bottom bar you're trying to show is hidden because of the specific height you have given to the following containers (elements):
container slider
Custom View in Swift: Constraints Causing Subview's Border and Background to Disappear

Custom View in Swift: Constraints Causing Subview's Border and Background to Disappear


By : ripsnorter63
Date : March 29 2020, 07:55 AM
this will help After further reading I came up with the following solution, simplifying by getting rid of the subview:
code :
import UIKit

@IBDesignable class TextButtonView: UIControl {

    // Properties accessible in Interface Builder.
    @IBInspectable var borderColor: UIColor = UIColor.clearColor() {didSet { updateUI() }}
    @IBInspectable var borderWidth: CGFloat = 0 {didSet { updateUI() }}
    @IBInspectable var cornerRadius: CGFloat = 0 {didSet { updateUI() }}
    @IBInspectable var backgrColor: UIColor = UIColor.clearColor() {didSet { updateUI() }}
    @IBInspectable var mainText: String = "" {didSet { updateUI() }}
    @IBInspectable var mainTextSize: CGFloat = 20.0 {didSet { updateUI() }}
    @IBInspectable var mainTextColor: UIColor = UIColor.blackColor() {didSet { updateUI() }}
    @IBInspectable var secText: String = "" {didSet { updateUI() }}
    @IBInspectable var secTextSize: CGFloat = 12.0 {didSet { updateUI() }}
    @IBInspectable var secTextColor: UIColor = UIColor.blackColor() {didSet { updateUI() }}
    @IBInspectable var horizMargin: CGFloat = 0.0 {didSet { updateUI() }}
    @IBInspectable var secHorizOffset: CGFloat = 0.0 {didSet { updateUI() }}
    @IBInspectable var verticalMargin: CGFloat = 0.0 {didSet { updateUI() }}
    @IBInspectable var lineSpacing: CGFloat = 0.0 {didSet { updateUI() }}

    var mainLabel: UILabel!
    var secLabel: UILabel!
    var textButtonHeight: CGFloat = 0.0
    var fontName: String = "Helvetica Neue"

    required init(coder: NSCoder) {
        super.init(coder:coder)
        setupUI()
    }

    override init(frame: CGRect) {
        super.init(frame:frame)
        setupUI()
    }

    func setupUI() {

        // Set up static properties.
        mainLabel = UILabel()
        mainLabel.backgroundColor = UIColor.clearColor()
        mainLabel.textAlignment = .Left
        secLabel = UILabel()
        secLabel.backgroundColor = UIColor.clearColor()
        secLabel.textAlignment = .Left

        // Add labels to view.
        addSubview(mainLabel)
        addSubview(secLabel)

        // Update variable properties.
        updateUI()
    }

    func updateUI() {

        // Set borders and background.
        self.layer.borderColor = borderColor.CGColor
        self.layer.borderWidth = borderWidth
        self.layer.cornerRadius = cornerRadius
        self.layer.backgroundColor = backgrColor.CGColor

        // Update main label.
        mainLabel.textColor = mainTextColor
        mainLabel.font = UIFont(name: fontName, size: mainTextSize)
        mainLabel.text = mainText

        // Update secondary label.
        secLabel.textColor = secTextColor
        secLabel.font = UIFont(name: fontName, size: secTextSize)
        secLabel.text = secText

        // Calculate view's height.
        var mainLabelCopy: UILabel = mainLabel
        mainLabelCopy.sizeToFit()
        var mainLabelHeight: CGFloat = mainLabelCopy.frame.size.height
        var secLabelCopy: UILabel = secLabel
        secLabelCopy.sizeToFit()
        var secLabelHeight: CGFloat = secLabelCopy.frame.size.height
        textButtonHeight =
            2 * verticalMargin
            + 2 * borderWidth
            + lineSpacing
            + mainLabelHeight
            + secLabelHeight

        setNeedsUpdateConstraints()
    }

    override func updateConstraints() {

        // Set constraints for labels.
        setTranslatesAutoresizingMaskIntoConstraints(false)
        mainLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
        secLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
        removeConstraints(constraints())
        self.addConstraint(NSLayoutConstraint(item: mainLabel, attribute: .Left, relatedBy: .Equal, toItem: self, attribute: .Left, multiplier: 1, constant: horizMargin))
        self.addConstraint(NSLayoutConstraint(item: mainLabel, attribute: .Right, relatedBy: .Equal, toItem: self, attribute: .Right, multiplier: 1, constant: 0 - horizMargin))
        self.addConstraint(NSLayoutConstraint(item: mainLabel, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: verticalMargin))
        self.addConstraint(NSLayoutConstraint(item: secLabel, attribute: .Left, relatedBy: .Equal, toItem: self, attribute: .Left, multiplier: 1, constant: horizMargin + secHorizOffset))
        self.addConstraint(NSLayoutConstraint(item: secLabel, attribute: .Right, relatedBy: .Equal, toItem: self, attribute: .Right, multiplier: 1, constant: 0 - horizMargin))
        self.addConstraint(NSLayoutConstraint(item: secLabel, attribute: .Top, relatedBy: .Equal, toItem: mainLabel, attribute: .Bottom, multiplier: 1, constant: lineSpacing))
        self.addConstraint(NSLayoutConstraint(item: self, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: textButtonHeight))

        super.updateConstraints()
    }
}
changing div border radius makes part of border disappear

changing div border radius makes part of border disappear


By : user3517020
Date : March 29 2020, 07:55 AM
Hope this helps As you are adding a border-radius to your
, it is actually "curving in" on the space the div has which is causing the text area inside to overflow the container.
There are two ways I can see to deal with this. You could add a padding to the textContainer div:
code :
padding: 1rem;
overflow: hidden;
Related Posts Related Posts :
  • 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
  • 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
  • Inline elements not collapsing whitespace before the end of the tag, in modern browsers?
  • Avoid outline of button when clicked
  • How to add a repeating png image in the background of a webpage using CSS?
  • Heading text displaying at the center instead of displaying in the statring line in asp.net application
  • Div fixation with his mother
  • Sentence is not taking /n
  • Wordpress mobile devices logo resize
  • Why a div with higher z-index is not visible (covered)?
  • HTML5 How to align a table to center inside a form?
  • Why is my clip-path not working when it's source is an svg?
  • Flex-box sticky footer with inner flex-box container with y axis scrolling
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org