Unit 4: More Fun With CSS
Calling all students!
@flyingCouch @xinmure @lst-my-shp-sil @greekmyth @merinnie @Theora @deathinreverie @Forever_D_A @ValKayRee @dumplingbabe @hazelnuttys @panaceia @JJJ000YYY @Nablai @keen @W.L.Ink
Hopefully, you all are a bit more familiar with inline css by now. It’s essential that you understand it inside and out when coding. Without inline css, threads would be so boring. This time, we’ll be exploring a few new properties, which can help you prettify your threads, so let’s dive right in with some code.<span style="font-size: 16px; color: white; display: block; background-image: url('https://66.media.tumblr.com/92d89695d6a82d1aba3a6d59ef480b3d/tumblr_inline_mk7b0eproS1qz4rgp.png'); background-size: 100px; background-position: left; border: 10px solid transparent; border-radius: 20px; width: 200px; height: 200px;">Pretend this says something important.</span>background-image may look scary but it’s just a way for us to express that we want an image to be displayed behind the words of our span. Take a closer look at the formatting. The url portion along with the parentheses after it to contain the url is essential. The code still works without the single quote marks but I include them for clarity. As best practice for coding, I recommend using repeating backgrounds.background-size resizes the background so that it can be displayed properly behind your words.background-position defines which part of your image should be used.border-radius makes your border rounder. The larger the number, the more round.
If you don’t understand any of the new properties I explained above, feel free to click on their name to be directed to a site to learn about them in much greater depth. I’m also here to answer questions.
Using the base code as a starting place, I want you to change the following properties:
● background-image (use a different url, basically)
● background-size
● background-position
● border-radius
As a bonus, if you find the above too easily, I’ve written up an OPTIONAL part two for this assignment:<span style="font-size:; display: block; background-color: skyblue; border: 10px solid transparent; border-image: url('https://cdn.wallpapersafari.com/26/79/syOu2P.jpg') 30 round; width: 200px; height: 200px;"> </span>
As far as I know, border-image can’t be used at the same time as border-radius (correct me if I’m wrong though but that’s what I remember from my previous bouts of testing). It’s still a fun piece of code regardless. Instead of being stuck with only flat colors as borders, this opens up the possibility of you using images for your borders instead. I recommend repeating backgrounds for this as well.border-image is written in the order of image url and then a number for the width. I’m not sure if any other words can be used in place of round but I’ll let you all figure that out if you choose to.
I threw in border: 10px solid transparent; because you can’t have a border-image without a border. Try removing it from the code and see what happens. The values aside from 10px don’t seem to change the code. If you decide to try part two, you can change any part of the base code as you see fit. Just don’t submit the exact same thing back to me. It’s an easy way to get an extra point on this.
Direct reply to this message with your submission by September 7th 6pm PDT. Grades will be given shortly. If, at any point during this assignment you wish to ask a question, feel free to tag me and ask!