I have want to have a background-image one frame, but i need to make the image lighter. I have tried using opacity, but then a background image from another frame shines throungh. I also have some text in the same frame, and i don't want that text to get lighter.
I write in CSS3, here is my code;
.frameContent
{
background-image: url(/image/and_02.jpg);
background-size: 100%;
vertical-align: top;
border-left: #FFFFFF 20px solid;
border-right: #FFFFFF 20px solid;
border-top: #FFFFFF 15px solid;
padding: 25px 10px 10px 10px;
height:100%;
box-shadow: 2px 2px 2px;
}
As Bappi Das said, there is no background-opacity property. But background-image can take multiple parameters. We can use this to add some white in front of the image. Unfortunately, we cannot simply specify a color, but we can specify a gradient. So if we specify a gradient with two times the same color and make that color slightly transparent using rgba, we can alter the color of an image.
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url("/image/and_02.jpg");
Do this to the container element:
yourImageContainer:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: hsla(180,0%,50%,0.25);
pointer-events: none;
}
this will put a darker/lighter mask depending on what color you chose.
Add following css to your class ()
.frameContent
{
background-image: url(/image/and_02.jpg);
background-size: 100%;
vertical-align: top;
border-left: #FFFFFF 20px solid;
border-right: #FFFFFF 20px solid;
border-top: #FFFFFF 15px solid;
padding: 25px 10px 10px 10px;
height:100%;
box-shadow: 2px 2px 2px;
opacity: 0.2;
filter: alpha(opacity=20);
}
and check if it works for you. You can also check following links for your reference
http://css-tricks.com/snippets/css/transparent-background-images/
http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html
How about create nested elements?
.frame = Plain white;
.frameContent = your partially transparent Background
<div class="frame"><div class="frameContent">My Content here</div></div>
There is no CSS property background-opacity, but you can achieve it by inserting a pseudo element (::after) behind it.
.frameContent{
position:relative;
border-left: #FFFFFF 20px solid;
border-right: #FFFFFF 20px solid;
border-top: #FFFFFF 15px solid;
padding: 25px 10px 10px 10px;
height:100%;
box-shadow: 2px 2px 2px;
}
.frameContent::after{
content: "";
background: url(/image/and_02.jpg);
background-size:cover;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Related
I have a div and I am trying to add a transparent border to it with a box-shadow such that the transparent border shows the box-shadow underneath and not the div's background color.
Here is a JSFiddle I created to showcase my problem: https://jsfiddle.net/143k7myj/.
body {
background-color: #f8f8f8;
}
div {
width: 489px;
height: 169px;
background-color: #46aae3;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
border-radius: 3px;
border: 10px solid transparent;
/* background-clip: content-box; */
}
div:hover {
border-color: white;
}
<div></div>
As you can see, when I hover over the div, the border shows with it's white color. If I don't hover over it, it show's the 'transparent' border. However, it show's the div's background colour underneath and not the box-shadow of the div that I want to achieve.
One of my attempts was to use background-clip: content-box, however, then the transparent border shows the solid background-colour of the body.
How can I have achieve a transparent border such that the box-shadow of the div is shown underneath the transparent border and not the background color of the div. Thank you.
You can achieve with Pseudo-element :before
body {
background-color: #eee;
}
div {
width: 489px;
height: 169px;
background-color: #46aae3;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.10);
border-radius: 3px;
position: relative;
/* background-clip: content-box; */margin-top: 30px;margin-left: 30px;
}
div:before {
content: "";
border: 10px solid #fff;
position: absolute;
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
opacity: 0;
border-radius: 3px;
}
div:hover:before {
opacity: 1;
}
<div></div>
Edit:
You may achieve it with pseudo element using some workaround:
body {
background-color: #ddd;
margin: 0;
padding: 10px;
}
div {
/* change the border width here */
--border-width: 10px;
width: 489px;
height: 169px;
background-color: #46aae3;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
border-radius: 3px;
margin: var(--border-width);
position: relative;
}
div::before {
content: '';
display: block;
width: calc(100% + var(--border-width) * 2);
height: calc(100% + var(--border-width) * 2);
margin: calc(var(--border-width) * -1);
position: absolute;
border-radius: inherit;
}
div:hover {
box-shadow: 0px 4px 15px transparent;
}
div:hover::before {
background-color: white;
z-index: -1;
}
<div></div>
Is it able to create a button with transparent background and a dotted border, with a custom shape?
I'm able now to do this with a background color, but when I try to to fill the inner without any color, nothing works as expected.
body{
background: #999
}
button {
height: 50px;
width: 250px;
border: dotted 1px #FFF;
border-bottom: none;
background: none;
position: relative;
}
button:after,
button:before {
content: '';
display: block;
position: absolute;
top: 100%;
width: 0;
height: 0;
border-style: solid;
}
button:after {
border-color: #fff transparent transparent transparent;
border-width: 1px 125px 0 0;
right: 1px
}
button:before {
border-color: transparent transparent #fff transparent;
border-width: 0 125px 1px 0;
left: 0
}
<body>
<button></button>
</body>
I am not so sure about a button, but you can certainly create shapes out of divs.
What you are looking for is a play with borders to create shapes.
#triangle{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 40px solid green;
}
<div id="triangle"></div>
As you can see, I created a triangle with just the borders, the trick is to understand the borders of a div. They are not straight, their ends are wedge shaped.
I think this is a good starting point for you.
I am trying to create a border like effect for the triangle. I have tried giving it a border, box shadow, neither works. Then if you do put another triangle div inside of it the outer triangle just becomes larger.
#triangle {
border-style: solid;
border-width: 25px 50px 25px 0;
border-color: transparent #000 transparent transparent;
}
Try using a pseudo-element like :after.
Here you go!
#triangle {
border-style: solid;
border-width: 25px 50px 25px 0;
border-color: transparent #000 transparent transparent;
width: 0;
position: relative;
}
#triangle:after {
content: ' ';
position: absolute;
border-style: solid;
border-width: 13px 25px 13px 0;
border-color: transparent red transparent transparent;
width: 0;
top: -13px;
left: 17px;
}
<div id="triangle">
</div>
I'm trying to make some triangles but it ain't working like I want to, look at this:
<th>Rent <div class="triangle-up"></div></th>
With this CSS:
.triangle-down {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 6px 0 6px;
border-color: #FFF transparent transparent transparent;
display: inline-flex;
}
.triangle-up {
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 5px 6px;
border-color: transparent transparent #FFF transparent;
display: inline-flex;
}
th {
text-align: left;
text-shadow: -1px -1px #000000;
background-image: -webkit-linear-gradient(top, #222222, #161717);
height: 20px;
padding: 7px;
}
This is the result:
As you can see, when using triangle-up it is not aligned with the text, which I want it to.
What can I do?
How about adding vertical-align: middle; to both the triangle-up and triangle-down selectors?
Ok the tags you are using in incorrect. Since you are using display:inline-flex I am assuming you dont care about earlier ie versions.
The best way to vertically align something is
position:absolute; top:50%; transform:translateY(-50%);
Check out this fiddle
Attempting to use a custom hex color for my css triangle (border). However since it uses border properties I am unsure how to go about doing this. I would like to steer clear of javascript and css3 simply because of compatibility. I am trying to have the triangle have a white background with a 1px border (around the angled sides of the triangle) with color #CAD5E0. Is this possible? Here's what I have so far:
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-color: transparent transparent transparent #CAD5E0;
border-style: solid;
border-width: 10px;
}
My fiddle: http://jsfiddle.net/4ZeCz/
You actually have to fake it with two triangles....
.container {
margin: 15px 30px;
width: 200px;
background: #fff;
border: 1px solid #a00;
position: relative;
min-height: 200px;
padding: 20px;
text-align: center;
color: #fff;
font: bold 1.5em/180px Helvetica, sans-serif;
text-shadow: 0 0 1px #000;
}
.container:after,
.container:before {
content: '';
display: block;
position: absolute;
left: 100%;
width: 0;
height: 0;
border-style: solid;
}
.container:after {
top: 10px;
border-color: transparent transparent transparent #fdd;
border-width: 10px;
}
.container:before {
top: 9px;
border-color: transparent transparent transparent #a00;
border-width: 11px;
}
Updated Fiddle here
I know you accept that but check this one also with less css:
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
right:-7px;
width: 10px;
height: 10px;
background: #FFFFFF;
border-right:1px solid #CAD5E0;
border-bottom:1px solid #CAD5E0;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
http://jsfiddle.net/4ZeCz/3/
I think this is a simpler one using clip-path:
.container {
width: 150px;
min-height: 150px;
background: #ccc;
padding: 8px;
padding-right: 6%;
display: inline-block;
clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);
}
<div class="container">
test content
</div>
Another way to accomplish this, especially for somebody who needs this to work with equilateral or even scalene triangles like I did, is to use filter: drop-shadow(...) with multiple values and no blur radius. This has the added benefit of not needing multiple elements, or access to both :before and :after (I was trying to accomplish this with :after content that was inline, so wanted to avoid absolute positioning too).
For the above case, the :after's CSS could look like this (fiddle):
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
border-color: transparent transparent transparent #fff;
filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}
<div class="container">
Test Container
</div>
I think there are some limitations or weirdness, though:
No support in IE11 (though seems fine in FF, Chrome, and Edge)
I'm not quite sure why .5px for the <offset-y> value in the second drop-shadow() above appears more like 1px than 1px would have, though I imagine it's related to trigonometry (though at least on my monitor I see no difference between the actual trig-based values or .5px or even .1px for that matter).
Borders greater than 1px (well, their appearance that way) don't seem to work well. Or at least I haven't found the solution, though see below for a less-than-optimal way to go a little bigger. (I would think the documented-but-unsupported 4th parameter (<spread-radius>) of drop-shadow() might be what I'm really looking for instead of multiple filter values, but adding it in just broke things entirely.) Here you can see what starts to happen when going beyond 1px (fiddle):
.container {
background-color: #eee;
padding: 1em;
}
.container:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20.4px 10px 0 10px;
border-color: yellow transparent transparent transparent;
margin-left: .25em;
display: inline-block;
filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}
<div class="container">
Test Container
</div>
Notice the funniness that the first one (green) gets applied once, but the second one (red) is getting applied both to the yellow triangle created via border as well as the green drop-shadow(), and the last one (blue) gets applied to all of the above. (Perhaps that's also related to the .5px appearance thing).
But I guess you can take advantage of these drop-shadows building on each other if you need something wider-looking than 1px, by changing them to something like the following (fiddle):
filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);
where the very first one has a blur-radius set (2.5px in this case, though the result appears multiplied), and all the rest have blur at 0. But this will only work for the same color on all sides, and it results in some rounded-looking corners as well as quite rough edges the bigger you go.
.triangle{
position: absolute;
width:0px;
height:0px;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 72px solid #DB5248;
}
.triangle:after{
position: relative;
content:"!";
top:8px;
left:-8px;
color:#DB5248;
font-size:40px;
}
.triangle:before{
content:".";
color: #DB5248;
position: relative;
top:-14px;
left:-43px;
border-left: 41px solid transparent;
border-right: 41px solid transparent;
border-bottom: 67px solid white;
}