{"id":128,"date":"2018-04-23T21:04:46","date_gmt":"2018-04-23T21:04:46","guid":{"rendered":"https:\/\/ucsbwebdev.fzilla.com\/?p=128"},"modified":"2018-04-23T21:17:04","modified_gmt":"2018-04-23T21:17:04","slug":"advanced-css-techniques-and-properties","status":"publish","type":"post","link":"https:\/\/ucsbwebdev.fzilla.com\/?p=128","title":{"rendered":"Advanced CSS Techniques and Properties"},"content":{"rendered":"

There are many important ways CSS can be used to make your website look beautiful. We’ll start with some special background properties and go all the way to advanced website layouts. Let’s get started.<\/p>\n

Background magic<\/h2>\n

There are many different things you can do with backgrounds, set a color, set an image, make it repeat, change its size, change the position, and much more. So let’s look at the different examples.<\/p>\n

Background Color<\/h3>\n

background-color\u00a0<\/strong>is the simplest one, allowing you to change the background of an element like this<\/p>\n

\nSee the Pen simple-background by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n

Background Image<\/h3>\n

background-image\u00a0<\/strong>allows us to add an image to the background like this<\/p>\n

\nSee the Pen background-image by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n

Okay let’s pause here as a lot of interesting things just happened we need to pay attention to.<\/p>\n

    \n
  1. If you have an empty element like in the example above you will not<\/strong> see the background image unless you set a width and height, simply because an element with no content is invisible (0 height means you can’t see it). You can alternatively add padding as well, but height\/width is preferred as you should know the dimensions of the image<\/li>\n
  2. The background logo image we set seems to appear twice<\/strong>! What happened here? Well there is a background property called background-repeat\u00a0<\/strong>which is enabled by default, so our background image will repeat down and right to fill the size of the element like this\n

    \"\"<\/p>\n<\/li>\n

  3. We’ll tackle the repeat issue below<\/li>\n<\/ol>\n

    Background Repeat<\/h3>\n

    background-repeat\u00a0<\/strong>is enabled by default, to disable it we must set\u00a0no-repeat\u00a0<\/strong>as the value like this:<\/p>\n

    .background {\r\n    background-image: url(https:\/\/ucsbwebdev.fzilla.com\/first\/logo.png);\r\n    background-repeat: no-repeat;\r\n}<\/pre>\n
    Great, so we’ve applied two background declarations and now we have an image that does not repeat. But what if we also want to have a background color behind the logo in case the element has a bigger width\/height than the image itself? Simply apply the\u00a0background-color\u00a0<\/strong>as well like this:<\/p>\n
    \nSee the Pen background-repeat-color by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n
    Background Size<\/h3>\n
    background-size\u00a0<\/strong>is used to specify an alternative set of dimensions to the image. Let’s consider the following three examples:<\/p>\n
    \nSee the Pen background-size-examples by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n
    In\u00a0example1\u00a0<\/strong>we force the width and height of the image to be\u00a0width = 200px\u00a0<\/strong>and\u00a0height = 20px\u00a0<\/strong>and the image becomes a bit stretched as we’re not keeping the original image’s proportions<\/p>\n
    In\u00a0example2\u00a0<\/strong>we’re stating that we want the\u00a0width = 30%\u00a0<\/strong>which is\u00a0not based on the width of the image\u00a0<\/strong>but instead uses the width of the element (which in our case is set to 300px, so 30% is rougly 100px). Because we only define the width the height is actually automatically adjusted to keep the proportion of the image and does not stretch it.<\/p>\n
    In\u00a0example 3\u00a0<\/strong>we set the width =\u00a0100%\u00a0<\/strong>and the\u00a0height = 100%\u00a0<\/strong>meaning it will fit the container (element which has the background image)\u00a0both horizontally and vertically stretching it to fit.<\/p>\n
    Now let’s get more advanced with some special background-size properties<\/strong>,\u00a0consider the following examples:<\/p>\n
    \nSee the Pen background-fit by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n
    In\u00a0example1\u00a0<\/strong>we use a property value called\u00a0cover\u00a0<\/strong>which will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off on direction. In our case, it cuts off a lot from the right side to fit it vertically. If the image was higher than wider it would cut off from the bottom instead.<\/p>\n
    In\u00a0example2\u00a0<\/strong>we use the contain property value which resizes the background image to make sure the image is fully visible while filling the container as much as possible.<\/p>\n
    In\u00a0example 3\u00a0<\/strong>we specify a width of 10px and a height of\u00a0inherit,\u00a0<\/strong>as soon as we set the width or height to be inherit the image will display in its original sizing.<\/p>\n
    Shorthand Properties<\/h2>\n
    In many situations, we can use the shorthand properties to define a list of declarations in one line. For example, the background properties\u00a0background-color, background-image, and background-repeat\u00a0<\/strong>can easily be declared under a single\u00a0background\u00a0<\/strong>declaration like this:<\/p>\n
    .background {\r\n    background: black url('https:\/\/ucsbwebdev.fzilla.com\/first\/logo.png') no-repeat;\r\n}<\/pre>\n
    Also quite commonly we would not specify a margin or padding for each direction, instead would use a single declaration. To specify each direction we follow the following pattern\u00a0top right bottom left\u00a0<\/strong>or the way I remember it is using\u00a0Never Eat Sour Wheat<\/span>\u00a0<\/strong>which stands for\u00a0North East South West<\/strong>. Here are some examples:<\/p>\n
    .shorthand {\r\n    margin: 100px 0 0 50px;\r\n    padding: 50px 20px 30px 40px;\r\n}<\/pre>\n
    The result is equivalent to:<\/p>\n
    .shorthand {\r\n    margin-top: 100px;\r\n    margin-right: 0;\r\n    margin-bottom: 0;\r\n    margin-left: 50px;\r\n    \r\n    padding-top: 50px;\r\n    padding-right: 20px;\r\n    padding-bottom: 30px;\r\n    padding-left: 40px;\r\n}<\/pre>\n
    Important Trick to Center an Element<\/h3>\n
    Very often we want to have a large panel that contains all our website content, typically around 960px wide (fits in all desktop computer resolutions) which is centered. To do this we use a hack with the margin shorthand which looks like this:<\/p>\n
    \nSee the Pen padding-margin-shorthand by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n
    Or in a browser like this:<\/p>\n
    \"\"<\/p>\n
    Common 3 Column Layout with Flex<\/h2>\n
    \nSee the Pen 3columnflex by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n
    I’ve added a number of styling just to see it visually, but the important elements of this layout are as follows:<\/p>\n
      \n
    1. .main-wrap\u00a0<\/strong>has a width of 960px which is a standard and a\u00a0margin: 0 auto;\u00a0<\/strong>which keeps it centered on the page<\/li>\n
    2. .columns\u00a0<\/strong>is flex with a\u00a0justify-content: space-between\u00a0<\/strong>to keep the space between our columns even<\/li>\n
    3. .left-col\u00a0<\/strong>has a specific width, this is because very often we want a specific type of content which requires some minimal width<\/li>\n
    4. .center-col\u00a0<\/strong>has a %\u00a0width which is easier to set than doing a calculation ourselves (subtracting from 960 yada yada) and we also add a shorthand margin which adds a left and right margins of 15px. This adds a nice visual spacing between the columns<\/li>\n
    5. .right-col\u00a0<\/strong>uses a special feature of flex, when you set a column to be\u00a0flex: 1;\u00a0<\/strong>it simply takes up as much space as there is left available to grow. If we did not set this it would look like this\n
      \"\"
      \nWe don’t really want to have that much space between columns do we? With flex 1 it respects the margin from\u00a0.center-col\u00a0<\/strong>and takes up the remainder nicely.<\/p>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
      There are many important ways CSS can be used to make your website look beautiful. We’ll start with some special background properties and go all the way to advanced website layouts. Let’s get started. Background magic There are many different things you can do with backgrounds, set a color, set an image, make it repeat, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-128","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=128"}],"version-history":[{"count":4,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/128\/revisions"}],"predecessor-version":[{"id":139,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/128\/revisions\/139"}],"wp:attachment":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}