I am attempting to create a design like this for a client with a blog.
They are interested in having a semi-transparent border. I understand that it can be achieved by making it a background, but I am struggling to figure out the logic/code for implementing this css technique for banners. Can anyone provide guidance on how to accomplish this? This information would greatly assist me in achieving the desired aesthetic for my client's blog....
If you're looking for complete transparency, you can achieve that by using:
border: 5px solid transparent;
But if you want a combination of opaque and transparent border, you can use:
border: 5px solid rgba(255, 255, 255, .5);
In the rgba code, 'a' stands for alpha which determines the level of transparency on a scale from 0 to 1.
Some may recommend using the opacity property which has a similar effect, but keep in mind that it will also affect child elements. Using rgba provides more control compared to opacity.
To ensure compatibility with older browsers, always include a fallback background color using hexadecimal code (#) in case the browser doesn't support rgba. This helps maintain consistency in appearance across different platforms.
Another demo with background image
One more demo using an 'img' tag instead of background-image
body {
background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);
}
div.wrap {
border: 5px solid #fff; /* Fallback option */
border: 5px solid rgba(255, 255, 255, .5);
height: 400px;
width: 400px;
margin: 50px;
border-radius: 50%;
}
div.inner {
background: #fff; /* Fallback option */
background: rgba(255, 255, 255, .5);
height: 380px;
width: 380px;
border-radius: 50%;
margin: auto; /* Horizontally centered */
margin-top: 10px; /* Vertically centered (manually calculated)*/
}
Note (For Demo 3): Make sure the image provided maintains its aspect ratio when scaled based on the height and width values given.
Another option is to utilize border-style: double in conjunction with background-clip: padding-box, eliminating the need for any additional (pseudo-)elements. While this approach may be more concise, it lacks the flexibility of other methods.
Take a look at this example:
<div class="circle">Some text goes here...</div>
.circle{
width: 100px;
height: 100px;
padding: 50px;
border-radius: 200px;
border: double 15px rgba(255,255,255,0.7);
background: rgba(255,255,255,0.7);
background-clip: padding-box;
}
Upon closer inspection, you may notice that the transition between the border and the background is not seamless. This appears to be a known issue in current browsers, although it's less pronounced when the border is narrower.
To achieve a design with rounded corners, transparency, and using CSS properties like :before and border-radius is surprisingly simple:
<div class="circle"></div>
The CSS code:
.circle, .circle:before{
position:absolute;
border-radius:150px;
}
.circle{
width:200px;
height:200px;
z-index:0;
margin:11%;
padding:40px;
background: hsla(0, 100%, 100%, 0.6);
}
.circle:before{
content:'';
display:block;
z-index:-1;
width:200px;
height:200px;
padding:44px;
border: 6px solid hsla(0, 100%, 100%, 0.6);
/* 4px more padding + 6px border = 10 so... */
top:-10px;
left:-10px;
}
The use of :before in conjunction with our main element .circle gives us the desired effect by simply adjusting transparency and playing around with the opacity of the borders.
Utilize the rgba function (rgb with alpha transparency) for creating semi-transparent colors:
border: 10px solid rgba(0,0,0,0.5); // Here, 0.5 represents 50% opacity
The value of alpha transparency ranges from 0 (0% opacity = fully transparent) to 1 (100% opacity = not transparent at all)
Seeking assistance with a design challenge I encountered. The first image showcases a well-structured table on desktop view, while the second image displays an undesired layout when examined using Chrome DevTools. A link to the problematic layout can be fo ...
Hey folks, I'm a bit uncertain about my client's requirements but thought sparking a conversation might help. My client is looking to extract HTML data from a webpage and convert it into an XLS format. The content is all sourced from their own w ...
Having an issue here - I'm trying to use JavaScript to set some attributes. for(i=0;i<div_navi.childNodes.length;i++){ if(div_navi.childNodes[i].nodeName =="SPAN"){ div_navi.childNodes[i].setAttribute("onclick","g ...
Utilizing bootstrap UI in conjunction with AngularJS directives, I am looking to customize the default styles that bootstrap applies to its elements. Is it recommended to target the HTML contents within the template? Referring to the examples provided in ...
I am working on a function to create multiple dynamic IDs with a specific pattern. How can I achieve this? followup: Vue.js: How to generate multiple dynamic IDs with a defined pattern Details: I am developing an interactive school test application. Whe ...
On my practice website, I have set up a demonstration for showcasing text data. The issue arises when the user inserts an excessive amount of characters in the text box. To address this, I would like the text to be scrollable so that all content can be d ...
Is it possible to make the shadow appear only on one side (Top) using CSS? I've tried multiple solutions, but I always end up with a shadow on all sides. This is what I have attempted: .box-container{ width:100%; height: 80px; padding:10px ...
I've come up with an innovative concept for an expandable panel: The default state of the panel is hidden Clicking a button exposes the panel As the panel emerges, it smoothly expands upwards from the bottom of its parent at a consistent pace, creati ...
Suppose I have a JavaScript function that displays an error using the following code document.getElementById("ID").innerHTML = "This is your error"; Now, if I wish to customize the error message by changing its text color and repositioning it on the page ...
Check out the JavaScript code snippet below by visiting this fiddle. var name = ["Ted", "Sarah", "Nancy", "Ted", "Sarah", "Nancy"]; var prodID = [111, 222, 222, 222, 222, 222]; var prodName = ["milk", "juice", "juice", "juice", "juice", "juice ...
Hey there! I've been using this JavaScript function to print a div, but now I realize that I need to switch to jQuery. Can someone lend a hand in helping me convert this to jQuery code? $(document).ready(function(){ function printData() { ...
Why won't my CSS changes apply after I update the file? Even though it was working before, now when I make a change to my CSS file, the updates do not take effect. When viewing the applied styles on IE11 in troubleshoot mode, I am seeing the old sett ...
I've come up with an idea for my AngularJS app and I'm curious to know what the AngularJS community thinks about it. Essentially, I'm connecting to a data API and displaying the results on the page. My approach involves creating an AngularJ ...
I've experimented with various solutions for my issue, but it seems that the unconventional structure of my project requires a unique approach to fitting the video into a box while keeping it responsive. Here is a preview of what I'm aiming for: ...
Seeking an HTML5-based tool to efficiently display a zoomable, panable map (similar to Google Maps) and incorporate a circle at a specific location upon clicking a button on a webpage. Any suggestions for HTML5-compatible frameworks or would JQuery be the ...
Can file corruption occur during the process of uploading a file through a web form? Specifically, when an input of type "file" is included in a form submission and the file is saved on the server (typically in a designated temporary upload directory). Is ...
I'm trying to show each character of a string, which is stored in an array, one at a time. However, when I use threadsleep(a) with the code found here: http://jsfiddle.net/thefiddler99/re3qpuoo/, all the characters are displayed at once. There seems t ...
I'm facing a dilemma On my website, I need to capture the value of a span within a modal. The value changes when the modal is opened and reverts to the old value when closed. This particular value represents the cart total in my online store. Wheneve ...
Trying to explain the question clearly, I have a table with a textbox at the bottom where users can expand it by grabbing the corner. However, when they do so, other fields also move along with it. The setup of this form in a two-column table was inherited ...
Recently, I discovered that it's possible to have multiple og:image meta tags on a single page. However, I'm struggling to figure out how this may impact the display on the iOS message app. I came across a Shopify website that showcases a mosaic ...