מדריך CSS + HTML – הבסיס – חלק 3

  <div>THIS IS TEXT ON THE BODY</div>
    <div class="popup-wrapper active">
        <div class="massage-wrapper">
            <h2>HI, I AM POPUP TITLE</h2>
            <p>this is the popup massage info to the user</p>
        </div>
    </div>

 .popup-wrapper {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
    }
    
    .popup-wrapper.active {
        display: block;
    }
    
    .popup-wrapper .massage-wrapper {
        width: 100%;
        max-width: 300px;
        background-color: snow;
        padding: 10px;
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translatey(-50%);
    }

  <div>
        <p>
            let's see how to make tooltip helper
            <i class="tooltip-wrapper active">i <span class="tooltip">hi, i am a tooltip</span></i>
        </p>
    </div>

.tooltip-wrapper {
        border: 1px solid silver;
        font-size: 16px;
        border-radius: 50%;
        position: relative;
        font-weight: bold;
        padding: 0 7px;
    }

    .tooltip-wrapper.active::after {
        content: '';
        border-top: 0 solid transparent;
        border-bottom: 12px solid skyblue;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        position: absolute;
        top: 100%;
        left: 0;
    }

    .tooltip-wrapper .tooltip {
        display: none;
    }

    .tooltip-wrapper.active .tooltip {
        display: block;
        position: absolute;
        background-color: skyblue;
        top: calc(100% + 12px);
        left: -50%;
        padding: 6px;
        width: 150px;
        border-radius: 4px;
        box-shadow: 1px 1px 3px 0 #000;
    }

.gradient-colors {
        background: linear-gradient(rgb(38, 0, 255), rgb(0, 217, 255)); /* up */
    }
.gradient-colors {
        background-image: linear-gradient(to right, rgb(38, 0, 255), rgb(0, 217, 255)); /* right */
    }
.gradient-colors {
        background: linear-gradient(to left, rgb(38, 0, 255), rgb(0, 217, 255)); /* left */
    }
.gradient-colors {
        background-image: linear-gradient(to bottom, rgb(38, 0, 255), rgb(0, 217, 255)); /* bottom */
    }
.gradient-colors {
        background-image: linear-gradient(to bottom right, rgb(38, 0, 255), rgb(0, 217, 255)); /* bottom and right*/
    }
.gradient-colors {
        background-image: linear-gradient(120deg, rgb(38, 0, 255), rgb(0, 217, 255)); /* 120 deg */
    }
 .gradient-colors {
        background: linear-gradient(120deg, rgb(38, 0, 255) 50%, rgb(0, 217, 255) 50%); /* 50% full color */
    }

.gradient-colors {
        background-image: radial-gradient(rgb(30, 255, 0) 10%, blue 30%, orange 20%);
    }
.gradient-colors {
        background-image: radial-gradient(circle, red, yellow, green);
    }
.gradient-colors {
        background-image: radial-gradient(closest-side at 60% 55%, red, yellow, green);
    }
.gradient-colors {
        background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, green);
    }
.gradient-colors {
        background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, green);
    }
.gradient-colors {
        background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, green);
    }
 .gradient-colors {
        background-image: repeating-radial-gradient(circle, red 5%, yellow 15%, green 25%);
    }

<div class="header">
        <nav>
            <button class="menu">Menu</button>
            <ul class="options">
                <li><a href="#">option 1</a></li>
                <li><a href="#">option 2</a></li>
                <li><a href="#">option 3</a></li>
                <li><a href="#">option 4</a></li>
                <li><a href="#">option 5</a></li>
            </ul>
        </nav>
    </div>

.header {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        background-color: rgb(104, 192, 142);
        padding: 10px;
    }
    
    .header nav {
        position: relative;
        display: inline-block;
    }
    
    .header nav .menu {
        background-color: lightsalmon;
        border: none;
        padding: 4px 8px;
        font-size: 20px;
        border-radius: 4px;
    }
    
    .header nav .options {
        display: none;
        position: absolute;
    }
    
    .header nav:hover .options {
        display: block;
        margin: 0;
        list-style-type: none;
        background-color: skyblue;
        border-radius: 4px;
        padding: 0;
        overflow: hidden;
        box-shadow: 1px 1px 3px 0 #000;
    }
    
    .header nav:hover .options a {
        text-decoration: none;
        padding: 4px 8px;
        font-size: 18px;
        color: black;
        display: inline-block;
        width: 100px;
    }
    
    .header nav .options a:hover {
        background-color: cadetblue;
    }