D.I.Y
borders:
.demo {
width: 100px;
height: 100px;\
border-width: thin; /* thin, medium, thick, 10px */
border-style: solid; /* dotted, dashed, solid, double, groove, ridge, inset, outset */
border-color: yellow; /* any colour in any unit*/
/* border shorthand */
border: 1px solid red;
}
D.I.Y
border radius:
.border {
width: 100px;
height: 100px;
/* border shorthand
border: 2px solid red;
*/
border-radius: 1em; /* 1em = 16px */
D.I.Y
Border Radius in Too Depth:
.border {
width: 100px;
height: 100px;
/*
* border-radius: 1em;
*
* border-radius: border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
*
*
* border-top-left-radius: border-top-left-top-radius border-top-left-left-radius;
* border-top-right-radius: border-top-right-top-radius border-top-right-right-radius;
* border-bottom-right-radius: border-bottom-right-bottom-radius border-bottom-right-right-radius;
* border-bottom-left-radius: border-bottom-left-bottom-radius border-bottom-left-left-radius;
*
* can be used for creating blobs
* shorthand:
*/
border-radius: 1em 2em 3em 4em;
border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}
D.I.Y
Border Radius Image:
.border {
width: 100px;
height: 100px;
border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
border-image-slice: 61 58 51 48; /* top right bottom left*/
border-image-width: 20px 20px 20px 20px; /* top right bottom left*/
border-image-outset: 0px 0px 0px 0px; /* top right bottom left: distance between your border image and the box that it wraps around*/
border-image-repeat: stretch stretch;
}
D.I.Y
-
Create an image card with rounded borders
D.I.Y
-
Create an image card with rounded borders 3 elliptical and 1 rounded border like in the website.
Flexbox - Flexible Box Layout Model
→ Flexbox is a layout mechanism
- it allows you to arrange the "Content" in the box, along one axis.
→ Flex items move as a group on either one axis.
⟶ but on the other axis items can move individually or as a group.
Flex-box is one dimensional, you can control alignment in one axis, a row or a column, not both.
Think of your webpage as a 2-dimensional plain, with 2 axis:
X-axis or Main axis ⟶ (inline flow)
Y-axis or Cross axis ⟶ (block flow)
Flex divides the boxes in the layout in 2 parts:
- the container (parent element, known as “flex container”)
- the children (“flex items”).
Both have different set of properties.
D.I.Y
.flex-container {
display: flex;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
Starting with Flex
Set the display of the box as "flex".
This box is the flex-container.
This is the box where your "content" is present.
D.I.Y
.flex-container {
display: flex;
flex-direction: column; /* row | row-reverse | column | column-reverse */
border: 1px solid black;
padding: 10px;
margin: 10px;
}
row: horizontal, left-to-right, default,
column: vertical, top-to-bottom
row-reverse: horizontal, right-to-left
column-reverse: vertical, bottom-to-top
D.I.Y
flex-direction:
Establishes which direction will be regarded as the Main-axis.
.flex-container {
display: flex;
flex-direction: column; /* row | row-reverse | column | column-reverse */
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
border: 1px solid black;
padding: 10px;
margin: 10px;
}
no-wrap: items will not wrap, default,
wrap: items will wrap, top to bottom,
wrap-reverse: items will wrap, bottom to top,
D.I.Y
flex-wrap:
.flex-container {
display: flex;
/*
* flex-direction: column; // row | row-reverse | column | column-reverse
* flex-wrap: wrap; // nowrap | wrap | wrap-reverse
*/
/*OR*/
flex-flow: column wrap;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
shorthand for the flex-direction
and flex-wrap
properties
D.I.Y
flex-flow:
- flex-start:
- flex-end: different from row-reverse
- center:
- space-between:
- space-around: space between 2 items add up, space between edges are equal.
- space-evenly: space between items and edges are equal.
- start, end, left, right:
justify-content
Arranges items along the Main axis
Note: Here we are assuming the main-axis as x-axis
(flex-direction: row;
).
D.I.Y
justify-content
- stretch (default): stretch to fill the container
- flex-start / start / self-start: items are placed at the start of the cross axis.
- flex-end / end / self-end: items are placed at the end of the cross axis.
- center: items are centered in the cross-axis
- baseline: items are aligned such as their baselines align.
align-items
It handles arrangement of items on the cross-axis.
Affects only one line of items, if the items wrap to next line, on the next line also they are arranged as per this rule.
D.I.Y
align-items
- normal (default):
-
flex-start / start:
start honors the writing-mode, -
flex-end / end:
end honors the writing-mode - center: items centered,
- space-between: equal space around items,
- space-around: equal space around each line,
- space-evenly: equal space around items and line,
- stretch: lines stretch to take up the remaining space
align-content
- Works along the cross-axis.
- This property only takes effect on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse).
align-content
D.I.Y
Difference of align-content and align-items
If flex-direction is set to row,
Main-axis is X-axis, inline-flow
justify-content works along X-axis,
align-items works along Y-axis.
Now align-content, will also arrange items on Y-axis, but only those which have been wrapped on the next line.
W1_D3
By Yash Priyam
W1_D3
- 150