Day # 11: Background Pattern


Backgrounds are a very important element of a website’s appearance. Depending on your client’s needs, you may need to come up with a more original background. Being able to create an innovative background for your website can make the difference between a fresh design and a rather classic one. In order to accomplish this, I decided to look over the “background-image” property, which allows us to create patterns and repeat them all over the website. In addition to that, you can also use the linear gradient to come up with color gradations that will add a sophisticated touch to your background design. background-image: 

    linear-gradient(45deg, rgba(38, 0, 255, 0.5) 50%, transparent 50%),

    linear-gradient(-45deg, transparent 50%, rgba(38, 0, 255, 0.5) 50%); As an added bonus, I have included a couple of buttons to choose between having a bigger or smaller pattern, by setting the background-size property using Javascript: bigger.addEventListener("click", function() {

    body.style.backgroundSize = "100px 100px"

})

smaller.addEventListener("click", function() {

    body.style.backgroundSize = "30px 30px"

}) It is often tempting to always use the typical backgrounds for your website, but you could also make an effort to think and implement new ways for your website to look fresh, by just using a couple of CSS lines!

Comments

Post a Comment

Popular posts from this blog

Day # 35: Flip Book

Image
I consider myself to be an avid reader. I like to read all the time about all types of subjects. For this website I decided to make a project that was close to my heart, I decided to recreate a flipping book. The initial idea was to show one or two pages at a time, depending on the case. Then I thought it’d be nice to add a couple of buttons that allows the user to go either to the previous or the next page. In order to show the two pages, I had to look for a CSS property that allowed me to show those two pages at the same time. It turns out there is a property just for that. It is called “perspective”. Additionally, I have to find a way to flip or turn those pages, so I decided to use the rotateY value that belongs to the transform property. And finally, I recurred to Javascript so that I could add or remove, depending on the case, classes to the pages that I wanted to display or hide. I have to be honest, this was one of those projects for which I had to make a serious effort to pull...
Read more

Day # 1: Homepage w/Introduction

Image
Hi everyone, my name is Victor Marin Viloria and I have decided to dedicate my entire summer to coding. I needed to refresh some web programming fundamental concepts, and this project also gives me the opportunity to design exercises for everyone who is beginning his/her coding journey. I am going to make a website each day along with providing a mini-lesson on the concepts I have had to study and implement. The posts on this blog will contain these lessons with a couple of exercises for you to do and practice. I am a true believer in the power of consistency, so I really hope this project helps me get back in programming shape along with your help. Your feedback is important, so if you ever think that I could have done something better let me know! This project starts today and I hope you will join on this adventure. I am sure this will help me become a better developer, writer and teacher. I am sure this will be hard to pull off, I know I'll get frustrated, but in the end my visi...
Read more

Day # 8: Inspiration

Image
I am always on the lookout for inspiration. It is important that, as frontend developers, we are able to fill our “inspiration tank” all the time with ideas that could potentially lead to websites, apps and even more complex projects. Since it is a good learning practice to try and copy websites that we encounter in our everyday lives, I decided to take this picture of an “inspiration pad” I found at Tiger, a very popular store here in Madrid, as the source of inspiration for today’s website. I have to admit it wasn’t very difficult to pull it off, which could mean that I’m getting better at this. However, as simple as it may seem, it is only when we start working on this type of exercises that the difficulties arise. In this case, I had to learn how to style the <hr> element that separates each section. This is how I was able to achieve it:  Style the <hr> hr {     display: block;     height: 1px;     border: ...
Read more