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.
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 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 is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
There is a regular psd file only with the background.
I have Photoshop CS 5.1, ran into a problem: I do not know how to cut out the background or the background to be two main background was such a stretch greens here at 100%, while the other (which is at the center of the white glow) was like in the center of the future site. I was just trying not to cut. Either cut out the curve, or the background is not inserted.
In short it is necessary that the central part of the site was a white shadow:)
Sorry for bad english
First of all, I think that it's not a good idea to use a software who is designed for digital photograph post-production, when you are trying to illustrate something. I strongly recommend Illustrator or Inkscape instead of photoshop wich I think is great for other purposes.
This article could be useful to achive the gradien to transparent effect in illustrator.
http://creativetechs.com/tipsblog/transparent-gradients-in-illustrator/
Are you trying to do something like what I sketched out in this fiddle?:
http://jsfiddle.net/2vvz3/
If not, let me know where's the diference and mayebe I could help you out with this problem.
You may not need to cut out the background. Instead use the entire image as a large background for your site. Here is an article that explains how to use a large background. Hope this helps.
http://webdesignerwall.com/tutorials/how-to-css-large-background
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
I have just started practicing converting PSD's to HTML/CSS. But sometimes you see PSD's and it just seems impossible to craft using html and css.
Like the one here :
http://i.stack.imgur.com/rx0dl.jpg
Thanks alot
The way you should approach this is the same as you would approach any other PSD to HTML, divide it in blocks in your head and start from the top.
Here I made a very rough example of how you could divide this:
http://i.imgur.com/glZJ5.jpg
Use grid lines in photoshop to divide your image in different sections and create slices from there. You can even export to html once you've done that and it will create the css styles required too.
You can find a video explaining how to it here:
http://www.youtube.com/watch?v=DVfxe4pqvo8
Well, start with the basics:
A central content container. Unfortunately, images only describe the layout with one particular screen resolution, but it looks like the designer wanted a centered element with fixed with, probably 960px.
In that container, two headers. You can use the border-radius CSS property to make borders round, but you'll probably need some background images for some icons.
Add the example text, unstyled so far.
Add the front image. You can probably crop it in Photoshop.