I have an image which covers an entire element using something like #myDiv {background-image: url("../images/background.jpg "); background-repeat: no-repeat; background-size: cover; background-position: center;}
Next, I would like to gray out the left side of the image similar to that shown below.
How can this be accomplished? It doesn't need to look exactly the same, but only similar.
You may use linear-gradients since you use background-image
html {
min-height: 100%;
background:
linear-gradient(to right, rgba(0, 0, 0, 0.75) 60px, transparent 60px), /* the gray, reset opacity to your needs : here 0.75 */
linear-gradient(to right, transparent 60px, red 60px, red 64px, transparent 64px), /* a red line ? */
url(http://lorempixel.com/200/200/fashion) /* and finally, image laying underneath gradients */;
background-size:
auto,
auto,
auto 100%;
}
you could play with a pseudoelement and a RGBA background, e.g.
#mydiv {
background: url(http://www.psdgraphics.com/file/cherry-wood.jpg);
width: 250px;
height: 400px;
position: relative;
}
#mydiv:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 30%;
background: rgba(255,255,255, .3);
}
Codepen: http://codepen.io/anon/pen/OyVYwe
Or you could simply add a transparent left border to the element, e.g.
box-sizing: border-box;
background-origin: border-box;
border-left: 50px rgba(255,255,255, .3) solid;
Codepen: http://codepen.io/anon/pen/ZbGNqL
Or you could use an inset box-shadow
box-shadow: 80px 0 0 0px rgba(255, 255, 255, .2) inset;
Codepen: http://codepen.io/anon/pen/avOrXE
Please do not vote for this answer as it was user3791372's comment (yet not yet an answer) and not mine. If you think it is the right approach, please provide a comment why you think so.
http://codepen.io/anon/pen/MaaWMB
<div id="mydiv">
<div id="sidebar"></div>
</div>
#mydiv {
background: url(http://www.psdgraphics.com/file/cherry-wood.jpg) bottom;
width: 230px;
height: 400px;
}
#sidebar {
background-color: white;
opacity: 0.2;
filter: alpha(opacity=20);
width: 50px;
height: 100%;
}
Related
Currently I have markup for a dotted border line since border is pretty crappy when it comes to making actual dotted borders. my markup is the following
.dotted-line {
background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
background-repeat: repeat-x;
background-size: 6px 2px;
height: 9px;
width:100%;
margin: 20px 0 0 0;
}
<div class="dotted-line"></div>
However the problem I am having is I want to be able to make the same sort of border but vertical instead of horizontal. I have set background-repeat: repeat-x; but then I just get one solid line. Is it possible to do a vertical radial-gradient?
I played around with your horizontal border and got this vertical dotted border. Take a look at background-repeat: repeat-y;, it's now vertical and the background-size has also changed.
I changed the width and height to get a decent amount of space to play in.
.dotted-line {
background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
background-repeat: repeat-y;
background-size: 2px 6px;
height: 100px;
width: 9px;
margin: 20px 0 0 0;
}
<div class="dotted-line"></div>
Like this ? You forgot to change the dimension. Sorry if that's not what you asked.
.dotted-line {
background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
background-repeat: repeat-y;
background-size: 2px 6px;
height: 100vh;
width:10px;
margin: 20px 0 0 0;
}
<div class="dotted-line"></div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I want to get the following style in my div border in both sides:
1. if the height of the div is X.
2. I want 4px from to top to start some gradient color.
3. i want 4px from the bottom to start some gradient color.(same color)
so it will look like this:
|4px transparent
|start white to black gradient
|
|End the black here
|start black to white gradient (the other direction)
|
|
|end the white here
|4px transparet
All that you needed to do was create the gradient and assign it to the border-image property. This is well supported in modern browsers and can be used unless you wish to support IE10-.
div {
height: 100px;
width: 200px;
border-style: solid;
border-width:0px 4px;
border-image: linear-gradient(to bottom, transparent 4px, red 4px, orange 50%, red calc(100% - 4px), transparent calc(100% - 4px));
border-image-slice: 1;
border-image-repeat: stretch;
background: beige;
}
<div>Some div</div>
Here's how to interpret the linear-gradient that was used in the above snippet:
linear-gradient(to bottom, /* the direction of the gradient */
transparent 4px, /* make it transparent till 4px from start */
red 4px, /* start with the required color exactly at 4px */
orange 50%, /* make it change from red to orange at 50% - half distance */
red calc(100% - 4px), /* change it back from orange to red at 4px before 100% */
transparent calc(100% - 4px) /* leave the last 4px as transparent again */
);
You can achieve this with some styling tricks
Firstly, instead of borders we use positioned pseudo-elements (left/right since you indicated height as the determining factor).
We use 4px top and bottom padding to create the transparent sections (and background-clip so the gradient background doesn't extend into the padding).
Then it's a simple linear gradient.
*,
::before,
::after {
box-sizing: border-box;
}
body {
background: pink;
}
div {
height: 90vh;
width: 60%;
margin: 5vh auto;
background: #c0ffee;
position: relative;
}
div::before,
div::after {
content: '';
position: absolute;
top: 0;
height: 100%;
padding: 4px 0;
width: 2px;
background-clip: content-box;
background-image: linear-gradient(to bottom, white, black 50%, white);
}
div::before {
left: -2px;
}
div::after {
right: -2px;
}
<div>
</div>
More complex gradient using calc and no additional clipping / padding
div::before,
div::after {
content: '';
position: absolute;
top: 0;
height: 100%;
width: 2px;
background-clip: content-box;
background-image: linear-gradient(to bottom,
transparent,
transparent 4px,
white 4px,
black 50%,
white calc(100% - 4px),
transparent calc(100% - 4px),
transparent);
}
*,
::before,
::after {
box-sizing: border-box;
}
body {
background: pink;
}
div {
height: 90vh;
width: 60%;
margin: 5vh auto;
background: #c0ffee;
position: relative;
}
div::before,
div::after {
content: '';
position: absolute;
top: 0;
height: 100%;
width: 2px;
background-clip: content-box;
background-image: linear-gradient(to bottom,
transparent,
transparent 4px,
white 4px,
black 50%,
white calc(100% - 4px),
transparent calc(100% - 4px),
transparent);
}}
div::before {
left: -2px;
}
div::after {
right: -2px;
}
<div>
</div>
I need to create an underline effect with a bottom border that is smaller than the h2 title's width. Usually I don't upload images but I figure it might help explaining the question a bit further:
You could use a pseudo-element for this. (example)
.pseudo_border {
position:relative;
display:inline-block;
}
.pseudo_border:after {
content:'';
position:absolute;
left:0; right:0;
top:100%;
margin:10px auto;
width:50%;
height:6px;
background:#00f;
}
Just absolutely position a pseudo-element relative to the parent element. Position it 100% from the top and use a combination of left:0; right:0 and a margin of auto for horizontal centering. Modify the height/width of the element accordingly and change the margin-top for the spacing.
Other approach :
Box shadow with a negative spread radius :
body{text-align:center;}
h2{
font-size:40px;
color:#409FB3;
display:inline-block;
height:50px;
box-shadow: 0 25px 0 -23px #5CC7A8;
}
<h2>Some title</h2>
Note : you need to make sure that - spread-radius x2 < height otherwise the box-shadow will have 0 height and disapear.
You can also do this using linear-gradient. In this method, a small background image is created using gradients such that it is transparent for the first and last 25% while the rest 50% has the color (thus making it look like it is 50% of the actual h2 text). This background is then positioned at the bottom of the element to make it look like a bottom border. The size of the border can be varied by modifying the background-size.
The effect would hold good even when the amount of text within the h2 varies. The main drawback however is the relatively poor browser support for gradients as compared to the pseudo-element or the box-shadow approach.
Note: The use of the script in the answer is only for avoiding browser prefixes :)
h2{
display: inline-block;
text-align: center;
padding: 10px 10px 15px; /* bottom padding should be higher to make up for pseudo border height */
background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%);
background-size: 100% 5px;
background-position: 0% 100%;
background-repeat: no-repeat;
}
.semitransparent{
background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%), linear-gradient(90deg, transparent 0%, rgba(50,50,50,0.25) 0%);
background-size: 100% 5px, 100% 100%;
background-position: 0% 100%, 0% -5px;
background-repeat: no-repeat;
}
.colored{
background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%), linear-gradient(90deg, transparent 0%, aliceblue 0%);
background-size: 100% 5px, 100% 100%;
background-position: 0% 100%, 0% -5px;
background-repeat: no-repeat;
}
/* Just for demo */
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
font-family: Calibri, Tahoma;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Some Text</h2><br/>
<h2 class='semitransparent'>Some Lengthy Text</h2><br/>
<h2 class='colored'>Some more examples yay!!</h2>
You could use a sort of 'fake' border by simply wrapping a div around it and making a border div after the title
JSFiddle
HTML
<div id="border-wrapper">
<h2>My address</h2>
<div id="border"></div>
</div>
CSS
#border-wrapper{
position:relative;
display:inline-block;
}
#border{
position: relative;
width: 50%;
height: 2px;
background-color: blue;
margin: 0 auto;
}
Almost all of the solutions I've seen for this effect in the past have relied on positioning - but using display: flex we can achieve it pretty easily. The below is an example of a heading, but it can be used on any element. Just bear in mind the nature of flex-direction: column will stack any child elements.
HTML
<h3 class="heading">Hey presto! We have an underline.</h3>
CSS
.heading {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.heading:after {
content: '';
border-bottom: 1px solid #ccc;
padding-top: 10px;
width: 50px;
}
Note you may have to add vendor prefixes for flex depending on browser support (mostly previous versions of IE, of course) https://caniuse.com/#search=flex
h2 ::after {
background: #f1991b none repeat scroll 0 0;
content: "";
display: block;
height: 2px;
margin-top: 15px;
width: 50px;
}
<style>
.main{
text-align:center;
}
.title{
font-weight: 300;
display: inline-block;
padding-bottom: 15px;
position: relative;
}
.title::after {
content: "";
position: absolute;
width: 50%;
height: 1px;
bottom: 0;
left: 0;
border-bottom: 3px solid #ff5533;
right: 0;
margin: 0 auto;
}
</style>
<div class="main">
<h1 class="title">
Your Title
</h1>
</div>
I'm not sure what is specific name for this shape but can I just called it "half Parallelogram" ? I want make this shape purely using CSS/CSS3. Any help? or tutorial?
You can do it using pseudo-elements like below. The approach is to cut out a triangle shape from the left-bottom and top-right of the box. This method can be used with either a solid color an image inside the shape as long as the body background is a solid color. When the body background is a non-solid color this approach will not work because the border hack needs a solid color background.
The advantage of this method is that it can support cuts of different angles at each side (like in the question where the hypotenuse of the triangular cut on either side are not parallel to each other).
div {
background: red;
width: 200px;
height: 100px;
position: relative;
}
div:before {
position: absolute;
height: 0;
width: 0;
content: ' ';
border: 20px solid white;
border-color: transparent transparent white white;
border-width: 20px 0px 0px 15px;
left: 0;
top: 80px;
}
div:after {
position: absolute;
height: 0;
width: 0;
content: ' ';
border: 20px solid white;
border-color: white white transparent transparent;
left: 170px;
top: 0px;
}
.with-img {
background: url(http://lorempixel.com/100/100);
}
<div></div>
<br>
<div class="with-img"></div>
Sample 2: You can also achieve a similar effect using gradients. Just 1 gradient is enough to produce a cut of similar angle on both sides. If different angles are required then two gradients should be used. However the multiple gradient approach mentioned here will not work when the body background is a non-solid color.
div {
width: 200px;
height: 100px;
position: relative;
}
.with-single-gradient {
background: linear-gradient(45deg, transparent 5%, yellowgreen 5%, yellowgreen 90%, transparent 90.5%);
}
.with-single-gradient.image {
background: linear-gradient(45deg, white 5%, transparent 5%, transparent 90%, white 90.5%), url(http://lorempixel.com/100/100);
}
.with-multiple-gradient.image {
background: linear-gradient(45deg, transparent 0%, transparent 90%, white 90%), linear-gradient(60deg, white 10%, transparent 5%, transparent 100%), url(http://lorempixel.com/100/100);
}
<div class='with-single-gradient'></div>
<br>
<div class='with-single-gradient image'></div>
<br>
<div class='with-multiple-gradient image'></div>
Sample 3: This can also be created using SVG and is the best method yet. All that it requires is just a single path element which creates the required shape.
<svg viewBox='0 0 100 60' width='200px' height='120px'>
<path d='M0,0 80,0 100,16 100,60 10,60 0,54z' fill='yellowgreen' />
</svg>
Tested on Chrome v24, Firefox v19, Safari v5.1.7 (on Windows) and IE v10. They are older versions but should work in the latest versions also.
Note: IE versions less than 10 do not support gradients as mentioned in this SO thread.
there's no thing as straight radius, but here you have some tutorials. For weird shapes, you need to use a combination of shape and negative space, basically using figures with the same color of the background . The good news is you could use "transparent" as color, so you can "fake" this figures in an easy way. See tutorials Shapes of CSS or yuo can use a generator like CSS Shape Generator or CSS Shape Generator 2 but they will highly depend on your needs. Personally, I'd use a BG image and be a happy camper
to make this shape you have to use pseudo class.
and i hope it will help you
div { display: inline-block; margin: 20px; float: left; }
shape {
width: 208px;
height: 130px;
background: red;
position: relative; }
shape:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-right: 29px solid #fff;
width: 179px;
height: 0; }
shape:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #fff;
width: 42px;
height: 0; }
demo
2 gradients and background-size can be used too :
div {
width: 1440px;
height: 590px;
background:
linear-gradient(45deg, transparent 80px, #FF0000 80px) left no-repeat,
linear-gradient(-135deg, transparent 160px, #FF0000 160px) top right no-repeat;
background-size: 50% 100%;
}
<div>
</div>
1 gradients and calc() can be used too :
div {
width: 1440px;
height: 590px;
background:
linear-gradient(45deg, transparent 80px, #FF0000 80px, #FF0000 calc( 100% - 160px), transparent calc( 100% - 160px) );
}
<div>
</div>
Related to duplicate question https://stackoverflow.com/questions/36932294/how-can-i-create-the-object-in-picture-below-using-css-border-radius :
div {
width:980px;
height:460px;
background:linear-gradient(140deg,transparent 200px, #FFCB05 200px) left no-repeat,
linear-gradient(-40deg,transparent 80px, #FFCB05 80px) top right no-repeat;
background-size:50% 100% ;
}
<div>
div shape
</div>
image
<img src="http://i.stack.imgur.com/M48zP.png" />
For the second shape use this:
border-bottom-left-radius:50px;
border-top-right-radius:50px;
Check JSFiddle Demo
Edit:
Question is edited and second shape has been removed.
You can add an element with overflow: hidden;
skew transform the parent by desired angle. Unskew the pseudoelement by the negative of that angle.
Using this approach, you can also add images to background.
div {
height: 100px;
width: 220px;
overflow: hidden;
position: relative;
-webkit-transform: skewX(45deg);
-moz-transform: skewX(45deg);
transform: skewX(45deg);
}
div:before {
content: '';
position: absolute;
left: 10px;
height: 100px;
width: 200px;
background: red;
-webkit-transform: skewX(-45deg);
-moz-transform: skewX(-45deg);
transform: skewX(-45deg);
}
<div></div>
FIDDLE
FIDDLE (with image)
Is it possible to make only part of div transparent like an amount of space in div.
For example, you select 100px from top of div and the top 100px have an opacity set?
How would I do it?
You can do a couple of things:
Try a background image where half is transparent and the other half is not.
Use a CSS gradient in such a way that half is transparent and the other is not. Ex:
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */
Use multiple divs where one has transparent BG and the other does not. Ex:
<div>
<div id="transparent" style="background: transparent"></div>
<div id="not-transparent" style="background: #000"></div>
</div>
I'm sure there are other ways, but those are the first three that come to mind.
Good luck.
Either you create the right background-image using a semi-transparent PNG (transparent at top, opaque at bottom for example) ; either you use two sub-divs, each having its own background-color (one of which with rgba for the transparent part).
You can use css3 properties along with pseudo elements to create this effect:
The trick is to draw a box with :before or :after pseudo element. We can apply background property for inner semi-transparent background. While for outer background we can use a large box-shadow value.
HTML:
<div class="box"></div>
CSS:
.box {
position: relative;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
position: relative;
margin: 30px 20px;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
<div class="box"></div>