DEV Community

loading...

Simple CSS tricks with images.

nimritee profile image Nimritee Sirsalewala ・Updated on ・5 min read

This article shares some of my most pleasing moments of learning CSS, I hope it's the same for you as well.

CSS is an abbreviated form of Cascading Style Sheet. It is used to describe how HTML elements should be displayed. CSS can not only provide colors, positions to the HTML elements, etc., but it can also create animations and enhance your web page. It's totally worth to know some useful tips and tricks which will help you to create amazing web pages.

1. background-repeat

background-repeat

The background-repeat property sets how a background image will be repeated. It is used in conjunction with the background-image property. We can repeat the background image along the horizontal axis, vertical axis or not repeat it at all.

By default, a background-image is repeated both vertically and horizontally.

Syntax

background-repeat: value; 
Enter fullscreen mode Exit fullscreen mode



Property Values

Value Description
repeat The background image will be repeated both vertically and horizontally.
repeat-x The background image will be repeated horizontally only.
repeat-y The background image will be repeated vertically only.
space The background image will be repeated as many times as it will fit, but it is not clipped.
round The background image will stretch or shrink slightly to avoid clipping and to produce no gaps.
no-repeat The background image will not be repeated.
initial Sets this property to its default value.

CSS Example

body {
    background-image: url("images.png");
    background-repeat: repeat;
}
Enter fullscreen mode Exit fullscreen mode

You can view the source code here.

2. mask-image

Linear-Gradient
Let's say you want to use an image, but only want to show certain parts of it. You can achieve this using the mask-image property in CSS. CSS masking allows us to define a mask shape which is then applied to the image. Anything that comes outside the mask shape is cut out, and the rest is displayed. It is pretty much works the same as masking in Photoshop.

Anything that’s 100% black in the image mask with being completely visible, anything that’s 100% transparent will be completely hidden, and anything in-between will partially mask the image.

Masking can be performed in two ways, Masking using Gradients and Masking with images.

CSS Example - Linear Gradient Masking

#masked{
-webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 75%);
mask-image: linear-gradient(to bottom, transparent 5%, black 75%); 
}
Enter fullscreen mode Exit fullscreen mode

In the above image, 1st part is the original image and second part is masked image with linear-gradient.

CSS Example - Radial Gradient Masking

 #masked{
-webkit-mask-image: radial-gradient(ellipse 20% 90% at 27% 50%, black 40%, transparent 50%);
mask-image: radial-gradient(ellipse 20% 90% at 27% 50%, black 40%, transparent 50%);
 }
Enter fullscreen mode Exit fullscreen mode

In the below image, 1st part is the original image and second part is masked image with radial-gradient.
Radial-Gradient

CSS Example - Masking using Images

 #masked{
 -webkit-mask-image: url(https://images.png);
 mask-image: url(https://images.png);
 }
Enter fullscreen mode Exit fullscreen mode

In the below example, a background image is used to mask an image of a camera out of it.

Masking with Images

You can view the source code here.

3. Zoom on hover


A zoom effect on images when users hover over them makes the web pages more attractive. This kind of effect can be used in galleries, selling products where you need to enlarge the image so that customers can have a better view.

The CSS transform property is used for enlargemnet of images with your preffered scale amount. It provides a way to control animation speed when changing CSS properties.

Syntax

 transform: scale [transition-duration] [transition-timing-function] [transition-delay];
Enter fullscreen mode Exit fullscreen mode

CSS Example

img:hover {
    transform: scale(1.1);
}
Enter fullscreen mode Exit fullscreen mode

In the above example, the image zooms out on hover.

You can view the source code here.

4. scroll-snap-type


CSS scroll-snap-type property allows the developer to create well-controlled scroll experiences. This property can be used in the gallery section of the web-page. Page scrolling in CSS is contolled by setting a scroll-snap-type property on a container element. The scroll-snap-type decides the axis on which scrolling occours x or y.

Syntax

 scroll-snap-type: [none | x | y] [mandatory | proximity];
Enter fullscreen mode Exit fullscreen mode

The mandatory means the browser has to snap to a snap point whenever the user stops scrolling.
The proximity is less strict, it allows the browser to a snap point if it seems appropriate.

CSS Example

.y-scrolling {
      scroll-snap-type: y mandatory;
  }
Enter fullscreen mode Exit fullscreen mode

The above example shows, scroll-snap-type along Y axis with mandatory value.


You can view the source code here.

5. shape-outside

shape-outside

shape-outside changes the shape of the items that are wrapped, instead of being restricted to a rectangular box.shape-outside allows to shape the content in order to fit the image.

The shape-outside property takes a basic shape and applies a shape function to it. This property works only for floated elements.

Syntax

shape-outside: values;
Enter fullscreen mode Exit fullscreen mode



Values

Value Description
circle() For creating circular shapes.
ellipse() For creating elliptical shapes.
polygon() For creating any shape with more than 2 vertices.
inset() For creating rectangular shapes.
url() For creating shape of the image present in the url.
initial The float area is unaffected.

CSS Example

img{
    shape-outside: circle(85% at 10% 50%) border-box;  
}
Enter fullscreen mode Exit fullscreen mode

The below example shows, how the text is wrapped around the image using the circle function.

You can view the source code here.

You can read the original blog source from blogs.nimritee.com.

Discussion (0)

pic
Editor guide