Background Texture


Create a body texture: 

One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. 

The key is balance, as you don't want the background to stand out too much, and take away from the foreground. 

The background property supports the url()  function in order to link to an image of the chosen texture or pattern. 

The syntax for this is:

<style>
  body {
background: url(https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png)
  }
</style>

The link address is wrapped in quotes inside the parentheses.

Use the CSS transform scale property to change the size of an element:

To change the scale of an element, CSS has the transform property, along with its scale()  function. 

The following code example doubles the size of all the paragraph elements on the page:

p {
  transform: scale(2);
}

Use the CSS Transform scale Property to Scale an Element on Hover:

The transform property has a variety of functions that let you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as :hover that specify a certain state of an element, the transform property can easily add interactivity to your elements.

Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:

p:hover {
  transform: scale(2.1);
}

Note: Applying a transform to a div element will also affect any child elements contained in the div.

No comments:

Post a Comment