CSS107 - Borders and Shadows

  1. Borders

    We already covered most of the features of borders in CSS101. The only one that remains is border-radius which sets the roundness of the border corners. This is set in px or %. Percentage works on the the width and height individually. A negative border radius has no effect.
    #one
    #two
    #three
    #one
      border: 3px solid red
      border-radius: 5px
    #two
      border: 3px solid red
      border-radius: 1px
    #three
      border: 3px solid red
      border-radius: 50%
    #four
      border: 3px solid red
      border-radius: 50px
      width: 100px
      height: 150pxÏ
    #five
      border: 3px solid red
      border-radius: 50%
      width: 100px
      height: 150px

    Specifying sides of a border

    These values can also be set individually using border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. Alternatively border-radius can be given 4 different values. This follows the TRBL direction starting at the top-left, then top-right, then bottom-right and lastly bottom-left. Only setting two values will set top-left and bottom-right in the first step and top-right and bottom-left in the second.
    #one
    #two
    #three
    #one
      border: 3px solid red
      border-radius: 5px
      border-top-right-radius: 10px
    #two
      border: 3px solid red
      border-radius: 1px
      border-bottom-left-radius: 50%
    #three
      border: 3px solid red
      border-radius: 25% 50% 50% 25%
    #four
      border: 3px solid red
      border-radius: 25% 50%
  2. Box shadows

    Box shadows are a relatively new feauture that allow you to create a shadow behind or in a div element. This is set through the box-shadow attribute. The box-shadow can be set with 2-4 values and an optional colour. The 'inset' keyword can also be used to make the shadow appear on the inside of the div rather than the outside.

    Multiple shadows

    The first value is the horizontal position from the left of the element. Negative values are allowed. The second value is the vertical position from the top of the element. Negative values are also allowed here. The third value is the blur radius and the fourth is the spread of the shadow. 0px is the same size of the div element.
    #one
    #two
    #three
    #one
      box-shadow: 20px 20px
    #two
      box-shadow: 20px 20px 20px
    #three
      box-shadow: 20px 20px 20px 20px rgba(255, 0, 0, 1)
    #four
      box-shadow: inset 20px 20px 20px 20px rgba(255, 0, 0, 1)

    Multiple shadows are allowed by seperating through commas. This can create some more complicated shadows like the below.
    #one
    #one
      box-shadow:
        -20px -20px 50px 0px rgba(255, 0, 0, 0.7),
        20px -20px 50px 0px rgba(255, 160, 0, 0.7),
        20px 20px 50px 0px rgba(255, 255, 0, 0.7),
        -20px 20px 50px 0px rgba(255, 160, 0, 0.7
  3. Text shadows

    Text shadows work the same as box shadows except that they cannot be given a spread or be set to inset. They too can be given multiple shadows.
    #one
    #two
    #one
      text-shadow: 2px 2px 4px #FF8B00
    #two
      text-shadow:
        font-size: 40px; 
        line-height: 1.2; 
        text-shadow: 
          -2px -2px 4px #4C9AFF, 
          2px -2px 4px #36B37E, 
          2px 2px 4px #FF5630, 
          -2px 2px 4px #FF8B00
    I have a shadow!

    I have multiple shadows!
  4. Exercises

      • Set up a new folder and save three square images in it.
      • Create three "avatars" by using border-radius for one, box-shadow for the other and both for the third one.

      • In the end your page should look something like this. Use the inspect tool if you are stuck or to check your answers.
        #taylor, #jason, #sting
          width: 50px
          margin-left: 20px
        
        #taylor
          border: 2px solid lightblue
          border-radius: 50%
        
        #jason
          box-shadow: 0 0 10px 0 lightblue
        
        #sting
          border-radius: 0px 20px
          box-shadow: 0 0 10px 0 grey
        link(href="style.styl" rel="stylesheet")
        
        img#taylor(src='taylor.jpg')
        img#jason(src='jason.jpg')
        img#sting(src='sting.jpg')

    1. Try and make a neon sign inspired by the image below. An example can be found here. Don't forget to use the inspection tool.
      body
        background-color: black
        margin: 0
      
      .parent
        width: 100vw
        height: 100vh
        display: flex
        justify-content: center
        align-items: center
      
      .sign
        font-size: 90px
        font-family: sans-serif
        letter-spacing: -5px
        font-weight: lighter
        color: white
        text-shadow: 0 0 10px rgba(255, 0, 0, 1), 0 0 10px rgba(255, 0, 0, 1), 0 0 10px rgba(255, 0, 0, 1), 0 0 20px rgba(255, 0, 0, 1), 0 0 30px rgba(255, 0, 0, 1)
        border: 4px solid white
        padding: 13px
        border-radius: 80% 50%
        box-shadow: 0 0 30px 0px deepskyblue, 0 0 60px 0px deepskyblue, inset 0 0 30px 0px deepskyblue, inset 0 0 60px 0px deepskyblue
      
      link(href="style.styl" rel="stylesheet")
      
      .parent
        .sign
          | OPEN

    2. The shadows defined here are the shadows used in ADG3. Create three divs and recreate the shadows (do not worry about the interactions or text).
    3. link(href='style.styl' rel='stylesheet')
      
      .content
        .z100 Text
        .z200 Text
        .z300 Text
      .content
        display: flex
        flex-direction: column
        justify-content: space-around
        align-items: center
        height: 80vh
      
      .z100, .z200, .z300
        width: 300px
        height: 150px
      
      .z100
        box-shadow: 0 1px 1px rgba(9,30,66,0.2), 0 0 0.5px 0 rgba(9,30,66,0.25)
      
      .z200
        box-shadow: 0 4px 8px -2px rgba(23,43,77,0.32), 0 0 1px rgba(23,43,77,0.25)
      
      .z300
        box-shadow: 0 24px 32px -8px rgba(23,43,77,0.24), 0 0 1px rgba(23,43,77,0.25)