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 10 years ago.
Improve this question
I'm a back-end developer and my design skills are admittedly very weak. There's a CSS background effect that I really like a lot and I'm wondering if anyone could give me a general idea as to how one would achieve it? If you look at a sites like sourcebits.com or youtube.com, the background looks sort of gray and has a texture almost like a sheet of high-quality stationary. How are they achieving this effect?
Thanks.
CSS used by SourceBits:
body {
background: #8D9698 url('../images/body-by-bg.jpg') repeat fixed 0 0;
}
SourceBits background link:
http://www.sourcebits.com/images/body-by-bg.jpg
CSS used by YouTube:
body {
background: no-repeat url(//s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png) 0 0;
background-color: #EBEBEB;
background-repeat: repeat;
}
YouTube background link:
http://s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png
They could be using a small graphic, tiled. Usually that small graphic is 10x10 pixels or smaller, and contains the background color (grey, in YouTube's case) and a few dots that are just slightly darker than the background color. When tiled, this creates a shadow effect.
Whups, #Anne got the answer in before I finished! She's also included the exact code you'll need. But, yeah, now you know the code, and you've got the 'whys' of the answer :)
Not an answer to your question, but this might help you a lot when you're doing front-end coding: have you ever tried using Chrome's Debugger tools? Or Firebug? That will let you see the HTML, as well as any CSS style definitions that are applied to it. It's a lot faster than viewing the source, especially helpful if front-end is not your native land because it shows you the CSS rules that apply to that specific element - backgrounds, font faces, what have you.
They use pictures, you need one for each corner and side
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 6 years ago.
Improve this question
Is it possible to improve quality of image using CSS when I use background: url('image.png')?
May be accept filter CSS?
The filter property has the following functions:
none
brightness(%)
contrast(%)
drop-shadow(h-shadow
v-shadow blur spread color)
grayscale(%)
hue-rotate(deg)
invert(%)
opacity(%)
10.saturate(%)
sepia(%)
url()
initial
inherit
blur(px)
Each above function is self explanatory. Regarding the pixels, you can't really change it using the filter property. You can use width and height but It will change the size of the picture to appear on the webpage but not improving the quality.
While there isn't any way to actually improve your image quality using css (that comes down to how your image file is saved originally), one trick I use at times is to force some extra anti-aliasing from the browser using transform
-webkit-transform: scale(0.999);
transform: scale(0.999);
This won't make your image noticeably smaller, but it should just be enough to get your browser to blur it a bit.
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 6 years ago.
Improve this question
i have a problem with my website. i want to assign a CSS dropshadow effect to an item but it didnt work. iif i look at the chrome inspector there is a strike trough (see picture). i also tryed the "!important" string after the rule but it is still not working. the same problem is with other filters like greyscale, blur, e.g. on any target (text, picture, div, e.g).
my site is programmed with wordpress and i coded the theme by myself. dont be confused for the text shadow on the right side of the little picture. it was a test. text-shadow and box-shadows are working. but i need a dropshadow for the png-files in the table.
why isn't this code working?
thanks for it!
p.s. in the computed style tab i found an entry named "filter". the value for this is "none" (see sceenshot 2). now i'm confused...
screenshot 1,
screenshot 2
Chrome based on webkit-engine, so you have to use somethink like this.
-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
That strikethrough typically means you have overriding CSS elsewhere. Check other styles that effect the same tags.
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 9 years ago.
Improve this question
Edit: Resolved. Rather than resetting the Zoom to 100%, the "View < Actual Size" resolved the issue.
I've been having an issue with Chrome rendering divs as fractions and not exactly as the specified numbers.
For example:
HTML
<div class='tile'>foo</div>
CSS
.tile {
background-color: #CCCCCC;
border-width: 2px;
border-style: outset;
display: table;
float: left;
}
Rather than being rendered as 2px, the border-width is "1.8181817531585693px" inferred both from the Chrome Developer Tools > Elements > Computed and using the debugger with jQuery .css function.
A few additional things to note is that this only happens when it's loaded on an FTP, not locally. This issue also doesn't occur in either Firefox or Safari. Any ideas or explanation as to what exactly Chrome is doing, or the solution to it would be much appreciated. Thanks!
The short answer is they are dealing with real numbers that are binary internally, and things must be done quickly.
So some numerical corners are probably being cut, that are normally not noticeable to the average web page viewer, that is if a page is designed so that it is not noticeable.
Go figure, I know, you would think that browsers would be more accurate, but I have found that even with the most careful and detailed control of my css, there seem to be rounding errors that play havoc with small details when displayed.
First, I would suggest you use em rather than px. I know you might have to start over with your css, but I have found it to be more reliable, screen to screen. Remember modern pages are not based on pixels. They are dynamic beasts that can be zoomed in and out, and squished narrower and still must output something reasonable.
Also I would suggest rethinking how you are laying out your page so such small details are not an issue. In carpentry the skilled artisan knows how to hide the rough edges with a molding.
I have a very accurate web page I use to generate to a special printed flyer. It was a royal pain to force html and css into something they didn't want to do, which was be accurate.
Also I can test my production site on the 5 major browsers, right on top of each other so I can see little differences when I switch between them, from one browser to another. They are all off just a little from each other in various ways, and really there is no way to make them accurate.
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've had two developers look at this and they haven't been able to figure out what is causing the issue.
On the following site, the subscribe bar (top of page) looks fine and functions properly in Chrome, Safari and Firefox, but in IE an issue occurs where it shifts the Subscribe button down a line and overlaps with the 'Resources' nav item. A specific width must be set for the float to work properly but when you set the width to auto it floats under the element to the left of it. While it still functions properly this way, it is problematic because it looks awful.
I believe the issue is CSS related but please also note I am using a theme in WordPress and integrating a MailChimp subscribe form.
Any thoughts of suggestions would be greatly appreciated.
Thank you in advance - Ashleigh
Site Reference
Please note that I'm not a CSS pro either.
I'm looking at your website using Firefox 16.0.2 and I see the same problem you are describing.
Using Firebug, I believe you should remove the width: 430px from <div id="mc_signup">. The current width is too small for the complete form and I think that is the reason for the subscribe button to move below the rest of the form. (it simply wraps because there is not enough horizontal space)
See the screenshot, the blue area is the <div id="mc_signup">, which is limited to 430px.
screenshot http://img841.imageshack.us/img841/1540/denised.png
I hope this answers your question.
The problem, you described is consist in Opera and Chrome as well.
But I removed the padding: 0px 10px; part from input#mc_signup_submit.button and it was fine.
I am experiencing issues under Chrome. Increasing #mc_signup's width to 440px; should fix your problem.
Alternatively you could change #subscribe .wrapper .center to width: 100%; text-align: center; and replace the floats on .leftcopy and #mc_signup with display: inline-block;
I recommend you edit your question if you want a more specific answer. Please add screenshots.
I strongly recommend you look at the following link on how to properly float elements.
www.quirksmode.org/css/clearing.html
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
For the sake of this question, let "efficiency" mean, more-or-less, page rendering speed. Albeit, we should also take into account performance issues, like smooth scrolling.
Let's say you're putting a striped background on a page. From an efficiency standpoint, is it better to tile an image 100px wide (showing ten stripes), or an image 20px wide (showing two stripes)? Of course... a large image takes more time to load, but I feel like I've encountered trouble when tiling very small images. Is there an optimal point?
I'm starting to think this depends on the browser (and maybe the operating system as well?), especially given part two of this question:
To achieve translucency, is it more efficient to tile a translucent .png file, or work with CSS opacity attributes (again, the question of large vs. small tile comes up)? From my experience, older versions of IE seem to behave better with a tiled, translucent .png than they do with CSS opacity attributes (though I've never done any scientific testing).
Rounded corners are another good example... in some browsers, the use of images instead of CSS attributes or JavaScript implementations seems to make the page much faster, with much smoother scrolling.
This is really a question broader than CSS, but it's just something I've been thinking about lately.
-Peter
Yes, this is all OS and browser centric.
For instance, in Safari, it's more efficient to use CSS transformations to animate elements than JS.
In general:
you want to avoid tiling very small images. A 20px image will tile better than a 1px as the browser is doing a lot less work to repaint the entire screen. Likely not much of a difference between 20px and 100px, though.
anything that can be done with CSS will likely be more efficient than loading another image. (such as rounded corners, drop shadows, etc.)
a big caveat is IE's css filters. A lot of those are not efficient and you may be better off reverting to images.
Based on my testing, it seems the page renders faster using the smallest image possible, and let CSS do the tiling for itself. The speed at which this takes place is solely dependent on the browser.
As for translucent backgrounds, using CSS would be lighter on bandwidth, but CSS opacity still isn't fully supported, so I would take that into consideration when tackling something like that.
I'd be very curious to know what the results of other people's testing...