Web page Styling question

Web page Styling question
0

#1

Hello,

Absolute beginner here, nonetheless curious and hungry to learn. Just stumbled on a cool symbol resembles human hand writing laying on top of a HTML page, see attached figure (in the red rectangle) below. I am curious if it is a custom made icon laying on the html page or something else ? What is the technique used to achieve that effect, can any of the web front end experts on here enlighten me please ? Thanks !


#2

It’s probably just a raster image, but it could be an SVG. Could you provide a link to the site? It’d be really easy to find out for certain.


#3

One way to achieve that is using transparent PNG. Then just position the PNG image on that spot using CSS.


#4

Hi - here is the site url

I did look at the page source and also use Chrome developer tool to see if I can spot anything, no dice for me (not surprised being a beginner). It has a css, I have not spent much time inspecting it though. Looking forward to learning from you after you figure out what that is. Thanks


#5

it’s a sprite image
https://www.bennadel.com/linked/css/images/standard-sprite2.png


#6

To add value to @diomed answer, a sprite image is an image which comprises multiple images, this is done so to avoid multiple http requests to the server that hosts the image. Although the file size might not change much, if at all, the fact that you are making a single request helps with the loading times and the rendering (or pre-rendering) of the webpage.

Rendering is the process with which the website is “drawn”, pre-rendering is the same, but done before the user can actually use the website (hence the use of loaders while you wait for the website to load).

Sprites might become obsolete with the coming of the HTTP2 protocol, but for now they are a good choice. The deal with sprites is that you can use CSS to show a particular part of the sprite image.

One image could be at 5px, 5px while the other one could be at 20px, 20px. Changing the position property of the sprite image in css will change the displayed part of the sprite image.

Hope this can help :slight_smile:


#7

thank you for your answer and help. Appreciate that.


#8

Thank you for your detailed explanation, this is very helpful. Thanks so much, appreciate that!