Learning to Code: Day 15 — Applied Visual Design Part 5

Using a CSS Colour Gradient to Create a Striped Element

<style>

div{

border-radius: 20px;

width: 70%;

height: 400px;

margin: 50 auto;

background: repeating-linear-gradient(

45deg,

yellow 0px,

red 40px,

white 40px,

black 80px

);

}

</style>

<div></div>

Create Texture with Subtle Patterns in the Background Image

Change the Size of an Element

<style>

.ball {

width: 40px;

height: 40px;

margin: 50 auto;

position: fixed;

background: linear-gradient(

35deg,

#ccffff,

#ffcccc

);

border-radius: 50%;

}

#ball1 {

left: 20%;

}

#ball2 {

left: 65%;

transform:scale(1.5);

}

</style>

<div class=”ball” id= “ball1”></div>

<div class=”ball” id= “ball2”></div>

Scale an Element on Hover

div:hover {

transform:scale(1.1);

}

--

--

--

Step by step, learning to code with FreeCodeCamp

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Understanding Discord — Chat Threads

Galaxy Shooter 2D — Object Pooling #23

Python for Beginners🐍 By Ansh Sharma

How to add a podcast to Breaker

How things are stored in computer memory?

More on keeping commands running after exiting the Linux terminal

What it’s like being a Web Developer

Part 4- Use ConfigMap and Secrets to externalize configurations based on the environment

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hugh Burgess

Hugh Burgess

Step by step, learning to code with FreeCodeCamp

More from Medium

Productive Front-End Libraries that I Recommended in 2022

My Journey to Embrace Digital Work

Tools you Need as a Beginner Web Developer in 2022

Photo by <a href=”https://unsplash.com/@christinhumephoto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Christin Hume</a> on <a href=”https://unsplash.com/s/photos/computer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

How To Become a Freelancer as a Web Developer in 2022