I would like to create HTML/CSS (with no image file) button of the box with slash lines decoration.
Attached is the sample image.
I've seen the CSS tricks to draw diagonal line, but couldn't find the one for this kind of multiple diagonal lines.
Can anyone help me on this?
Just change the angle :
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
Source
Possibly you could use a repeating CSS gradient background and then have an inner div with the blue background to mask out the diagonal lines.
Related
Ignoring the basketball court in this image, we need to create a with a background as similar as possible to the background behind this court:
diagonal grey lines
minor diagonal grey lines between the major diagonal grey lines
small tick marks that are short diagonal lines perpendicular to the main diagonal lines. These short tick marks follow a fairly simple pattern.
It is subtle but there is a box-shadow on the main diagonal grey lines, that becomes more and more noticeable as we move towards the bottom-right of the div.
In general, the whole image becomes lighter as we move from bottom to top.
We don't have much yet, just this basic background with repeating-linear-gradient.
.gradient {
width: 350px;
height: 200px;
background: repeating-linear-gradient(
135deg,
#DADADA,
#DADADA 2px,
white 2px,
white 15px
)
}
<div class="gradient">
Close but not really all that close
</div>
We could theoretically draw this whole thing out with SVG lines, but that would challenging in-and-of-itself. A solution that gets the majority of the way there with CSS is preferred. Is this possible?
So, I'm trying to create a zig-zag edge on an element with an inner bevel on the edges, as in this image here.
currently i am managing it by using a border image, but i'd like to know if it's possible with pure css, because the person i am making this site for wants to be able to easily change the color of the element in question, and having a border image makes it not so easy.
i found this tool to create a zig-zag edge using masks (https://css-generators.com/custom-borders/) and that works great, but because it's a mask, i cant add any inset box-shadows to it, which is how i would normally do a bevel. i tried wrapping the element in a parent div and applying a drop-shadow filter to the parent, but unfortunately it seems that the drop shadow filter doesnt allow for inset shadows the way box shadow does.
is there any way to achieve this with pure css, or should i stick to the border-image, and just teach them how to change the color of the png?
I would use that tool for the masking part then add a gradient coloration. Change the red/blue colors like you want and adjust the right 10px to control the depth:
.box {
--s: 60px; /* control the size */
height: 400px;
background:
conic-gradient(from -135deg at right 10px top 50%,#0000 90deg,red 0 225deg,blue 0) 50%/100% var(--s),
purple;
/* from the generator */
--mask: conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) 50%/100% var(--s);
-webkit-mask: var(--mask);
mask: var(--mask);
}
<div class="box"></div>
The best way would be to use an SVG image, which is still plain text, easy to edit, and can be styled with CSS. You could even embed the image in the CSS, like so:
border-image: url("data:image/svg+xml;charset=utf-8,<SVG goes here>");
I am trying to create a top to bottom fade effect from white to grey in a div box that has content in it. I am not sure what css will create this effect.
The result I want looks something like this image:
https://imgur.com/a/Ts9l0Do
This is just a cropped image of the website but as you can see it goes from a white color at the top to a darker greyish color to the bottom. This is what I want.
Try this css:
div {
height: 400px;
background: linear-gradient(to bottom, white 0%, grey 100%)
}
You can change the 'white' and 'grey' to hex codes or rgba for specific colours and change the height to whatever you need.
I have a division that I gave a black background color. The body of the HTML is yellow. What I want is the first black div to fade out.
I wanted to do this using a background-image. The background image is a png file that is black as well, but has a transparency from 0% on the left and gradually goes to 100% on the right.
If I also add this background-image to my division, it remains black.
I understand why this happens, because the image is transparent, and behind that image is still the black color. I get that. Is there a way to do it though? Is there a way to disregard a background-color where a background-image is positioned?
I rather don't create extra html elements if it ain't necessary.
You should use the linear-gradient CSS function for your div.
background: linear-gradient(to right, black, white)
Is it possible to have transparent background image using CSS3?
background: url(../img/bg_paperlines.jpg) repeat-x;
Using rgba(255,255,255,0.5) will set transparent background on the DIV, but the image will hide that.
I know I can have transparent <img>, but that's not what I'm after.
And I have to make sure that the text within the DIV is not set to transaprent.
You could use a PNG with alpha transparency instead of jpg.
You can have transparency using
opacity: 0.5;
but that's it, if you want per-pixel opacity, you have to use a image format that supports it like PNG.