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.
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
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.
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 does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I want to create a preloader from a logo which should appear as if logo is being filled with a liquid. I want to use pure CSS.
While googling I found Filling a glass with Water. But the problem with it is that it only fills in rectangle form. The logo is black/white. I have it in all formats PNG, JPEG, SVG. Here is the pictorial representation in sprites:
http://i.stack.imgur.com/WeF9r.png
Also it must have transparent background like PNG.
Create a 'inverse cut out' of your logo and layer that on the top of the rectangle.
Without a clear understanding of what you're exactly wanting to achieve, this would be the easiest way to go about what you want based on an assumption:
Save a PNG of your logo with the correct background-color and the
letters of the logo cut-out (transparent).
Create a container in your HTML page that has the simple 'filling' animation.
Sit the PNG on top of the 'filling' container using absolute positioning.
Result: A 'filling' logo.
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.
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 9 years ago.
Improve this question
I have web application which can upload images to server.
I want to crop and rotate image before sent to server.
Any way to do this using HTML 5 Canvas
Yes, html canvas can crop and rotate an image.
Crop: Use the extended properties of context.drawImage.
context.drawImage(img,cropX,cropY,cropWidth,cropHeight,0,0,cropWidth,cropHeight);
Rotate: Use the context.rotate property.
// set the point of rotation (example below sets rotation point at center-image)
context.translate(img.width/2,img.height/2);
// do the rotation (in radians)
context.rotate(radianAngle);
Note: all transforms (translate,rotate,etc) are cumulative unless you context.save/context.restore.