Paper Texture in CSS? - css

Is it possible to make this texture in pure css?
See this also for texture: http://dribbble.com/shots/70256-Background-Textures

Assuming that you don't care about supporting older browsers, you can do this:
body {background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAACcCAMAAAAu7ofdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtlQTFRFbnB2bW94bG50cHJ4bnF6a212cHN8c3V7dXd8c3Z+aGpzdXiAamxyb3F0d3l+bW9yZ2lyd3qCeXuAdnh7aGpwZWdwe32DZ2hteHl9eXyFb3F3bW91cnR6bnB5Y2VtbG53bW93e36HdHZ7bG52bnF5bW92cXN5cXR8dHd/bG51b3J7cnV9foCGb3J6YGNrbXB4dHZ8cnR7bnB3aWt0b3F4cXN6cHN7a211a21zb3J5bnF4dHZ9dnmBf4GHc3V8bXB3a210dXd9cHJ5cnV8bnB4cXN4cnR5amxzaWtzenyCb3F1c3Z9fX6BcXR9dnh9foGKdHd+cHN6b3F2fn+DcHJ2cXR7eHp/ZWZsdXd7dXd6aGpycnV+b3F5aWtxbnB0bnB1cHJ6bW90c3V6amx1dXh/cHJ3bXB2XWFpdnh+aWtyeHqAZmhxcHJ1gYOKd3l/bG5zaGpxcXN7bnBzZ2luc3V5bnF3bW9zamx0c3V9XGBodnh/dXh+cnV7dXd/b3J4cXR6cXN8b3F6dHZ6g4WMcnR8dHd9dniAdnh8dHeAcnR4ZGZudnmCeHuEZWZqfH6Ff4KMdnmAdXd+cHN5dHZ5gIKGaGpvdnl/dXh9d3mAaGlyaWtwe32Eb3J2d3h8Z2lxdHZ+c3Z/amxxWlxlfH6Ea21yeXuBd3l8eHuDd3qDcXN3ZmhwZmhvc3Z7cXR5cXN2bG5yd3qBcnV5bG9zen2DdXiBenuAd3l9Z2lvcHJ7dXZ6c3Z8bXB0fH2Cdnd7dHd8b3J1ZmhueXp/d3p/Z2huZGZtbXBzeHp+en2FfX6Ce32GXWFogoSNfYCKcnN4eHqBcXJ3dHZ/enyBc3R3X2Jre32CZWZteXyEfX+FZWduX2Jqd3mBbm91amxwen2Ge36GeXyDbm90foGJdnd8ZWdvcnR3ent/fX+GdXZ7fH+IfYCHc3R6eXt/fYCJZ2hseHuBe36FeHuCcnV6cHF2we0nSQAAKPRJREFUeNpUe4OfZVmW7raOdX3jhu2ItO2sLNu22bat8XSPuse2+Wzb9vsL3rduTefLKf0yom6cs/fCh7V3MBGzLNXWcK25yoVQPBZMOsasTISLShN5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')}
It's "pure CSS", right? =D
See: data URI scheme
Edit:
Looking at the comment you left on Evan Mulawski's answer, here is the decoded PNG of my base64 string:
I just copied a portion of the image you provided in your question. It doesn't tile 100% seamlessly, but it looked "good enough" for posting inside a base64 string noone would ever look at.
body {background:url(background.png)}

Depending on how the texture works, you might be able to do it by creating an insanely large number of positioned <div>s with borders in various shades of gray.
Don't.

You can't do that in CSS. You need to make an image and repeat it on the background.
http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/

The best way is to set the background image property using a tiled image.
Filter Forge (filterforge.com) has a filter library. See if you can find a suitable image there, then use repeat-x and repeat-y for a seamless background.

Related

Can I convert an image to CSS3?

Supposing that I have a polygon image PNG file like this (No border, the shape is filled with one color, no gradient, and background of the image is transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF
I'm thinking of using that polygon image as a background image and it will be changed (to another image with different color) when the user hovers on it.
But I also want the color of the background image to be customizable. So, I'm thinking if there is any possibility to draw the polygon instead of using image files so that the color will be customizable (I don't think it's a good idea to create one file for one color and so on so forth).
What is the best solution for this case? Using png or drawing it by css?
Is there a tool/website to convert my png to css code?
Make the white areas transparent (colour to alpha in GIMP)
Convert the image to a data URI (it's optional but it will make your site load faster)
Use the url in (2) as the background-image and use any background-color you want.
Use this to convert an image: http://codepen.io/blazeeboy/pen/bCaLE
I think it's much better to use converted images because browsers load them faster.
I think CSS is the wrong thing to use for this. Yes, it is possible to create a lot of shapes using CSS, but there are limitations, and in any case, drawing shapes with CSS is a bit of a hack, even when it's just a simple triangle.
Rather than CSS, I would suggest SVG is the appropriate tools for this job.
SVG is a graphics format for vector graphics that can be embedded in a site, and can be created or altered via Javascript directly within the site. Changing the colour and shape of a simple polygon is about as easy as it gets with SVG.
The other advantage of using SVG is that because it's a vector graphic, it's scalable, so you could display it at any size.
The only down-side of SVG is that it isn't supported by old versions of IE (IE8 and earlier). However, these browsers do support an alternative language called VML, and several good Javascript libraries exist which will work with either, thus allowing you complete cross-browser compatibility. The one I'd recommend is Raphael.js.
So a tiny (and very easy) bit of Javascript code instead of a very messy bit of CSS. Seems like a winner to me.
Maybe u could use this: https://javier.xyz/img2css/, the principle is to use box-shadow,it's fine if the picture is small, so u should consider performance

CSS3 Background Size "Zoom"

I am trying to implement a full page background image as discussed here.
I am using the first method, the CSS3 technique. However, when I use background-size: cover like the author suggests, the image is "zoomed" in way farther than it needs to be and I don't understand why.
Is it a problem with the size of the image or do I have something else wrong?
Here is a link to the page.
achievable I want to see the entire tree, trunk and all. I've already tried setting the background-size to "100% auto" and the effect is the same. I've also already tried background-size to "contain" and now the image is too small.
No JavaScript solutions please. I know this achievable with just CSS.
UPDATE
Contain looks good on a desktop site, but it looks bad on a phone/table. Cover looks good on a phone/table but bad on a desktop. I guess I'll use the one that looks the best on each device?
UPDATE
I think I could use contain across the board, I would just have to resize the bg image to be thinner for smaller devices.
I believe we can suffice this requirement by using following two Solutions:
a. Use background-size:100% 100%; I am able to zoom image properly by using this Solution.
b. Use img tag with height and width as 100%
Change background-size: cover to background-size: contain
It looks perfect this way!

Creating unique background in css, image insed

Is there a way to create a background like so in css? I didn't know how to describe it so google coudn't help me. Thanks!
You might be able to do it with an SVG image, but be aware that the support could be spotty. It would probably be easier to just create it in Photoshop or GIMP and make it really big (say 1620x1080)
A quick search on CSS and SVG backgrounds came up with this page; but it's from 2009.

background-position technique for 'single-sprite-background-images'

What is a good 'image spriting' tool to turn single images into one big sprite with different background-position?
I know about http://spriteme.org/ but it doesn't seem to produce a result as nice as:
goDaddy's or Behance's
I've been doing it by hand for small hovers and icons but doing the entire website would take a while to hand-code all the background-position properties.
Thanks
You can try SASS/COMPASS. Even if you are only using the sprite functionality (called sprite mixin) it is worth using it. There are some nice tutorials like this one.

Is it possible to emulate Mac Osx Finder search highlight in HTML + CSS?

Mac OSX Finder has a search feature that darkens everything but the part that matches.
(source: justaddwater.dk)
Is there a way to emulate it via CSS? I was thinking about adding a semi-transparent black div with opacity 50. But how then do I cut a hole in it?? and possibly make the edge fuzzy?
Any suggestions?
Check out the Expose jquery plugin from the jQuery TOOLS collection. I think it will accomplish exactly what you are looking for. They even have a demo of styling the mask with a background image.
Due to the irregular shapes, you're probably looking for an image. And due to the need for varying levels of transparency, you probably want a .png that would just be stuck over the selected item.
Good question, one way would be to have a "selected" png that had the glowing circle cover the selected one, and a different just dark png cover everything else.
EDIT: But you would probably want to use a library like jquery rather than coding everything from scrath your self, as to not reinvent the wheel and save TONS of time :D
maybe a PNG image will work, a square with hole

Resources