I've been trying to recreate the random snow/star effect that's on this website , but I've had no luck..
I'm assuming this needs to be done in CSS, is there anyone who can help me write the code?
Thanks in advance!
Samoht
you have nothing show, but here is a short description
To create this effect, we’ll need three different “snow” graphics. These are transparent images of varying degrees of size and focus. We’ll overlay these three graphics on top of one another for a bit of depth.
Let’s style the background with these images. I’ve uploaded them to Imgur, feel free to use them.
Next, let’s create the keyframe. This is necessary to animate the background images as shown in the example down. If you’re read any of my posts before, you’re probably familiar with CSS Keyframes by now.
Our “snow” keyframe is slowly moving each background image independently of one another at different paces to create the awesome effect of snow falling.
You can change the speed or direction by modifying the background positions in the keyframe at 100%.
Demo w src: jsfiddle.net/orLgtgao/
Related
The image below has a kind of faded grey look with what seems to be some slight blurring and works quite well as a generic banner image.
Usually I am provided with these images or just find stock images but I'd be very interested in learning how to apply these effects with Photoshop or CSS. I have a feeling that Photoshop is a more appropriate tool.
The image I'm experimenting with is this:
It isn't the best image but for my testing purposes at least it's a similar shape and size.
I know I can use things like de-saturation or a coloured layer with a colour blend mode for this sort of thing. However, does the first image look like it has a specific effect or is it just a case of trial and error?
I appreciate this is similar to this question.
open your image in photoshop, add a new layer on top of the image, fill the layer with a color of your choice (in this case grey/black) then reduce the opacity of the layer. You will get something similar to what you want. This is a simple trick. It can be done in other ways too with more modifications.
Maybe you could get the effect by using css blur and overlaying the image with a gray layer with opacity.
You could also just create the effect in photoshop and use that
I'm designing a website which uses a SVG-document as background. I want this image to tile on the X-axis. Which works great, but I wanted to know if it is possible to show one group in the SVG only once, such that in subsequent tiles the group is hidden.
The above image visualizes what I want to achieve. The image having one group (in the image the red circle) that is invisible in the following tiles.
Now I am aware such things can be achieved using additional CSS backgrounds but I am really interested if such thing could be achieved using a single SVG background.
Thanks in advance!
The answer is no. If you are relying on CSS to tile the background - ie. with repeat-x, then no. there isn't any way to do what you want. When an SVG is used as a background like that, it becomes immutable - effectively the same as a PNG or a JPEG.
You will need to use a different method.
Is there a correct procedure to locate certain image locations in an image sprite. Say I wanted to create 10 div images in my header using the image below, how do I find the precise location of each.
Is just a case of trial and error using CSS background position till the image fits?
http://www.argos.co.uk/wcsstore/argos/en_GB/siteAssets/brfp-2014/images/icons-s73f662fc84.png
Now if you are not adverse to uses SCSS/SASS, then I would highly recommend using Compass' method. It converts a folder of images into a sprite map and the creates classes that allows you to access these sprites. This has proven to be the easiest way for me to work with sprites without worrying about all of the messy calculations.
If you can't do that, then what I have personally done, is create multiple small sprite maps. For example, if I have an arrow that has a hover on/off state. It will stack it into one image and just create a class with a shifted background-position.
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.
I am trying to implement a fixed background for a website like one over here. Searching around for it told me that I can use background: fixed or background-attachment properties for this.
My problem is the image which will be used as background. I am thinking about following issues:
What should be image size?
how will it repeat when browser window size is very large? for big 27" monitors out there?
Can somebody guide me on these points?
Regards
Vikram
That is not a single background image. Its mostly a bgcolor, except for the side clouds. Using a single large image as a background will dramatically slow down your load time.
There's no specific guideline. You need to make the image as large as necessary to satisfy the requirements of the design. If you want someone with a maximized browser window on a 30-inch display to see a single unbroken non-repeating background image, then yes, you'll need quite a large image. It won't perform well.
The Twitter example is a wide but short image, set to repeat along its x-axis. It's wide at 2247 pixels, but perhaps unnecessarily so: it actually appears to be a fixed pattern that repeats horizontally four times within that 2247 pixel image. Nonetheless, you get the idea: make an image that blends gracefully into itself at its edges for seamless tiling, and/or blends into a fixed background color. Position and repeat it as needed, set the background-color of the page, and you're done.