Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
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.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I came across some nice CSS designs that I am trying to replicate on my own site. The problem is, the designs were presented as images...screenshots of the actual page. This means I've been trying to replicate the design in my own CSS.
Here is the problem: the text I am rendering is colored as grayscale (all rgb values are equal) in my CSS, but if I screenshot my page and zoom in, you can see colored pixels throughout the text. The original design does not have those...it is perfectly gray, and thus, looks much more smooth.
Here is the original at regular size (very smooth looking):
And here it is zoomed in (notice that all pixels are grayscale):
Now, here is my attempt at regular size (notice how rough it looks):
And zoomed in (see all the colored pixels):
What on earth in happening here? How can I achieve the smooth look of the original design, without the colored pixels?
The original author might have been using a different system when they took the screen shot. Mac and Windows machines smooth fonts differently. There is a -webkit-font-smoothing property, but I think this will only apply to Safari on Mac in the future.
I often experiment with text-shadow to achieve smoother looking fonts. Results vary depending on how much contrast there is with the text and background.
How To Properly Smooth Font Using CSS3
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I want to change the red background.
EDIT: I mistakenly thought the red was css, but it was actually bitmap pixels in the jpeg image being loaded.
Refresh http://splambo.org/ until you get a header image that doesn't cover the entire width, and you'll see a red background color (in Chrome and Firefox, at least). Where is that red color coming from, and how do I change it?
For problems like this, it's best to use your browser's developer tools to inspect an element and look at computed CSS. This will tell you the effective styles that are applied and which stylesheet rules are responsible.
In this case, however, I saw while hovering on the background-image style that the image itself contained the red. If it was not the case, we'd see a background-color style and links to the responsible stylesheets.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I made a website for one of my clients, and I change the background and font color.
Now on windows xp and smartphones the background changed color to the default color and the fonts remained the same.
The website is simfest.ro
I don't know what to do to make it work on windows xp and smartphones.
The background colour changes when the browser width is less than 1200px wide.
You have specified the background-color for the selector .td-grid-wrap within a media query:
What you need to do is move the background-color property to the non-media-queried selector .td-grid-wrap or perhaps .td-page-wrap.
I've checked the page, it is not a matter of windows xp I suppose, if you make some test about the media querys, you will see that big screens has the body background color set to #000000 but scaling down to smaller resolution, the background of the single row is white.
review your css rules and take a look at all the media queries.
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 have seen in Yahoo and other sites including sites for mobile where they have this little arrows pointing up and down and these seem to scale when one zooms into the viewport. They seem crisp on every resolution level as well and I am looking to create something similar. Here is the arrow I am talking about:
arrow image >
This arrow is from the yahoo "Download All" button. Was it done with SVG, is it a UTF-8 symbol? Can this be done in CSS?
You could use something like Font Awesome.
http://fortawesome.github.io/Font-Awesome/
Font Awesome is for use with Bootstrap but there are many similar fonts ets out there for regular use too.
Here's an article detailing some:
http://thenextweb.com/dd/2012/10/12/7-gorgeous-icon-fonts-to-speed-up-your-site-and-your-design-process/
These icon sets are usually scaleable vector icons meaning they will work well at different resolutions.
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
I designed a page in photo shop.
When I try to convert it to HTML the header font looks a bit different.
But I applied the same styles and font, for example size is 36pt in Photo shop(non bold), I could get the same effect while I add BOLD when I coding in HTML.
The main problem is that, the font looks like cut letters, meaning the " I " looks like two dashes vertically arranged.
How to solve this?
Save that "page" as an image and then put that image into an HTML file.
EDIT: I think you can just use the PRINT key on your keyboard to make it really look like on your computer - even with all the Photoshop toolbars and such! But don't forget to provide the users with the color profile and illumination profile of your monitor and an exact layout of your room, and don't forget the type of light bulb you are using, the thickness and tinting of the glass in your windows and of course the angle of the sun!
The problem with converting photoshop files to a website is that Photoshop renders fonts different then browsers. In most of the cases, fonts are displayed the same as in your design, but sometimes you just can't get the fonts look exactly the same as in your photoshop file. Unfortunately, there isn't a fix for this yet.
Photoshop simply has a lot more font functionalities then browsers so you'll have to be satisfied with the simplified version in your browser.
What you can do is slice the text from the PSD as an image and include that in your HTML, but that is a very outdated method which will increase the loading time of your website.
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