Unit 2 Part II

Flex box
Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill
additional space or shrink to fit into smaller spaces.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {

background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Create a Flex Container</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<p>A Flexible Layout must have a parent element with the <em>display</em> property set to
<em>flex</em>.</p>
<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>
</body>
</html>
The flex container properties are:
 flex-direction
 flex-wrap
 flex-flow
1
 justify-content
 align-items
 align-content
The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items.
.flex-container {
display: flex;
flex-direction: column;
}
The column-reverse value stacks the flex items vertically (but from bottom to top):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
The row value stacks the flex items horizontally (from left to right):
.flex-container {
display: flex;
flex-direction: row;
}
2
The row-reverse value stacks the flex items horizontally (but from right to left):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.
.flex-container {
display: flex;
flex-wrap: wrap;
}
The nowrap value specifies that the flex items will not wrap (this is default):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:
3
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
The flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
.flex-container {
display: flex;
flex-flow: row wrap;
}
The align-items Property

The align-items property is used to align the flex items.
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
4
The flex-start value aligns the flex items at the top of the container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
The flex-end value aligns the flex items at the bottom of the container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
The align-content Property

The align-content property is used to align the flex lines.
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
5
Transitions and animations
 Transitions provide a change from one state to another, while animations can set multiple points of
transition upon different keyframes.
 Animations within CSS allow the appearance and behavior of an element to be altered in multiple
keyframes.
CSS TRANSITIONS CSS ANIMATIONS
 Can move from initial to final state, with

 Can only move from initial to final state — intermediate steps in between
no intermediate steps
 Can loop infinitely thanks to animation-
 Can only run once iteration-count property
 Require a trigger to run (like mouse  Can be triggered but can also run
hover) automatically
 Run forwards when triggered and in  Can run forwards, in reverse, or alternate
reverse when trigger is removed directions
 Easier to use with JavaScript  More difficult to use with JavaScript
 Best for creating a simple change from one  Best for creating a complex series of
state to another movements
6
CSS Transitions
 If you just want a simple action on your site, a transition is the easiest way to go. Transitions are connected
to a triggering action — most commonly, when the mouse hovers over an element.
 Used to set an element to change its color, scale, or position. Can also rotate, skew, and translate objects.
 For instance, if you want your transition to alter the background color and width, you specify entries for
both background-color and width properties.
CSS Transition Properties
 To create a transition, use the transition shorthand property, or a combination of the sub-properties below.
o transition-property: specifies the name of the CSS property the transition effect is for. So, for
example, if this property is set to “width,” then the transition effect will take place when a user
hovers over the element and its width begins to change.
o transition-duration: specifies the length of time the transition effect takes to complete.
o transition-timing-function: sets the pace of the transition effect.
o transition-delay: specifies when the transition effect begins.
 CSS Transition Examples
o Stretch on Hover Example
The element below alternates between two definite states depending on where the mouse is. If
hovering over the element, then the transition is triggered so the element becomes much taller but
narrower, appearing stretched out.
o Spacebar Counter Example

7
The number of times a user hits the spacebar is "recorded". The number will return to 0 when the
user hits the Restart button.
Button Example
When hovering over the element below, the arrow becomes a rectangle so the text "Let's go!" looks like a button.
CSS Animations
Animations give more flexibility. With CSS animations, set different stages that alter the behavior of the element
multiple times in its duration. This gives more control over the property values in animations.
Define a set of keyframes. Keyframes indicate the start and end of the animation, as well as any intermediate
steps between the start and end. In other words, each keyframe describes how the animated element should render
at a given time during the animation sequence.
With these capabilities, you can create HTML5 animations to rival those created by advanced tools like Flash.
Animations specify property values in each keyframe without having to declare them. The element smoothly
changes behavior once the right keyframe is reached, even if the property wasn't listed at the start.
CSS Animation Properties
Only the animation-name and animation-duration properties are required. If the other properties aren’t specified,
then they’ll be set to their default values.
o animation-name: specifies the type of animation, are required.
o animation-duration: specifies the length of time of the animation sequence.
o animation-timing-function: sets the pace of the animation.
o animation-delay: specifies when the animation starts. Can use milliseconds or seconds, and
positive or negative values.
o animation-direction: defines the direction of the animation.
o animation-fill-mode: specifies whether the animation styles are applied before or after the
animation plays.
o animation-iteration-count: specifies the number of times that the animation will play.
8
o animation-play-state: used to pause and resume the animation sequence.
Looping CSS Animations
Unlike a transition, which only plays through once after it’s been triggered, a CSS animation doesn’t require a
triggering action and can be set to loop. You can make it repeat as many times as you want or set it to go on
forever. You make this specification using the animation-iteration-count property, which lets you set its value in
number of seconds or infinite.
CSS Animation Example: There are multiple states that the graphic passes through and it loops. The steam shrinks
in size, ascends upwards, and fades away. This image is much more dynamic than a CSS transition would be.
Case Studies: Twitter Bootstrap, Animate.CSS, Google Fonts, GlyphIcons.
Twitter Bootstrap
o Twitter Bootstrap is a front end framework to develop web apps and sites fast. In modern web
development, there are several components which are required in almost all web projects.
o Bootstrap provides you with all those basic modules - Grid, Typography, Tables, Forms, Buttons, and
Responsiveness.
o Besides, there are a plethora of other useful front-end components like Dropdowns, Navigation, Tab,
Thumbnails, Headers etc. With these, you can make a web project up and running quickly and easily.
o Moreover, since the entire framework is module based, you can customize it with your own bit of CSS or
even go for a complete overhaul after getting started.
o Bootstrap made projects looks same and you can make a website up without much of HTML+CSS
knowledge, we need to understand that Bootstrap is a generic framework and like any other generic stuff,
you need to customize it to look it exclusively.
Animate.CSS
o Animate.css is a library of ready-to-use, cross-browser animations for use in web projects. Great for
emphasis, home pages, sliders, and attention-guiding hints.
o Animate.css uses custom properties (also known as CSS variables) to define the animation's duration,
delay, and iterations. This makes Animate.css very flexible and customizable.
o Custom properties also make it easy to change animation's time-constrained properties on the fly. It means
that you can have a slow-motion or time-lapse effect with a javascript.
o Example:
9
// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');
// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');
Google Fonts
o CSS Google Fonts is a service by Google that provides a diverse collection of web fonts for free. It allows
web developers to easily integrate custom fonts into their websites using CSS. Google Fonts, launched in
2010, is the largest free and open-source font library online, available for personal and commercial use.
o Google Fonts provides us with API, we have to call that API so that we get a JavaScript file or say script
file which we have to include in our HTML code so that we can use different Google fonts.
o There are two common methods that can be used to use Google fonts in our HTML files.
o Using Link Tag Method
o CSS @import Method
Add Google Fonts using Link Tag in CSS:
<html>
<head>
<title>CSS Google fonts</title>
<link href= 'https://fonts.googleapis.com/css?family=Roboto|Pacifico' rel='stylesheet'>
<style>
h1 { font-family: 'Lobster', cursive; }
p { font-family: 'Pacifico', cursive; }
</style>
</head>
<body>
<h1>BMSCE</h1>
<p>ISE Department</p>
</body>
</html>
Add Google Fonts using @import in CSS:

Use the @import rule in CSS file to import the Google Fonts, and then apply it to the desired elements.
<html>
<head>
<title>CSS Google Fonts</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto|Pacifico&display=swap');
10
h1 { font-family: 'Lobster', cursive; }
p { font-family: 'Pacifico', cursive; }
</style>
</head>
<body>
<h1>BMS College of Engineering</h1>
<p>Department of ISE</p>
</body>
GlyphIcons
Bootstrap provides 260 glyphicons from the Glyphicons Halflings set. Glyphicons can be used in text, buttons,
toolbars, navigation, forms, etc.
Examples:
Example:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
11
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<a href="#">
<span class="glyphicon glyphicon-envelope"></span>
</a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
</div>
</body>
</html>
12

Unit 2 Part II

Uploaded by

Copyright:

Available Formats

Unit 2 Part II

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 2 Part II

Uploaded by

Copyright:

Available Formats

Flex box

.flex-container > div {

The flex container properties are:

The flex-direction Property

The flex-wrap Property

The flex-flow Property

The align-items Property

The align-content Property

CSS TRANSITIONS CSS ANIMATIONS

 Can move from initial to final state, with

o Spacebar Counter Example

Case Studies: Twitter Bootstrap, Animate.CSS, Google Fonts, GlyphIcons.

Add Google Fonts using @import in CSS:

You might also like