PUBLIC MARKS with tags css & image

Comment fixer un fond d'écran dans une page Web (CSS)

ealing with browser caching is a balancing act. On one hand, you aim to minimize load times and bandwidth use by ensuring that images, scripts, and style sheets are cached by your visitors; however, you still want to ensure that they’re accessing the most recent versions of all your files. In this article, I’ll show you a few methods for controlling how your site’s files are cached by browsers so you can achieve the best of both worlds: maintaining optimal performance while ensuring that any updates are seen immediately, without a hitch by all of your users.

Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There's a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button.

affichage partiel d'un contenu

CSS Sprites code generator. Generated CSS and images are compatible with most browsers

générateur de sprite CSS

batch process many images: allows you to send a zip file containing your images. It will returns you your images combined into a sprite, and even better, the CSS code that you'll just have to paste in your main css file.

Comment réaliser un bloc d'illustration avec une image et une légende qui respecterait les deux critères suivants: premièrement, le bloc doit s'adapter à la largeur de l'image; deuxièmement, le texte donné en légende ne doit jamais dépasser l'image en largeur, et passera sur plusieurs lignes si nécessaire. La solution de facilité serait de figer la largeur du bloc et de travailler toujours avec des images de mêmes dimensions. Mais les CSS nous permettent de faire preuve d'un peu plus de subtilité.

Comment réaliser un bloc d'illustration avec une image et une légende qui respecterait les deux critères suivants: premièrement, le bloc doit s'adapter à la largeur de l'image; deuxièmement, le texte donné en légende ne doit jamais dépasser l'image en largeur, et passera sur plusieurs lignes si nécessaire. La solution de facilité serait de figer la largeur du bloc et de travailler toujours avec des images de mêmes dimensions. Mais les CSS nous permettent de faire preuve d'un peu plus de subtilité.

I mean Parallax Scrolling which is a technique often used in good ol’ arcade and video games like Moon Patrol or Sonic the Hedgehog. In such 2D games parallax scrolling was used to create an illusion of three dimensional depth.

Moving Sonic the Hedgehog to the right caused the foreground to move past the camera to the left faster than the background, creating a faux-3D view of Green Hill Zone. We can create a similar effect on a web page by fixing semi-transparent background images to different sides of the browser viewport, and at different horizontal percentage positions.