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
Related
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 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 is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I want a really weird shaped div and I've read around the web for shaping divs but they only show how to do triangles and circles and things like that. No one really explains why the thing is happening that they do.
Please note: It can't be just a border, as there is supposed to be text inside it.
I sure hope someone could help me :)
I have tried several things but none were doing what I wanted them to do.
Thanks a lot.
You can get the desired results using CSS3 borders and transform properties. More details including working examples can be found here:
http://css-tricks.com/examples/ShapesOfCSS/
use two div's. give border-radius to inside div. and place text inside your div.
http://www.samuelrossille.com/css-shape/#1142AAy0z-10z-4z13z4z0_20z2z-4z4z0
Try this site, you can generate your own shapes.
I made you a little start.
Veel succes
I think the best solution is to slice your shape in Photoshop or any other program as transparent .png and include it as css background for that div
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am developing a Wordpress website where I needed the logo to overlap the banner image below.
Through the help of a colleague as well as Stack Overflow users I now have two solutions that allow for my layout to render as intended.
The image in the banner is rendered as a background image. Because this is a Wordpress site I will have to use inline css for this. Link.
The nav and the banner below are positioned absolutely. Link.
Problems with solution #1:
I realized that if the image is rendered as a background image it will be less SEO friendly and of course less user-friendly for screen readers, etc. as it won't have alt or title tags.
Problems with solution #2:
I find that absolute positioning just doesn't feel as reliable cross-browser (this could be all in my mind). This method also required some extra markup and css classes which I didn't like having to do.
Which way do you think is better? For what reasons?
I don't think there is a definitive answer to your question.
But bear in mind that if you want to print your page, the background image will not be rendered, but the absolute image will.
in my opinion: you should ask yourself if this image is part of the content in your web site, or just a nice visual style.
if its part of the content: use absolute positioning techniques, otherwise: use 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.