Creating a glassy appearance: What's the process?

I want to achieve a similar glass effect as shown in this screenshot here: (), but despite trying to adjust the opacity, I can't seem to get it right. Here's my code:

        .Head {
   position: absolute;
   top:200px;
   margin-left: 20%;
   color:white;
   background-color: #2acec3;
   margin-left: 8%;
   font-size: 400%;
   font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
   opacity: 0.7;
   display: block;
}

.ParaPlanes {
   position: absolute;
   top:220px;
   margin-left: 20%;
   color:white;
   background-color: #2acec3;
   margin-left: 8%;
   font-size: 400%;
   font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
   opacity: 0.7;
   display: block;
}

This is what I ended up with: http://prntscr.com/f58njn

Appreciate any help! :-)

Answer №1

The opacity attribute adjusts the transparency level of its child components as well... Give it a shot -

background-color:rgba(red, green, blue, opacity (value between 0 and 1))

For instance -

#mybox {
    background-color : rgba(128, 255, 0, 0.75);
}

The RGB values should be in the range of 0 to 255. Appreciate your attention!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for moving the title to the next line within a card design

I'm currently working on an antd Card and I am trying to figure out how to display the title on two lines if it is too long. For example, instead of showing "This title needs to go to ne...", I would like it to be split into two lines as "This title n ...

What is the best method to extend my borders to the very edge?

Struggling with table borders extending to the edge on a website using master pages and CSS stylesheet. This issue requires some troubleshooting, so any help would be appreciated. The problematic website is here. I need the border under the banner menu to ...

Enhancing collapsible list headers in jquery mobile with checkboxes

Having trouble with a jQuery Mobile website issue. Currently working on a jQuery mobile site that includes a collapsible list (). The client request is to have a checkbox inside the header, allowing users to check items off without needing to open them. T ...

react-basic-photo-carousel: adjust size and dimensions

As a newcomer to React JS, I decided to use react-simple-image-slider for my image slider component. However, I am facing an issue with making the images responsive on mobile devices. I tried setting the width and height using vw, vh or percentage units, ...

Table Template in XSLT

I am attempting to retrieve information in a tabular format, but I'm running into issues. The data is displaying vertically rather than in the horizontal table format I desire using standard HTML table tags. Is there a way to achieve this? Am I overlo ...

Using v-model in Vue 3 will result in modifications to the table class in Bootstrap 5

Below is a snippet of the code I wrote: <table class="table table-striped"> <tr class="table-dark"> <th>#</th> <th>Column 1</th> <th colspan="3">Column 2</th> </tr> <tr ...

Tips for customizing the appearance of a checkbox made with AngularJS

I need to style the checkbox using CSS without modifying the HTML code provided due to company restrictions. Is there a way to customize the appearance of the checkbox purely through CSS? Below is the AngularJS code snippet: <label class="form-lbl n ...

Adjusting the letter spacing of individual characters using HTML and CSS

Is there a way to set letter-spacing for each character with different sizes as the user types in a text box? I attempted to use letter-spacing in CSS, but it changed all characters to the same size. Is there a possible solution for this? Here is the code ...

Validation is not being applied to the radio button

Link: Issue with Form I've encountered a problem with my script that is meant to validate and submit a form, similar to this working example: Form in Working Order Unfortunately, the script is not functioning as intended on the first link. The Java ...

Customizing Ngx-bootstrap Carousel Indicator, Previous, and Next Button Styles

<carousel > <a href=""> <slide *ngFor="let slide of slides"> <img src="{{slide.imgUrl}}" alt="" style="display: block; width: 100%;"> </slide> 1. Is there a way to substitute the indicators with images ...

When bootstrap buttons are displayed inside a Vue component, there should be no spacing between them

Is this issue specific to the vue-loader or is it more related to webpack builds in general? Consider a basic HTML page with Bootstrap 4 loaded and two buttons added: <button type="button" class="btn btn-primary">Primary</button> <button t ...

HTML5 CSS and Rails theme

I am currently utilizing a free HTML5 template found at this URL: Despite my efforts, I am unable to successfully implement the background images from the main.js file (bg01.jpg, bg02.jpg, bg03.jpg). How should I correctly reference these image files wit ...

I have tried using justify-content: center; and align-items: center; to center this div, but the container div is still not centered. How can I successfully center

I am having trouble centering the container in my HTML code HTML code:- <body> <div class="container"> <div class="image"> <img src="./images/image-qr-code.png" alt="qrcode"> & ...

Make sure to align images and comments seamlessly on your website just like in the comment section of YouTube

Looking for help aligning an image and two spans in one row <img src="../images/profile/profile.png" class="img" /> <span class="name">First Name</span> <span class="comment"> This is simply dumm ...

Conflicting styles between Bootstrap and Formstack are causing radio buttons to appear only partially visible

Encountering a conflict between Bootstrap (4.1.3) and Formstack CSS when trying to embed a form in a website. The radio buttons are not fully visible, with the issue located in the "label" class ("fsOptionLabel"). Adjusting the line height provides a parti ...

htmlEnhance your webpage with a native-like combobox

<!DOCTYPE html> <html> <body> <form action="demo_form.asp" method="get"> <input list="browsers" name="browser" placeholder="choose browser"> <datalist id="browsers"> <option value="Internet Explorer"> ...

When displaying content within an iframe, toggle the visibility of div elements

I'm attempting to toggle the visibility of certain page elements based on whether the page is loaded in an iframe. <script>this.top.location !== this.location && (this.top.location = this.location);</script> The above code succes ...

Using CSS to append additional text to the end of a hyperlink

I have scoured the depths of the web, yet no solution has revealed itself to me. I am on the hunt for a snippet of CSS that can append additional text to the end of a URL. For instance - www.google.com/search-url I am seeking a magical snippet that can ...

Create a vibrant stroke and conclude with a circular marker beneath the content with CSS

Can you create a vibrant line with a dot underneath text using CSS, similar to the example shown in the image? The underline should begin with some spacing or padding. .underline { text-decoration: underline; text-underline-offset: 10px; displa ...

Using jQuery, generate a div element and display it in full screen mode

Is it possible to dynamically create a full-screen div using jQuery directly from JavaScript without the need to first define it in the HTML and then make it visible with jQuery or CSS? UPDATE After some troubleshooting, I found a solution to my issue: ...