CSS - Natour Part3

Posted on

Today’s notes is for the Section 5, Lecture 42-47 of this udemy course.

Lecture 42-44

Screenshots

How to create a circled picture

First we define how the element outside will align with the element. In this case, the text on the right hand side.

1
2
3
4
5
6
7
.story__shape {
    float: left;
    width: 5rem;
    height: 5rem;
    -webkit-shape-outside: circle(50% at 50% 50%); // diameter, circle center point
    shape-outside: circle(50% at 50% 50%); //only work if the element is floating and have dimensions set.
}

Then we circle the element itself.

1
2
3
4
.story__shape {
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
}

How to put a video at the background

1
2
3
4
5
6
7
<div class="bg-video">
    <video class="bg-video__content" autoplay muted loop>
        <source src="img/video.mp4" type="video/mp4">
        <source src="img/video.webm" type="video/webm">
        Your broswer is not supported!
    </video>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: .15;
    overflow: hidden;

    &__content {
        height: 100%;
        width: 100%;
        object-fit: cover; // work as background-fit, but work for html element
    }
}

Lecture 45-47

Screenshots

Another way of clipping the background image

We can achieve this by specifying two layer of background image with the first layer being a gradient. Then specify the angle and the transition of the gradient to create a skewed transparent layer on top of the image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.book {
    background-image: linear-gradient(
            105deg, 
            rgba($color-white, .9) 0%,
            rgba($color-white, .9) 50%,
            transparent 50%) 
        ,url(../img/nat-10.jpg); // angle, color potiion, color position, color position.
    background-size: cover;
    border-radius: 3px;
    box-shadow: 0 1.5rem 4rem rgba($color-black, .2);
    height: 50rem;

    &__form {
        width: 50%;
        padding: 6rem;
    } // place the form at the left side
}

Customize radio button input

1
2
3
4
5
6
7
<div class="form__radio-group">
    <input id="small" type="radio" class="form__radio-input" name="size">
    <label for="small" class="form__radio-label">
        <span class="form__radio-button"></span>
        Small tour group
    </label>
</div>

Create radio btn using span

1
2
3
4
5
6
7
8
9
10
&__radio-button {
    height: 3rem;
    width: 3rem;
    border: 5px solid $color-primary;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 0;
    top: -0.4rem;
}

Create the selected effect

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
&__radio-button {
    &::after {
        height: 1.3rem;
        width: 1.3rem;
        content: "";
        display: block;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: $color-primary;
        opacity: 0; // set to transparent by default
        transition: opacity .2s;
    }
}

Connect to the real input

1
2
3
&__radio-input:checked ~ &__radio-label &__radio-button::after {
    opacity: 1;
} // when the radio-input is checked, the radio-button inside the sibline radio-label, it's after class got showed.

Hide the real input

1
2
3
&__radio-input {
    display: none;
}