When you make the browser wider, you will notice that the right and left side of the images is fading out in black.
I need to apply the same feature to my gallery but have no idea. I have found this >> link as well but it's just a horizontal line not sure how to attach it to both sides of images and make the same result as the link.
In the comments, ultranaut mentioned that I could apply the filter on images. Still, the question is if I use it on the images how to adjust the size, because browser windows might be in different sizes and the pictures side should be adjustable to every browser size.
Here's one way to skin this cat:
HTML:
<div class="frame">
<div class="fade"></div>
<img src="picture.jpg" alt=""/>
</div>
CSS:
.frame {
width: 315px;
height: 165px;
margin: 20px;
position: relative;
}
.fade {
height: 100%;
width: 100%;
position:absolute;
background: -webkit-linear-gradient(left,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,0.65) 100%
);
}
Personally, I'm not a huge fan of the (semantically) unnecessary fade div, and I'm sure there's probably a more clever way to do the same effect without it, but it'll work.
I only included the webkit prefixed rule, if you want to get legit you'd need to add the other vendor prefixes.
Fiddle here.
Update:
If the image is just serving as background—as is the case in your linked example—the gradient and image can both be set on the css for the containing element:
.frame {
width: 315px;
height: 165px;
margin: 20px;
background-image: url(picture.jpg);
background-image: -webkit-linear-gradient(left,
rgba(0,0,0,0.9) 0%,
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,0.9) 100%
),
url(picture.jpg);
}
...
<div class="frame">
Content...
</div>
Less muss, less fuss: new-style fiddle with vendor prefixes and everything.
Using just CSS3, try a Vignette.
Verbatim code:
HTML:
<p class="vignette"><img src="image.jpg"></p>
CSS:
p.vignette {
position: relative;
}
p.vignette img {
display: block;
}
p.vignette:after {
-moz-box-shadow: inset 0 0 10em #666;
-webkit-box-shadow: inset 0 0 10em #666;
box-shadow: inset 0 0 10em #666;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
content: "";
}
Related
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)
I have been looking at how to do this "inverse triangular" background using css. I am referring to the white diagonal parts on the bottom, on top of the background (fixed) image.
The most I've gotten is to shapes, which aren't apparently a good solution having in mind that it is for a responsive design. I don't care if when the window is narrower there is just one diagonal, as long as there is no horizontal scroll. But shapes and its absolute width mess that up.
I apologize if this is a silly/common/often asked thing. I haven't been able to find it, most probably due to lack of technical term. Thank you very much :)
EDIT: The page keeps scrolling down! There is content below the diagonals/triangles. The triangles are not the bottom of the page.
Here's the fiddle with something similar and responsive: http://jsfiddle.net/BLbu5/
HTML:
<body>
<div id="triangle-holder">
<div id="triangle-1"></div>
<div id="triangle-2"></div>
</div>
</body>
CSS:
body {
background-image: url('http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg');
margin: 0;
padding: 0;
}
#triangle-1 {
width: 0;
height: 0;
border-bottom: 30vw solid red;
border-right: 100vw solid transparent;
float: left;
}
#triangle-2 {
width: 0;
height: 0;
border-bottom: 30vw solid red;
border-left: 100vw solid transparent;
}
#triangle-holder {
position: absolute;
bottom: 0;
}
Read about the technique here: https://css-tricks.com/examples/ShapesOfCSS/
Hope it works!
You'd achieve the same result with a 'background img' with following styling:
#bg{
position: fixed;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index:-1;
-webkit-clip-path: polygon(
0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
);
-moz-clip-path: polygon(
0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
);
-ms-clip-path: polygon(
0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
);
clip-path: polygon(
0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
);
}
and in html you would add:
<img id = 'bg' src = 'path.jpg'> </img>
I would recommend using html canvas and either a rectangle with a triangle clip region or two inverted right-angle triangles positioned against the bottom edges.
This would require javascript.
Other than that you could use some CSS tricks like this: http://jsfiddle.net/pgLP2/
This would not be very elegant as it would require manual handling positions and dimension.
HTML:
<div class="content">Some Content</div>
<div id="toptriangle"></div>
CSS:
body {
color: white;
background-color: #666666;
}
.content {
text-align: center;
}
#toptriangle {
position: relative;
width: 0px;
height: 0px;
top: 100px;
left: -10px;
border-right: 500px solid white;
border-top: 300px solid transparent;
border-left: 500px solid white;
border-bottom: 400px solid white;
}
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>
Is there any way to limit the length of a border. I have a <div> that has a bottom border, but I want to add a border on the left of the <div> that only stretches half of the way up.
Is there any way to do so without adding extra elements on the page?
CSS generated content can solve this for you:
div {
position: relative;
}
/* Main div for border to extend to 50% from bottom left corner */
div:after {
content: "";
background: black;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 1px;
}
<div>Lorem Ipsum</div>
(note - the content: ""; declaration is necessary in order for the pseudo-element to render)
#mainDiv {
height: 100px;
width: 80px;
position: relative;
border-bottom: 2px solid #f51c40;
background: #3beadc;
}
#borderLeft {
border-left: 2px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}
<div id="mainDiv">
<div id="borderLeft"></div>
</div>
The ::after pseudo-element rocks :)
If you play a bit you can even set your resized border element to appear centered or to appear only if there is another element next to it (like in menus). Here is an example with a menu:
#menu > ul > li {
position: relative;
float: left;
padding: 0 10px;
}
#menu > ul > li + li::after {
content:"";
background: #ccc;
position: absolute;
bottom: 25%;
left: 0;
height: 50%;
width: 1px;
}
#menu > ul > li {
position: relative;
float: left;
padding: 0 10px;
list-style: none;
}
#menu > ul > li + li::after {
content: "";
background: #ccc;
position: absolute;
bottom: 25%;
left: 0;
height: 50%;
width: 1px;
}
<div id="menu">
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</div>
With CSS properties, we can only control the thickness of border; not length.
However we can mimic border effect and control its width and height as we want with some other ways.
With CSS (Linear Gradient):
We can use linear-gradient() to create a background image(s) and control its size and position with CSS so that it looks like a border. As we can apply multiple background images to an element, we can use this feature to create multiple border like images and apply on different sides of element. We can also cover the remaining available area with some solid color, gradient or background image.
Required HTML:
All we need is one element only (possibly having some class).
<div class="box"></div>
Steps:
Create background image(s) with linear-gradient().
Use background-size to adjust the width / height of above created image(s) so that it looks like a border.
Use background-position to adjust position (like left, right, left bottom etc.) of the above created border(s).
Necessary CSS:
.box {
background-image: linear-gradient(purple, purple),
// Above css will create background image that looks like a border.
linear-gradient(steelblue, steelblue);
// This will create background image for the container.
background-repeat: no-repeat;
/* First sizing pair (4px 50%) will define the size of the border i.e border
will be of having 4px width and 50% height. */
/* 2nd pair will define the size of stretched background image. */
background-size: 4px 50%, calc(100% - 4px) 100%;
/* Similar to size, first pair will define the position of the border
and 2nd one for the container background */
background-position: left bottom, 4px 0;
}
Examples:
With linear-gradient() we can create borders of solid color as well as having gradients. Below are some examples of border created with this method.
Example with border applied on one side only:
.container {
display: flex;
}
.box {
background-image: linear-gradient(purple, purple),
linear-gradient(steelblue, steelblue);
background-repeat: no-repeat;
background-size: 4px 50%, calc(100% - 4px) 100%;
background-position: left bottom, 4px 0;
height: 160px;
width: 160px;
margin: 20px;
}
.gradient-border {
background-image: linear-gradient(red, purple),
linear-gradient(steelblue, steelblue);
}
<div class="container">
<div class="box"></div>
<div class="box gradient-border"></div>
</div>
Example with border applied on two sides:
.container {
display: flex;
}
.box {
background-image: linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(steelblue, steelblue);
background-repeat: no-repeat;
background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
background-position: left bottom, right top, 4px 0;
height: 160px;
width: 160px;
margin: 20px;
}
.gradient-border {
background-image: linear-gradient(red, purple),
linear-gradient(purple, red),
linear-gradient(steelblue, steelblue);
}
<div class="container">
<div class="box"></div>
<div class="box gradient-border"></div>
</div>
Example with border applied on all sides:
.container {
display: flex;
}
.box {
background-image: linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(steelblue, steelblue);
background-repeat: no-repeat;
background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
background-position: left bottom, left bottom, right top, right top, 4px 4px;
height: 160px;
width: 160px;
margin: 20px;
}
.gradient-border {
background-image: linear-gradient(red, purple),
linear-gradient(to right, purple, red),
linear-gradient(to bottom, purple, red),
linear-gradient(to left, purple, red),
linear-gradient(steelblue, steelblue);
}
<div class="container">
<div class="box"></div>
<div class="box gradient-border"></div>
</div>
Screenshot:
for horizontal lines you can use hr tag:
hr { width: 90%; }
but its not possible to limit border height. only element height.
Another way of doing this is using border-image in combination with a linear-gradient.
div {
width: 100px;
height: 75px;
background-color: green;
background-clip: content-box; /* so that the background color is not below the border */
border-left: 5px solid black;
border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
border-image-slice: 1;
}
<div></div>
jsfiddle: https://jsfiddle.net/u7zq0amc/1/
Browser Support:
IE: 11+
Chrome: all
Firefox: 15+
For a better support also add vendor prefixes.
caniuse border-image
Borders are defined per side only, not in fractions of a side. So, no, you can't do that.
Also, a new element wouldn't be a border either, it would only mimic the behaviour you want - but it would still be an element.
This is a CSS trick, not a formal solution. I leave the code with the period black because it helps me position the element. Afterward, color your content (color:white) and (margin-top:-5px or so) to make it as though the period is not there.
div.yourdivname:after {
content: "";
border-bottom: 1px solid grey;
width: 60%;
display: block;
margin: 0 auto;
}
Article about this issue: https://www.steckinsights.com/shorten-length-border-bottom-pure-css/
Another solution is you could use a background image to mimic the look of a left border
Create the border-left style you require as a graphic
Position it to the very left of your div (make it long enough to handle roughly two text size increases for older browsers)
Set the vertical position 50% from the top of your div.
You might need to tweak for IE (as per usual) but it's worth a shot if that's the design you are going for.
I am generally against using images for something that CSS inherently provides, but sometimes if the design needs it, there's no other way round it.
You can define one border per side only. You would have to add an extra element for that!