One place for hosting & domains

      Customize

      How To Customize the Browser’s Scrollbar with CSS


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Introduction

      Custom scrollbars are getting popular, and you might have come across websites that have unique scrollbars, making the sites feel and look different. There are basically a few ways to implement a custom scrollbar.

      In this tutorial we will be using CSS3, which is the most straightforward way. However, there are jQuery plugins that can help with customizing scrollbar, but I do not like to add more JavaScript to my website. If you are a designer, photographer or you just want your website to have a cool scrollbar, go ahead with the jQuery plugins.

      Custom scrollbars are exposed behind the -webkit vendor prefix for use in browsers using the Webkit (and Blink) rendering engine.

      Screenshot depicting the scrollbar-thumb and scrollbar-track parts to a scrollbar.

      -webkit-scrollbar consists of seven different pseudo-elements, and together comprise a full scrollbar UI element:

      1. ::-webkit-scrollbar the background of the bar itself.
      2. ::-webkit-scrollbar-button the directional buttons on the scrollbar.
      3. ::-webkit-scrollbar-track the empty space “below” the progress bar.
      4. ::-webkit-scrollbar-track-piece the top-most layer of the the progress bar not covered by the thumb.
      5. ::-webkit-scrollbar-thumb the draggable scrolling element resizes depending on the size of the scrollable element.
      6. ::-webkit-scrollbar-corner the bottom corner of the scrollable element, where two scrollbar meet.
      7. ::-webkit-resizer the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements.

      Now that you are familiar with the terminologies, let’s start!

      Setting Up the Project

      First, create index.html and style.css files, and open the current directory with your code editor.

      index.html

      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="UTF-8" />
              <title>Customize the Browser's Scrollbar with CSS</title>
              <link type="text/css" rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css">
          </head>
          <body>
              <div class="scrollbar" id="style-1">
                  <div class="force-overflow"></div>
              </div>
          </body>
      </html>
      

      You’ll need to include the style.css file in the HTML file. You can type out the above HTML code or just copy and paste into your HTML file.

      Firstly, we set the .scrollbar (class) width, height, background-color, then set overflow-y: scroll to get the vertical scrollbar. We set min-height: 450px to the .force-overflow div so that the scrollbar appears (because we used the overflow-y property to scroll in .scrollbar class).

      styles.css

      .scrollbar {
          background-color: #F5F5F5;
          float: left;
          height: 300px;
          margin-bottom: 25px;
          margin-left: 22px;
          margin-top: 40px;
          width: 65px;
          overflow-y: scroll;
      }
      
      .force-overflow {
          min-height: 450px;
      }
      

      Screenshot depicting the current default appearance of the scrollbar.

      Now, we use the scrollbar pseudo-element for creating our custom scrollbar. It will replace its default width with a new width of 6px and then add background-color: #F5F5F5.

      styles.css

      #style-1::-webkit-scrollbar {
          width: 6px;
          background-color: #F5F5F5;
      }
      

      Since we know that scrollbar contains track, button and thumb, we are now going to give a stylish look to thumb. We use pseudo-element (i.e., ::-webkit-scrollbar-thumb) with -webkit prefix and set scrollbar-thumb background- color.

      styles.css

      #style-1::-webkit-scrollbar-thumb {
          background-color: #000000;
      }
      

      After that, the scrollbar looks like this:

      Screenshot of the modified scrollbar with a black scrollbar-thumb.

      We use box-shadow on scrollbar-track to make it stylish and add contrast between the scrollbar and scrollbar-track.

      styles.css

      #style-1::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
          background-color: #F5F5F5;
      }
      

      Screenshot of the modified scrollbar with a black scrollbar-thumb and light-colored scrollbar-track.

      Conclusion

      In this article, we covered:

      • Customized scrollbars aren’t uncommon anymore. You will find them in major websites and blogs, especially personal portfolio websites.
      • There are tons of jQuery plugins that can help with customizing scrollbar.
      • Custom scrollbars are exposed behind the -webkit vendor prefix.
      • Basic structure of a scrollbar.
      • Terminologies associated with scrollbars.

      The CSS way of customizing scrollbars is simple, but looks a bit rough. However, operating systems like Windows, OS X and Linux have their own style for the scrollbar. This in return could lead to undesirable results and inconsistencies for your design. Remember, you should keep it simple, stupid (KISS), not too fancy.

      I have created more scrollbars using the above procedure. I made use of codePen for the demo, and you can find the full code for this tutorial on CodePen.

      Screenshot of a demo with many customized scrollbars in different colors and sizes.

      That’s all. I hope you like it!

      Make sure to leave any thoughts, questions or concerns in the comments below. I would love to see them.

      Acknowledgements

      @twholman Codepen





      Source link

      Customize Underlines with text-decoration in CSS


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      They say good things come to those who wait, and this turns out to be very true when it comes to text decoration on the web. The CSS Text Decoration Module Level 3 defines a few great new ways to decorate text on the web, and browsers are finally starting to have good support for them. The times of using border-bottom instead of a proper text underline in order to get a different underline color may finally come to pass.

      Results may vary: support is still limited, so the examples in this post may not display correctly depending on the browser you’re using.

      text-decoration

      The text-decoration property used to be only about a choice between values of none, underline, overline and line-through, but with the new recommendation is becomes a shorthand for the new text-decoration-color, text-decoration-style and text-decoration-line properties. For example, here’s a colored double underline:

      .fancy {
        -webkit-text-decoration: hotpink double underline;
        text-decoration: hotpink double underline;
      }
      

      Fancy Underline

      text-decoration-color

      Works just as you would imagine. Finally a way to change the text decoration color!

      text-decoration-style

      text-decoration-style is used to define the type of text decoration, and the new recommendation brings two new values: double and wavy:

      .wavy {
        text-decoration: underline;
        -webkit-text-decoration-color: salmon;
        text-decoration-color: salmon;
        -webkit-text-decoration-style: wavy;
        text-decoration-style: wavy;
      }
      

      Wavy Decoration

      text-decoration-line

      text-decoration-line accepts values of underline, overline, line-through and blink (blink is deprecated however):

      .strike {
        -webkit-text-decoration-color: red;
        text-decoration-color: red;
        -webkit-text-decoration-line: line-through;
        text-decoration-line: line-through;
      }
      

      Strike This

      text-decoration-skip

      With text-decoration-skip we can avoid having the decoration step over parts of the element its applied to. The possible values are objects, spaces, ink, edges and box-decoration.

      • ink: Finally, a way to prevent text decoration from overlapping glyph descenders:
      .ink {
        -webkit-text-decoration: darkturquoise solid underline;
        text-decoration: darkturquoise solid underline;
        -webkit-text-decoration-skip: ink;
        text-decoration-skip: ink;
      }
      

      Hippopotamus


      • objects: The text decoration skips elements that have a display of inline-block. It’s also the initial value:
      <p class="super">
        Getting <span style="display: inline-block;">Very</span> Fancy
      </p>
      
      .super {
        -webkit-text-decoration: peru solid overline;
        text-decoration: peru solid overline;
        -webkit-text-decoration-skip: objects;
        text-decoration-skip: objects;
      }
      

      Getting Very Fancy


      The remaining values are not yet well supported by browsers:

      • spaces: The decoration skips spaces and punctuation.
      • edges: Creates a gap when two elements with text decoration are next to each other.
      • box-decoration: The decoration skips any inherited margin, padding or border.

      text-underline-position

      With text-underline-position we have yet another way to control the positioning of text decoration in relation to the glyphs. The possible values are auto, under, left and right.

      With auto, the initial value, browsers will usually place the decoration close to the text baseline:

      .auto {
        -webkit-text-decoration: slateblue solid underline;
        text-decoration: slateblue solid underline;
        -webkit-text-underline-position: auto;
        text-underline-position: auto;
      }
      

      Hippopotamus

      …and notice now how, with under, the decoration is placed after the text descenders:

      .under {
        -webkit-text-decoration: slateblue solid underline;
        text-decoration: slateblue solid underline;
        -webkit-text-underline-position: under;
        text-underline-position: under;
      }
      

      Hippopotamus

      The left and right values for text-underline-position are used to control text decoration in vertical writing modes.

      Now go on and impress us with some fancy text decoration!

      Browser Support: As of 2020, Can I Use text-decoration? shows that 94% of browsers worldwide have at least partial support for the property.



      Source link

      How To Create and Customize Tables in HTML



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      HTML tables are useful for arranging content in rows and columns. This tutorial will teach you how to add a table to your webpage and how customize it by adding a desired amount of rows and columns.

      A <table> element requires the use of one or more table row <tr> elements, which create table rows, and one or more table data <td> elements, which insert content into table columns. Each of these elements require an opening and closing tag. The table data <td> elements go inside the table row <tr> elements, and the table row <tr> elements go inside the <table> elements. For example, here is a table that has two rows and three columns:

      <table>
      <tr> 
      <td> Column 1 </td>
      <td> Column 2 </td>
      <td> Column 3 </td>
      </tr>
      <tr> 
      <td> Column 1 </td>
      <td> Column 2 </td>
      <td> Column 3 </td>
      </tr>
      <table>
      

      Clear your index.html file and paste the code snippet above into the document. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project.)

      Save and reload the file in the browser to check your results. (For instructions on loading the file in your browser, please visit this step of our tutorial on HTML Elements.)

      Your webpage should now have a table with three columns and two rows:

      3 columns, 2 rows table

      To add an additional row, add another <tr> element like so:

      <table>
      <tr> 
      <td> Column 1 </td>
      <td> Column 2 </td>
      <td> Column 3 </td>
      </tr>
      <tr> 
      <td> Column 1 </td>
      <td> Column 2 </td>
      <td> Column 3 </td>
      </tr>
      <tr> 
      <td> Column 1 </td>
      <td> Column 2 </td>
      <td> Column 3 </td>
      </tr>
      <table> 
      

      Save your results and check them in your browser. You should receive something like this:

      3 Columns and 3 Rows Table

      To add another column, try adding another table data <td> element inside each of the table row <tr> elements like so:

      <table>
      <tr> 
      <td> Column 1 </td>
      <td> Column 2 </td>
      <td> Column 3 </td>
      <td> Column 4 </td>
      </tr>
      <tr> 
      <td> Column 1 </td>
      <td> Column 2 </td>
      <td> Column 3 </td>
      <td> Column 4 </td>
      </tr>
      <tr> 
      <td> Column 1 </td>
      <td> Column 2 </td>
      <td> Column 3 </td>
      <td> Column 4 </td>
      </tr>
      <table>
      

      Save your results and check them in your browser. You should receive something like this:

      4 Columns, 3 Rows Table

      Tables can be styled by adding attributes to the <table> element. For example, you can add a border to the table with the border attribute like so:

      <table border=”1”>
      <tr> 
      <td> Row 1 </td>
      <td> Row 2 </td>
      <td> Row 3 </td>
      </tr>
      <tr> 
      <td> Row 1 </td>
      <td> Row 2 </td>
      <td> Row 3 </td>
      </tr>
      <table>
      

      Try adding the border attribute to your table and checking your results in the browser. (You can clear your index.html file and paste in the HTML code snippet above.) Save your file and load it in the browser. You should receive something like this:

      Table with Border

      You should now understand how to add tables to your webpage and how to customize the amount of rows and columns a table contains. Tables can also be used to arrange content on your web page. There are also many other attributes you can use to style your table. We’ll return to tables as a layout tool and explore their styling possibilities later on in this tutorial series when we begin building our website.



      Source link