CSS / HTML Container Help please.

HoldUp · Nov 25, 2017

Hi so I'm working on a page, will probs have no purpose but I'm bored and want to work on something..
So, I've made a box container using CSS and using html..
This is what I've got so far:

You must be registered for see images attach

How do I make it so only the border of the box and the box itself has a reduced opacity?
When I type, add images etc it's making all of that have the same opacity..

MayoMayn · Nov 25, 2017

First thing you can do is to post the CSS and HTML.

HoldUp · Nov 25, 2017

CSS:

Code:

body {
    background-color: #bce0ee;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0px;
}

#box-container {
 background-color: #000000;
    border: 1px solid #96b3be;
    width: 760px;
    height: 400px;
    margin: 25px auto;
    border: 3px solid #B22727;
    opacity: 0.5;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    margin-top: 100px;
    overflow: auto;
    
}

HTML:

Code:

<?php include_once('checktheban.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>{hotelName} &middot; Maintenance</title>
 <link rel="stylesheet" href="{url}/app/tpl/skins/Habbo/styles/maint.css" type="text/css">
 </head>
 
 <body>

 <div id="box-container">
<p><font color="white"> Test </p></font></div>
 </div></center>

Markshall · Nov 26, 2017

You need to use RGBA on the box, not opacity.

So first off you need to convert #96b3be to RGB which is rgb(150,179,190) then apply an alpha transparency value to it

So it would be

Code:

#box-container {
    background-color: rgba(150,179,190,.5);
    /*rest of styles*/
}

You set the .5 to whatever opacity value you want, but as you’ve set opacity: 0.5 in your original code, I’m assuming you want a half-opaque opacity.

You can try the same thing on the border, I’m not sure if alpha transparency would work on borders as I’ve never tried, but I can’t see why it wouldn’t work.

HoldUp · Nov 26, 2017

Markshall said:
You need to use RGBA on the box, not opacity.

So first off you need to convert #96b3be to RGB which is rgb(150,179,190) then apply an alpha transparency value to it

So it would be

Code:

#box-container { background-color: rgba(150,179,190,.5); /*rest of styles*/ }

You set the .5 to whatever opacity value you want, but as you’ve set opacity: 0.5 in your original code, I’m assuming you want a half-opaque opacity.

You can try the same thing on the border, I’m not sure if alpha transparency would work on borders as I’ve never tried, but I can’t see why it wouldn’t work.

Oh okay thanks for this. Wasn't entirely sure aha

CSS / HTML Container Help please.

HoldUp

dont even

MayoMayn

BestDev

HoldUp

dont even

Markshall

Русский Стандарт

HoldUp

dont even

Users who are viewing this thread

Latest posts

Connect with us

Newest members