Viktor A.

Instructions - Step #1 - The first step is to find an image of your choice, the format of the image does not matter as we will later be changing this to a .ico extension

Step #2 - We will now convert the image from whatever extension it has to an .ico file. We can use this website, https://image.online-convert.com/convert-to-ico

Step #3 - Now that we have our image all we need to do is add this bit of html code to our site: "<link rel='icon' href='favicon.ico' type='image/x-icon'/ >, and we are finished!

Resources: https://www.101computing.net/html-how-to-add-a-favicon/

::: Entry #2 - How to Create Slanted Text :::

Summary - This quick tutorial will show you how to create text that is slanted or skewed. This will work with any text, or object on your site

Intructions - Step #1 - The first step is to create your webpage with something that you would like to slant or skew. Create a header, a paragraph or an image.

Step #2 - Add the following lines into your css code, you can add this code into your html document or create a seperate css document, both will work.

transform: skewY(20deg); transform: rotate(20deg); transform: skewX(-15deg);

Step - #3 - You are finished! You can change and play around with the values with whatever looks good to you. Other transform values you can add are scaleX(x); scaleY(y); translateY(y); translateX(x) and none, for no transformation.

Resources: https://www.w3schools.com/cssref/css3_pr_transform.asp

::: Entry #3 - How to Create A Custom Scrollbar :::

Summary - This quick tutorial will teach you how to add a custom scrollbar to your site.

Step #1 - The first step is to add the following lines of code to edit your websites scrollbar. The Webkit - scrollbar pseudo element lets us change the appearance of the scrollbar. This example below creates a thin grey scrollbar.

/* width */

::-webkit-scrollbar {

width: 10px;

}

/* Track */

::-webkit-scrollbar-track {

background: #f1f1f1;

}

/* Handle */

::-webkit-scrollbar-thumb {

background: #888;

}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

background: #555;

}

Step #2 - You can add the following pseudo element selectors to further change the appearance of the scrollbar. You can play around and change these until you find something that you enjoy.

::-webkit-scrollbar-button are the buttons on the scrollbar

::-webkit-scrollbar-thumb is the scrollbar handle that is draggable.

::-webkit-scrollbar-track is the progress bar of the scrollbar.

::-webkit-scrollbar-track-piece is the progress bar that is NOT covered by the handle.

::-webkit-scrollbar-corner is the bottom corner of the scrollbar where the horizontal and vertical scrollbars meet.

::-webkit-resizer is the draggable resizing handle that appears at the bottom corner of some elements.

Resources: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp