I'm having a dead end here. I think it's suppose to be simple, but I've no idea how.
If you see this website header, http://effectiveadvisory.com/wingwah-may/ , I already made the border radius. Now, how do I want the outside border to be black?
This is the header div css.
header.header.main-header {
border: 2px solid rgba(160, 160, 160, 0.2);
border-radius: 30px;
}
I tried putting out outline-style property with black color, but nothing happen.
Set parent background as black then set opaque background to the header. Like this :
.header-wrapper {
background: black;
}
header.header.main-header {
border: 2px solid rgba(160, 160, 160, 0.2);
border-radius: 30px;
background: white;
}
Related
everyone, I am trying to add border to one side of a a element, however, when I add it to one side it give it a sharp diagonal edge:
I am trying to remove the sharp edge and make it a square.
I have tried using pseudo-elemnts to achieve this but I have had no luck:
Currently, I am using:
a{
border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
border-left-width: 0;
border-radius: 0px;
position: relative;
}
a::before{
border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
border-radius: 0px;
position:absolute;
content:'';
}
But this is still giving me the results below. How can I do this successfully?
See if this works for you:
box-shadow: -10px 0 0 0 black;
Just that, no borders.
So, in my CSS code, I have the following:
img {
border: 5px solid #fff;
margin: 5px;
position:relative;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
However, the 5px white border is not appearing, just the shadow. What am I missing?
Edit: In response to all replies thus far, I obviously see that #fff is white, as I mentioned above, the "5px white border". I want it to be white.
What's happening is that there is NO border showing up at all, just the img with a shadow. But I want the 5px white border, then the shadow fall off of that. I've seen it elsewhere but for some reason it's not working for me.
Your image has a border. You used #fff as the border color which is the HEX code for white. Change it to black or something darker.
change your color of border: 5px solid #fff; to something like #000.Your are not seeing border color because #fff denotes white color and your body background color is also white.
Your img has a border, but you can't see it since #fff is white (unless you've got a darker background).
I have a div here with a button:
I want the contents of the div to be opaque while still keeping the semi-opaque background color.
The box will contain a menu.
#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid #1F5899 ;
height: 200px;
width: 400px;
padding: 20px;
opacity:0.4;
background-color: #6AA6D9;
}
div.calcMenuContents {
opacity: 1;
}
The Run button is contained within the calcMenuContents div:
<div id="calculationMenu">
<div id="calcMenuContents">
<button onclick="runCalculations(2)" class="insideMenu">Run</button>
</div>
</div>
How may I make it so that the calcMenuContents are not semi-transparent?
Update: Thank you, BoltClock for the alternate solution (to set specific attributes of a div, instead of for the entire div).
My only issue is that the parent
There is a solution! Use rgba background values and you can have transparency wherever you want :
#calculationMenu
{
background: rgba(0, 0, 0, 0.4);
/*opacity: 0.4;*/
padding: 20px;
}
div.calcMenuContents
{
background: rgba(255, 0, 0, 1);
/*opacity: 1;*/
}
http://jsfiddle.net/Kyle_Sevenoaks/TK8Lq/1/
For text, you can just use the same rgba code, but set to the color property of CSS:
color: rgba(255, 255, 255, 1);
But you must use rgba on everything for this to work, you have to remove the opacity for all parent elements.
http://jsfiddle.net/Kyle_Sevenoaks/TK8Lq/2/
use rgba()
You can't really cancel out a parent element's opacity, but if the only parts of the parent element that will be semi-transparent are its background and its border, you can replace their hex colors with rgba() values based on the opacity you had given it, and remove the opacity declarations altogether:
#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid rgba(31, 88, 153, 0.4);
height: 200px;
width: 400px;
padding: 20px;
background-color: rgba(106, 166, 217, 0.4);
}
you can change the background-color into an RGBA, so you would get:
background-color: rgba(106, 166, 217, 0.4);
If I'm right
You can't change the opacity of child elements. Try to use semi-transparent .png image as background of "calculationMenu" div instead of solid color background and opacity.
I'm honestly not sure where to begin on this one (I'm a graphic designer digging a bit deeper into HTML/CSS, but my current experience is rather slim, so this problem is beyond my ability at the moment):
In part of my newest site design I've broken up sections of the site with banded shades: sections alternate between having the standard page background and applying a 10% black transparency overlay, which serves to distinguish the next section.
The problem is that every new section is supposed to have a block of three centered arrows cut out of the darker (or lighter) shade above, like so:
I know how I could manage this with images, but since the background is a repeating pattern that solution doesn't really work.
Any advice/tips that could help me solve this problem? Basically, all light sections need to begin with three arrows of 10% black transparency, and all dark sections need to begin with three arrows cut out of the 10% transparency background.
Is there an HTML/CSS based way to do this?
Container with trapezoid top border
Trapezoid:
I add the desired border on the top with a pseudo-element ::before.
Choose to display this content as a block this way it gets the size of its container.
Positioned this element relative so it is not displayed inside its container. position:relative; & top: -30px;
The border got a static 30px, and that's why its displayed -30px higher so its exactly above our .cut-out.
Transparency:
Setting the color with rgba() lets you set the opacity of the color.
So rgba(0,0,0, 0.1) sets the container/trapezoid to have a opacity of 10%. where a last value of 1 would equal 100% opacity. (Where you would use rgb() instead)
body {
margin: 0;
}
main {
background-color: rgba(0, 0, 0, 0.1);
}
.cut-out {
display: inline-block;
float: left;
background-color: rgba(0, 0, 0, 0.1);
width: 100px;
height: 150px;
margin: 40px 0 0 0;
}
.cut-out::before {
content: "";
border-bottom: 30px solid rgba(0, 0, 0, 0.1);
border-left: 30px solid transparent;
border-right: 30px solid transparent;
display: block;
position: relative;
top: -30px;
}
.stop {
clear: both;
}
<main>
<div class="cut-out">Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, </div><!--
--><div class="cut-out" style="width:150px;">Lorem ipsum dollar si amet, </div><!--
--><div class="cut-out" style="width:250px;"></div><!--
--><div class="cut-out"></div>
<div class="stop"></div>
</main>
Here's a fiddle that should help you out. This is done using simple CSS, and I'm just illustrating it here. You can adapt this to match your needs.
Sample HTML:
<div class="cutout"></div>
And the CSS
.cutout {
width: 100px;
height: 0px;
background: none;
border-bottom: solid 30px rgba(0, 0, 0, 0.1);
border-right: solid 30px transparent;
border-left: solid 30px transparent;
border-top: solid 0 transparent;
}
This will give you one of the elements to be repeated. To get some understanding of how this works, check out the following CSS in the updated fiddle:
.cutout {
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0.05);
border-bottom: solid 30px rgba(0, 255, 0, 0.1);
border-right: solid 30px rgba(0, 0, 0, 0.05);
border-left: solid 30px rgba(0, 0, 0, 0.05);
border-top: solid 0 rgba(0, 0, 0, 0.05);
}
Basically, we're assigning transparent color to the right and left borders, and giving the div a height of 0. This means only the bottom border remains visible, and a trapezoidal shape is formed because of the border width.
Edit: Looks like the links posted by #Myke showcase this already, I recommend playing around with code like this until you get a good idea of how to render similar shapes.
I'm trying to do something like this for a client who has a blog.
She wanted a semi transparent border. I know that's possible with making it just a background. But I can't seem to find the logic/code behind this kind of css technique for banners. Does anybody know how to do this? It would be a lot of help because that's the look my client's wanting to achieve for his blog....
Well if you want fully transparent than you can use
border: 5px solid transparent;
If you mean opaque/transparent, than you can use
border: 5px solid rgba(255, 255, 255, .5);
Here, a means alpha, which you can scale, 0-1.
Also some might suggest you to use opacity which does the same job as well, the only difference is it will result in child elements getting opaque too, yes, there are some work arounds but rgba seems better than using opacity.
For older browsers, always declare the background color using #(hex) just as a fall back, so that if old browsers doesn't recognize the rgba, they will apply the hex color to your element.
Demo
Demo 2 (With a background image for nested div)
Demo 3 (With an img tag instead of a background-image)
body {
background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);
}
div.wrap {
border: 5px solid #fff; /* Fall back, not used in fiddle */
border: 5px solid rgba(255, 255, 255, .5);
height: 400px;
width: 400px;
margin: 50px;
border-radius: 50%;
}
div.inner {
background: #fff; /* Fall back, not used in fiddle */
background: rgba(255, 255, 255, .5);
height: 380px;
width: 380px;
border-radius: 50%;
margin: auto; /* Horizontal Center */
margin-top: 10px; /* Vertical Center ... Yea I know, that's
manually calculated*/
}
Note (For Demo 3): Image will be scaled according to the height and
width provided so make sure it doesn't break the scaling ratio.
You can also use border-style: double with background-clip: padding-box, without the use of any extra (pseudo-)elements. It's probably the most compact solution, but not as flexible as the others.
For 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;
}
If you look closely you can see that the edge between the border and the background is not perfect. This seems to be an issue in current browsers. But it's not that noticeable when the border is small.
Using the :before pseudo-element,
CSS3's border-radius,
and some transparency is quite easy:
LIVE DEMO
<div class="circle"></div>
CSS:
.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 :before attaches to our .circle another element which you only need to make (ok, block, absolute, etc...) transparent and play with the border opacity.
use rgba (rgb with alpha transparency):
border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity
The alpha transparency variate between 0 (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)