What is Responsiveness?
- In this growing era of technology we have different types of screens like mobile, laptops of different sizes, iPads of different sizes, and different sizes Tablets.
- In Web Development it will be very hectic and everything will get muddled up if we start creating a different webpage for different sizes of screens.
- So we use Responsiveness while creating web pages so that they can adjust according to the sizes of the screens.
Creating A Responsive web page.
- Setting up viewport.
The viewport is the user's visible area of a web page. The viewport varies with the device and will be smaller on a mobile phone than on a computer screen.
You should include the following<meta>viewport element in all your web pages inside<head>tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Grid View For responsiveness.
- Many web pages are based on a grid-view, which means that the page is divided into columns:
- A responsive grid-view often has 12 columns, has a total width of 100%, and will shrink and expand as you resize the browser window.
First ensure that all HTML elements have the box-sizing property set to border-box
*{ box-sizing: border-box; }However, we want to use a responsive grid-view with 12 columns, to have more control over the web page. First we must calculate the percentage for one column: 100% / 12 columns = 8.33%.
Then we make one class for each of the 12 columns. By this we can divide the width of a column according our use.Media Queries
- It is the most important and most used method for responsiveness.
- It uses the
@mediarule to include a block of CSS properties only if a certain condition is true./* If the browser window is 600px or smaller, padding will become 2rem. */ @media only screen and (max-width: 600px) { body { padding: 2rem; } }Other CSS properties to create a Responsive web page
- Use these CSS properties for IMAGE responsiveness:-
/* If the width property is set to a percentage and the height property is set to "auto", the image will be responsive and scale up and down:*/ img { width: 100%; height: auto; }/* If the max-width property is set to 100%, he image will scale down if it has to, but never scale up to be larger than its original size:*/ img { max-width: 100%; height: auto; }
What is Animation in Web Development?
Animation is the way to make a Web-page attractive and creative.
- (here we will see animation with CSS and without javascript)
- Animation in CSS is nothing but jumping from one property and style to another.
- Here is a great website to know what animation is.
- Click the link and you will go to a page that REACTS
Garden eight
- Click the link and you will go to a page that REACTS
What are the important properties of CSS animation
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
This
@keyframesrule specifies the animation code.- The animation is created by gradually changing from one set of CSS styles to another.
- During the animation, you can change the set of CSS styles many times.
- Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
- More about @keyframes
The
animation-nameproperty specifies the names of one or more@keyframesthat describes the animation to apply to an element.
- Multiple
@keyframesare specified as a comma-separated list of names.- If the specified name does not match any
@keyframes, no properties are animated.
The
animation-durationCSS property sets the length of time that an animation takes to complete one cycle.The
animation-delayCSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.The
animation-iteration-countCSS property sets the number of times an animation sequence should be played before stopping.The
animation-directionCSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.The
animation-timing-functionCSS property sets how an animation progresses through the duration of each cycle.The
animation-fill-modeCSS property sets how a CSS animation applies styles to its target before and after its execution.The
animationproperty can be used to use all the above properties in a single property
gdsc-cec {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
gdsc-cec{
animation: example 5s linear 2s infinite alternate;
}
🤝🏻 Connect with Me
