Day 5

transitions in Cards:

transitions in CSS:

Transform functions: rotate(), scale(), translate(), skew()
Color: all the places where we add colors like, background color, border-color etc.
Shadows: different shadows like text-shadow, drop-shadow, box-shadow can be animated for various different effect.
An example:
https://codepen.io/Yash-Priyam/pen/OJaaJpd
Filters: there are many filter functions in CSS, like: blur, brightness, contrast, grayscale etc.

On which CSS properties we can add transitions? Almost all, but here are a few interesting examples:

Try applying transform: scaleX on image cards

transform function in CSS:

The HTML <video> tag:

This is used for rendering videos in HTML

video tag:

<video 
       class="video" 
       controls 
       muted 
       autoplay 
       loop 
       playsinline 
       src="https://vod-progressive.akamaized.net/exp=1705735475~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F2150%2F8%2F210754025%2F722786077.mp4~hmac=9499289411262f2ef6a4e07a722c39fe2fd137de9cdcf344ccbeed196bec2f57/vimeo-prod-skyfire-std-us/01/2150/8/210754025/722786077.mp4?download=1&filename=pexels_videos_2903+%281080p%29.mp4" type="video/mp4">
</video>

Animations with CSS:

.home {
  animation: pulse 1000ms linear infinite;
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

@keyframes my-animation {
 from {
  transform: translateY(20px);
 }
 to {
  transform: translateY(0px);
 }
}

/* animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode: forwards, backwards, both
animation-play-state */

animation-timing-function:

animation-iteration-count:
The animation-iteration-count property defines how many times the @keyframes timeline should run. Can use infinite for looping.

animation-play-state:
paused, running etc.

Animating text using css-animations:

Creating the hero section of our app:

The HTML anchor <a> tag:

This is used for multiple purposes, based on it's attributes such as href, target, download etc.

href property:


<!-- Opens the linked document -->

<a href="https://www.bewebmasters.com">Visit WebMasters</a>


<!-- link to an email address -->

<a href="mailto:someone@example.com">Send email</a>


<!-- link to a phone number: -->

<a href="tel:+4733378901">+47 333 78 901</a>


<!-- link to another section on the same page: -->

<a href="#section2">Go to Section 2</a>


<!-- link to a JavaScript: -->

<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

The HTML anchor <a> tag:

This is used for multiple purposes, based on it's attributes such as href, target, download etc.

target property:
_blank
_parent
_self
_top


<!-- Opens the linked document in a new window or tab -->

<a href="https://www.bewebmasters.com" target="_blank">Visit WebMasters</a>


<!-- Opens the linked document in the same frame as it was clicked (this is default) -->

<a href="https://www.bewebmasters.com" target="_self">Visit WebMasters</a>


<!-- Opens the linked document in the parent frame -->

<a href="https://www.bewebmasters.com" target="_parent">Visit WebMasters</a>


<!-- Opens the linked document in the full body of the window -->

<a href="https://www.bewebmasters.com" target="_top">Visit WebMasters</a>

Difference between id and class?

Difference between “id” and “class” attributes:

“id” can be used as fragment identifier for in-page navigation.
“id” can associate any form element with it’s label (optional, but best for accessibility and usability). “id” has multiple other properties that help in accessibility.
“id” has the highest specificity in css selection among id, class and tag name.

Note:

id's are meant to be unique while classes can be re-used on multiple elements.

Yet there'd be no errors on using same id on multiple tags.

“id” can be used as fragment identifier

Demo Day 5

By Yash Priyam

Demo Day 5

More from Yash Priyam