Is there a way to create borders with opacity in CSS without using RGBA colors? I'm having trouble getting it to work...
Check out this JSFiddle for a visual explanation.
I've noticed some dark corners in the border, and the background of the element is showing through instead of other elements behind it. Any suggestions on how to fix this?
Thank you in advance.
Here's a possible solution:
To achieve this effect, simply use a container div with an rgba background.
HTML:
<div id="boxOuter">
<div id="box">THANK YOU!</div>
</div>
CSS:
#box{
background-color:#ccc;font-weight:bold;
text-align:center;
line-height:100px;
height:100px;
vertical-align:middle;
font-size:20px;
}
#boxOuter {
background: rgba(0,0,0,0.5); width:300px; padding: 10px;
margin-left:25px;
}
Refer to the comments for tips on making this method (rgba) compatible with older browsers.
An alternative approach without using a wrapper:
Try using outline instead of border. It provides a similar result:
outline: 10px solid rgba(0,0,0,0.5)
Live Demo (just one word changed in your original code)
(Consideration excludes IE in this scenario)
You may find this article helpful:
http://css-tricks.com/transparent-borders-with-background-clip/
Personally, I believe the top choice is using images within borders. You can experiment with a png image featuring transparency (created in photoshop) and utilize the border-image property for endless possibilities. Through research, you may discover various styles that suit your preferences.
Is there a way to change the font color specifically for visited hyperlinks that are being hovered over by the mouse? I am trying to achieve this: a:visited:hover {color: red} ...
Visit my About Me page with custom menu styling Any tips on aligning the body with the grid function to achieve this particular design? ...
Is there a way to design a big, responsive button using Bootstrap? Similar to the example image linked below https://i.sstatic.net/xEBwc.png ...
After searching extensively, I couldn't find any mention of this particular issue. According to the Bootstrap 4.2 documentation on the Jumbotron, I constructed my div with an inline background image. However, when I attempted to apply an overlay on to ...
Is it possible to set a background image for a button in HTML with a transparent background using CSS? Here is the HTML code I currently have: <button style="background-image: url('../images/example.png');"></button> ...
Imagine you have a div with specific height and width (as shown in the illustration as the innermost one), and you wish for the outer divs to encompass it, with an outer margin of 1 em. How could this be achieved? +--------+ | +-----+| | |+---+|| | || ...
Check out this codesandbox to see the issue where the 3 dots button is displayed over the menu. Click on the 3 dots to understand the problem. Below is the CSS code for the menu: .more-menu { position: absolute; top: 100%; z-index: 900; float: l ...
I've been searching for a solution to this issue without any luck. In my setup, there are three input fields and a submit button displayed side by side on large screens, enclosed in <div class="col-sm"> to stack vertically on mobile devices. Ho ...
I am currently using vant ui components in my Vue project, such as buttons. I would like to make some minor style adjustments, like changing the color and border, but I am unsure how to do it. Can anybody please assist me in solving this issue? Thank you i ...
I'm currently working with a jQuery script: $(document).ready(function() { //Focus the first field on page load $(':input:enabled:visible:first').focus(); //Clear all fields on page load $(':input').each(function() ...
I am using JavaScript to set the style attribute of a text element with the element.setAttribute() method, giving it a name of "style" and a value of "my modifications to the style of text." While this method works well in most browsers, it is not functio ...
We are facing an issue with the iPhone and iPad when using flatpickr for our calendars. When the calendar is opened, the cursor automatically focuses on the text box, triggering the default iPhone calendar to appear below. This problem does not occur on An ...
Bootstrap 4's site suggests that a navbar with forms should function properly: I have used the class="form-inline" and at the same level in the HTML, the ul-tag with 3 hyperlinks. Check out this codepen example: http://codepen.io/anon/pen/eWOKXL?ed ...
Attempting to craft a custom HTML tag using JavaScript, I aimed to create the custom element with ES6 JavaScript syntax. The code devised for this task reads as follows: customElements.define('neo-element', NeoElement); function NeoElement (){ ...
I have a textarea in my html file and I am trying to prevent the text from overlapping with an emoji icon button. I would prefer not to use a z-index for the emoji as it may cause issues with other elements on the page. Below is the code snippet: HTML & ...
I've defined the following styles in an external CSS file. .callButton { width: 100px; height: 25px; float: right; /* other styles here */ background-img: url('images/callButton.png'); } .otherButton { width: 100px; height: 2 ...
CLICK HERE FOR THE ISSUE This is the outcome. I prefer the text to be separate from the image. ...
Is there a way to dynamically change the css class of <li> elements in an ASP.NET masterpage? For example, if I click on the AboutUs.aspx link, I want to change <li class="single"> to <li class="active single"> when the page loads. Any s ...
The second textbox features a bootstrap dropdown with extensive content that is overflowing and extending to other textboxes below it. I am looking for a way to resize the dropdown to fit the size of its corresponding textbox. UPDATE: I want the dropdown ...
I am currently working on a React app that includes a scrollable div. Here is an example: <main id="main" onScroll={this.handleScroll}> My question is, how can I temporarily remove the onScroll event listener from the main element and then reattach ...