I'm working on a video project where I've added text overlay. The design I'm aiming for includes having the corners of the border cut out. To better illustrate, here's an image showcasing what I want to accomplish:
Is there a straightforward CSS solution to achieve this white border with cut-out corners without resorting to multiple transparent HTML elements solely for adding borders?
To create a decorative effect on your elements, you can utilize the :before and :after pseudo-elements along with adjusting properties like border, margin, width, and height:
div:before {
content:'';
border-top: 4px solid white;
border-bottom: 4px solid white;
width: 596px;
height: 272px;
margin: 10px 20px;
position: absolute;
}
div:after {
content:'';
border-left: 4px solid white;
border-right: 4px solid white;
width: 612px;
height: 256px;
position: absolute;
margin: 20px 10px;
}
.video{
position:relative;
width:500px;
height:300px;
background:url(//placehold.it/500x300/f0f);
}
.overlay{
/*Uncomment Background to reveal the logic */
/*background:rgba(0,0,0,0.2);*/
color:#fff;
position:absolute;
width:400px;
margin:50px;
height:164px;
padding:15px 0; /* remember 15 ...*/
border-top:3px solid #fff;
border-bottom:3px solid #fff;
}
.overlay:before,
.overlay:after{
content: " ";
position:absolute;
background:#fff;
width: 3px; /* same as .overlay border width */
top:5%; /* This is also interesting */
height:90%; /* Do the math */
}
.overlay:before{left: -15px;} /* :) */
.overlay:after{right: -15px;}
One of the concepts I discussed in my comment was using multiple backgrounds and gradients, which could even be a 1pixel image. Check out the DEMO for a visual representation.
<div class="cornersOff"><img src="http://lorempixel.com/640/480/cats/1"/></div>
This technique involves CSS styling:
.cornersOff {
position:relative;
display:inline-block; /* or table or float or width or whatever*/
}
.cornersOff img,
/* not an image ? */ .cornersOff > * {
display:block;/* or vertical-align:top for inline-block element*/
}
.cornersOff:before {
content:'';
height:100%;
width:100%;
position:absolute;
border:solid 10px transparent;/* size here tells how far from borders you want to see these new borders drawn */
box-sizing:border-box;/* include that border width */
background:
linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0.8)) top center no-repeat ,
linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0.8)) bottom no-repeat,
linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0.8)) left no-repeat,
linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0.8)) right no-repeat;
background-size: 580px 3px,580px 3px , 3px 420px, 3px 420px;
/* it catches the click event ? : uncomment this : *//* pointer-events:none*/
}
The image tag inside can be an iframe, a video tag, or just content.
If you encounter issues with clicking, you can add the rule pointer-events:none; to .cornersOff:before so it won't catch the click event.... especially useful if you are setting some opacity on the background-color.
I'm feeling completely overwhelmed right now. Attached is a picture showing the issue I'm facing: The user list layout is on the right The chat content in the middle should be scrollable vertically The bottom div should stay fixed in place witho ...
Looking for some assistance with my webshop www.spidercatcher.dk. I'm trying to have a background video display only on PCs, while showing a still photo on phones and tablets. I've tried using a poster tag but I can't seem to scale it proper ...
I am tasked with creating a simple Movie listing website where users can add or remove movies from their favorites list. Instead of a standard add to favorites button, I would like to use the heart icon from Bootstrap. Additionally, I want to display the r ...
I seem to be facing an issue related to line height and block height ratios. My font-size is set at 15px, line height at 1.5em (22.5px), and div height at: 16 lines * 1.5em = 24 em. Everything appears fine in Firefox and MS Edge - the div contains exactly ...
INTRODUCTION In my project, I have created two components: image-input-single and a test container. The image-input-single component is a "dumb" component that simplifies the process of selecting an image, compressing it, and retrieving its URL. The Type ...
I'm currently working with CodeIgniter and trying to display live online users using this framework. I attempted some code, but I'm feeling a bit lost now. I found a helpful video that I learned from: Alternatively, I followed these steps as sh ...
I'm in need of nested forms, but since they are not allowed in HTML, I've come up with a solution. I decided to have several submit buttons within one form. Now, my problem is figuring out how to determine which of the submit buttons is pressed ...
When we make an element fade in or out, which specific CSS property is being altered? Is it the visibility attribute, or the display property? I am hoping to create a code snippet with an if statement condition that reads (in pseudo code): if the div is ...
Within my menu, I have a section for portfolios that transforms into a dropdown on desktop hover and mobile click. The issue arises on mobile devices where the first click displays the menu correctly, but subsequent clicks do not trigger any change. I att ...
Within a multi-page template setup in a jQuery mobile application, an issue arises after navigating away from the first page using panel navigation. Upon returning to the first page through another form of navigation, the panel appears "hanged." Upon clos ...
I am currently experimenting with building a compact search box that offers suggestions using the vue 3 boostrap library. I am aiming to have the suggestions box float on top of the following div without pushing it down. Despite trying to manipulate the z- ...
I have been tasked with developing an MVC C# application where the contents of a div are dynamically created using an AJAX call to fetch data from a database. Upon successful retrieval, the content is then displayed as a success message in JavaScript. Here ...
Could use some assistance with looping this gradient smoothly over the text without any annoying jumps appearing during the animation. Is there a way to achieve a seamless movement across the text? Any suggestions on how to approach this? Here is a liv ...
I'm attempting to add a 'read more' arrow to the third column, which should expand the text in the first column when clicked. I have the following code, and it works fine outside of a table but not inside one. Where am I going wrong? I prefe ...
I need to pass an object as my value and use [ngValue] instead of [value]. This is how my HTML is structured: <mat-input-container fxFlex="18" fxFlexOffset="1"> <input matInput placeholder="Example" [matAutocomplete]= ...
If I have the following HTML code, what CSS selector can I use to target all elements between #one and #two without using jQuery? <p id="one"></p> <p></p> <p></p> <p></p> <p></p> <p></ ...
I have implemented a component loading and an interceptor to handle all requests in my application. The loading component is displayed on the screen until the request is completed. However, I am encountering an error whenever the component inside my router ...
I've been looking to incorporate the Quicksand Font into my website, and Google suggested adding the following code: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="h ...
I am encountering an issue where a custom title, received and set in a JS variable, is displaying the ASCII code instead of the symbol. To illustrate, here is a basic example of the render function: render() { var title = "My Title™" retur ...
The menu I created in Magento is functioning correctly in Firefox. When I hover over the menu in Firefox, it works fine, but I am not seeing any hover effects in Chrome. Here is how my hover style is defined: #nav { width:965px; margin ...