Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
This is the image I want to design using pure css without background image, can use background color. Any suggestion me to do design for above mentioned image.
I don't have many reputations to comment on, i.e. I'm replying to you in the answer. I'm a newbie.
You have to research more on this content, you should search "Pure Css Posters" on youtube for reference.
For now, I would suggest you some ideas.
1. You can use 2 sections to create those white blocks, and For Shape Just use the "clip-path" Property and for the card container, put a gradient on the background using linear-gradient.
2. In those white sections, use before or after selectors to mark that greyish part.
3. Make sure you're using Flex properties to keep it aligned.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
How do I recreate this mock-up using CSS? Its easy to create this using a layer mask in Photoshop but how do I recreate it using CSS?
It needs to be responsive so I'd rather code it than upload the image.
image mock-up
A bezier curve svg clip path is likely what you need, with two divs one with a higher z-index than the other. This illustrates the technique, drawing your bezier curve might be best done in a graphics tool.
https://codesandbox.io/s/bezier-curve-clip-path-h8x8l?from-embed
You'll overlay a div with the clip path over the top, then set an opacity to it and a colour so it shines through.
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 1 year ago.
Improve this question
I'm using an image with the tags in HTML and changing its width in CSS. Everything is good except the big transparent sides the picture has, it's not padding or anything else, I think these are just the sides that the image has. I tried removing the padding, but it doesn't work, even making the padding a negative value doesn't make it any better. It's the site's logo so it would look quite awfully with the logo in the middle.
It is probably white space from the image itself, you need to crop it in some image editing software like PhotoShop (try this free online version https://www.photopea.com/) or some free alternative like GIMP. Also you will maybe be able to make those types of change in stock image editing software on your machine.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am looking for ideas for ways that I can best create nested boxes as shown in the image below. Ideally I would like to do this in HTML with CSS but I can also leverage a framework like bootstrap or similar for styling.
https://imgur.com/a/bFiyzkV
I would like to also be able to link to other pages as a user clicks on the label within each box for additional details on a separate page.
I have basic HTML/CSS experience.
Thanks,
Bob
This can be achieved using the CSS Grid spec - see nested example:
https://gridbyexample.com/examples/example21/
Or using flexbox (which is how Bootstrap do it) see:
https://getbootstrap.com/docs/4.3/layout/grid/#nesting
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Is there any way to make the background as following image.
Should I use to three div classes to create this kind of background. I have no clear idea. I tried to find a way from google. But I couldn't. Please help me.
You can use a single image as the background or you can use say two images as a background - top and then bottom. the second way maybe better for a responsive layout but i dont know enough details to be able to say either way.
Using two background images would look something like this:
.yourclass {
background-image:url(yourimage.png), url(yourotherimage.png);
background-position:top left, bottom right;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How do I make a custom shape button like this.
example: http://www.dennispkramer.com/index.html
I mean the button saying 'blog' and 'about'.
The actual button is a block, like normal.
However, they've added #nav-mask which looks like this:
Giving the illusion the buttons are like this:
Those are not custom shapes. There is a mask behind the logo, in front of the menu items. There are some CSS tricks to create custom shapes like triangle, but for real custom shapes i would suggest to use SVG.