This question already has answers here:
CSS Zigzag Border with a Textured Background
(4 answers)
Closed 6 years ago.
I am trying to get this effect along the baseline of my header element.
What is the best way to go about it? Is there any way to do it without images (maybe SVG)?
A way I reckon this could be accomplished pretty nicely is using a repeat-x background image of a white square on an absolutely positioned pseudo element. However, that uses images and I'd love to be able to avoid that.
Here is solution. It's called zig-zag border.
http://jsfiddle.net/justinmc/QqnD3/
<div class="container">
<h1>Content Here</h1>
</div>
.container {
position: relative;
padding: 8px 8px 32px 8px;
background: #dddccf;
}
.container:after {
background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
background-position: left-bottom;
background-repeat: repeat-x;
background-size: 32px 32px;
content: " ";
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 32px;
}
credits
https://cocreate.localmotors.com/blog/post/zig-zag-borders-in-css/1205/
Related
This question already has answers here:
Weird effect when applying transparent border over an element with a gradient background
(7 answers)
Closed 25 days ago.
What is the reason for the defect in which the background color is superimposed on the border in top side and in 1 case goes beyond in bottom side?
.scaledSquare{
position: absolute;
left: 50px;
top: 50px;
height: 97px;
width: 97px;
border: none;
background: linear-gradient(315deg, #2D8FDF 75%, #2D8FDF12 76%, #2D8FDF12 100%);
border-radius: 12px;
border: 1px solid #FFFFFF12;
box-sizing: border-box;
transform: rotate(45deg);
}
.scaledSquare1{
left: 190px;
top: 190px;
background: linear-gradient(315deg, #2D8FDF 45%, #2D8FDF12 45%, #2D8FDF12 100%);
}
<div class="scaledSquare"></div>
<div class="scaledSquare1 scaledSquare"></div>
The reason you are getting the clipping artefacts is most likely due to your background being smaller than the border box. Setting the background-origin to border-box on both elements should fix the issue.
This question already has answers here:
How to create multi-color border with CSS?
(3 answers)
Closed last month.
I want to fill the top 50% of a border with a different color. How can I do it in CSS?
I want to fill the top 50% of a border with a different color. How can I do it in CSS? I tried a lot but didint work.
use gradient in border with image
.container {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding: 2px;
}
.container > div { background: #fff; height: 100px }
<div class="container">
<div>text inside container</div>
</div>
Use pseudo element ::after.
div {
width: 100px;
height: 50px;
position: relative;
background: red;
}
div:after {
content: " ";
position: absolute;
bottom: 50px;
left: 0px;
width: 50px;
height: 4px;
background: green;
}
<div>fff</div>
This question already has answers here:
Is it possible to have two background colors for a single html element? [duplicate]
(3 answers)
Closed 1 year ago.
I have managed to achieve what I'm trying to do from top to bottom using the following:
/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.test {
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(blue, blue);
background-size: 100% 50%;
background-repeat: no-repeat;
}
<div class="test"></div>
Is there a way to fill the div from bottom to top so that the lower half is blue and the other half is white in this example?
You can set background: blue as the first property and change the linear-gradient to the values of white, white to invert the declaration.
/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.test {
background: blue;
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(white, white);
background-size: 100% 50%;
background-repeat: no-repeat;
}
<div class="test"></div>
is this what you mean to do? You can change the background-size: 100% 70% to play with how far you want it to feed into the other space.
.test {
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(white, blue);
background-size: 100% 70%;
background-repeat: no-repeat;
background-position: bottom;
}
<div class="test">
</div>
In my css file i have one rule: two add two background images before and after text element. Before i used two images and all was ok. But now i use sprites: so i need to get area of big image and post it to element (background-position) but i have one trouble: if i set background position: i could not stuck to it position like left center and right center:
background: url(../images/png/elements.png) no-repeat -5px -152px, url(../images/png/elements.png) no-repeat -5px -104px;
how could i float first part to left and second to right of the element?
before was:
background: url(../images/png/mail.png) no-repeat left center, url(../images/png/edit.png) no-repeat right center;
is it real to do?
also: i use it with :hover
I'm afraid that it is not possible to limit the visible area of sprite images unless the size of the element itself is limited.
However, perhaps you could assign the background images to ::before and ::after pseudo-elements which are positioned to the left/right side of the parent box properly (either by float or absolute positioning).
So that you could handle the position of each icon interdependently.
For instance:
.box:before, .box:after {
content: "";
display: inline-block; /* or position these elements by floats, etc. */
width: 48px; /* for instance */
height: 48px; /* for instance */
}
.box:before {
background: url(../images/png/elements.png) no-repeat -5px -152px;
}
.box:after {
background: url(../images/png/elements.png) no-repeat -5px -104px;
}
<div class="box"></div>
The left and right you are using belong to background-position. The pixel definitions are overriding them.
You should separate the images to two different elements.
Don't use Shorthand for this (especially in the position property):
try with something like:
div {
width: 100%;
height: 190px;
border: 1px solid red;
background: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
background-position: left top, right bottom;
background-repeat: no-repeat;
}
<div></div>
Edit: Example with pixels, zero and %.
div {
width: 100%;
height: 190px;
border: 1px solid red;
background-image: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
background-position: 0 0, 100% -1215px;
background-repeat: no-repeat;
}
<div></div>
I'm trying to achieve the background effect on this website:
http://mountaintheme.com/themeforest/mountain/home.html
The background pictures seem to be covered in a dotted overlay sort of thing.
Is there a way to create this effect with CSS only?
A little bit late, but here is a solution that uses just CSS to create the dotted overlay using a pattern created with radial-gradient.
.image {
width: 800px;
height: 600px;
position: relative;
background: url('https://upload.wikimedia.org/wikipedia/commons/6/6e/Rathong_from_Zemathang2.jpg');
background-size: cover;
}
.image:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(127, 127, 127, 0.5);
background-image: radial-gradient(black 33%, transparent 33%);
background-size: 2px 2px;
}
<div class="image"></div>
Here is my way of doing this https://jsfiddle.net/soumyabg/wefLyrhp/
Very minimal and pure CSS solution. The catch is that the actual image is the background of <a> tag (with display:block), and <img> is the dot overlay (its size should be defined in the CSS).
HTML:
<div class="image-container">
<a class="dotm" href="#">
<img src="http://s14.directupload.net/images/111129/44ga9qid.png" alt="dotm" title="dotm" class="dotm-overlay">
</a>
</div>
CSS:
.dotm {
display: block;
background: url(https://media.giphy.com/media/SOoaHiWfwZyfu/giphy.gif) no-repeat; /* change with the image URL */
background-size: cover;
}
.dotm-overlay {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
width: 100%;
height: 400px; /*height of the image*/
}
Output:
You can implement this using only css background properties:
background-image: radial-gradient(black 50%, transparent 50%);
background-size: 4px 4px;
Here's one way of doing it.
<body>
<div id="overlay">
image
</div>
<div id="page">
<div id="content">
....
Basically, you add a container outside your page container.
Add a fixed position for it, and add a pseudo element :after to it and give it a background image.
Assume you have an object with "bg" id, this css class will add small dotted background:
#bg {
background-image: radial-gradient(#000 10%, transparent 10%);
background-size: 15px 15px;
background-color: #EEE;
}
You can change dots color by replace black (#000) with any color, and background color by replacing #EEE.
To adjust dots size, play with 10% and 15px.