mirror of https://github.com/rjbasitali/tutorials
chap 7
parent
df8c05a477
commit
6b2431a9f2
|
|
@ -0,0 +1,121 @@
|
||||||
|
# Understanding Background Images And Images
|
||||||
|
|
||||||
|
## Understanding `background-size`
|
||||||
|
|
||||||
|
The `background: url("");` property we have been using is actually a shorthand and can be replaced with `background-image: url("");`.
|
||||||
|
|
||||||
|
We can also use `background-color` to set a solid color.
|
||||||
|
|
||||||
|
For sizing, we can use the `background-size` property, which takes in a couple of values. If we set `background-size: 100px` to a fairly larger element, the image will be repeated.
|
||||||
|
|
||||||
|
We can disable the repeatition of image using the `background-repeat` property, we can assign it `no-repeat` to remove the repeatition, or we can use the other possible values `repeat-x` and `repeat-y`, to repeat the imaage horizontally or vertically.
|
||||||
|
|
||||||
|
If you only assign a single value to `background-size` property, which is the `width` of the image, the `height` will be set automatically to maintain the aspect ration of the image. or you can assign both, `width` and `height`, e.g.` background-size: 300px 100px;`.
|
||||||
|
|
||||||
|
We can also use `auto` (default, keeps the aspect ratio), `cover` (fills the entire container), `contain` (entire image is visible, can leave white space), `%` and other units with the `background-size` property. e.g. setting `background-size: 50%` will make the image take 50 percent of the element's width.
|
||||||
|
|
||||||
|
|
||||||
|
## Working With `background-position`
|
||||||
|
|
||||||
|
Excess parts of the image, that are cut-off for a larger image than the container, can be controlled using the `background-position` property. That is, you can decide which side of the excess image to crop. We can also control the absolute positioning of the image inside the container.
|
||||||
|
|
||||||
|
|
||||||
|
We can see the available usage of the this property on its [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position).
|
||||||
|
|
||||||
|
|
||||||
|
## Theory Time - `background` Shorthand
|
||||||
|
|
||||||
|
* `backgound-image` (Set one or more background images)
|
||||||
|
* `backgound-color` (Set a background color)
|
||||||
|
* `backgound-position` (Set initial position, relative to background position layer)
|
||||||
|
* `backgound-size` (Set size of background image)
|
||||||
|
* `backgound-repeat` (Defines how background images are repeated)
|
||||||
|
* `backgound-origin` (Set background positioning area)
|
||||||
|
* `backgound-clip` (Define whether background extends underneath border)
|
||||||
|
* `backgound-attachment` (Sets the scrolling behavior of the background image)
|
||||||
|
|
||||||
|
|
||||||
|
## Using The `background` Shorthand
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: url("a.jpg") left 10% bottom 20%/cover no-repeat border-box padding-box;
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Styling Images
|
||||||
|
|
||||||
|
The default behavior is when you add an `<img>` tag and set an image, the `width` and `height` of the `<img>` will be same as of the width and height of the original image. Changing the `width` and `height` of the container element doens't have any effect on the size of `<img>`.
|
||||||
|
|
||||||
|
Changing lets say `height` of the `<img>` to `100%` will not change it height to fill the container, but it'll change its height to that of the original image used, unless the container is an `inline` or `inline-block`.
|
||||||
|
|
||||||
|
|
||||||
|
## Working On The Image Layout
|
||||||
|
|
||||||
|
```html
|
||||||
|
<main>
|
||||||
|
<div>
|
||||||
|
<div class="testimonial" id="customer-1">
|
||||||
|
<div class="testimonial__image-container">
|
||||||
|
<img src="../images/customer-1.jpg" alt="Mike Statham - Customer" class="testimonial__image">
|
||||||
|
</div>
|
||||||
|
<div class="testimonial__info">
|
||||||
|
<h1 class="testimonial__name">Mike Statham</h1>
|
||||||
|
<h2 class="testimonial__subtitle">Founder of
|
||||||
|
<a href="tech-analysis.com">tech-analysis.com</a>
|
||||||
|
</h2>
|
||||||
|
<p class="testimonial__text">uHost helped me realize my project with a highly constrained budget in like no time.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
<main>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
.testimonial__image-container {
|
||||||
|
width: 65%;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial__image {
|
||||||
|
width: 100%;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Understanding Linear Gradients
|
||||||
|
|
||||||
|
Gradients, both linear and gradial, are treated as images. We add a linear gradient by using the `linear-gradient()` css function on `background-image` or `background` shorthand properties.
|
||||||
|
|
||||||
|
|
||||||
|
## Applying Radial Gradients
|
||||||
|
|
||||||
|
We add radial gradient using the `radial-gradient()` css function.
|
||||||
|
|
||||||
|
|
||||||
|
## Stacking Multiple Backgrounds
|
||||||
|
|
||||||
|
Using the shorthand `background` property, we can stack multiple backgrounds separated by a comma `,`. You can only set the `background-color` property once when stacking multiple backgrounds.
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: linear-gradient(to top, rgba(80, 60, 18, 0.6) 10%, transparent), url("image.jpg") left 10% bottom 20%/cover no-repeat border-box, #ff1b68;
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Understanding Filters
|
||||||
|
|
||||||
|
Filters allow us to change the visual appearence of an element by applying a `filter` like blurring, grayscale or changing the contrast etc:
|
||||||
|
|
||||||
|
```css
|
||||||
|
div {
|
||||||
|
background: brown;
|
||||||
|
filter: blur(10px);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Adding And Styling SVGs - The Basics
|
||||||
|
|
||||||
|
...
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
# Dimensions, Sizes And Units
|
||||||
|
|
||||||
|
## Where Unit Matters
|
||||||
|
|
||||||
|
### Pixels, Percentages & More
|
||||||
|
|
||||||
|
| Units | Sign |
|
||||||
|
| --- | --- |
|
||||||
|
| pixels | px |
|
||||||
|
| percentages | % |
|
||||||
|
| root em | rem |
|
||||||
|
| em | em |
|
||||||
|
| viewport height | vh |
|
||||||
|
| viewport width | vw |
|
||||||
|
|
||||||
|
### Some questions?
|
||||||
|
|
||||||
|
Which properties can you use in connection with these units?
|
||||||
|
How is the size calculated?
|
||||||
|
What's the right unit to choose?
|
||||||
|
|
||||||
|
### Where Units Matter
|
||||||
|
|
||||||
|
Keeping the CSS box model in mind, going inside out, e.g from content to padding to border to margin. Lets see where we can apply these units.
|
||||||
|
|
||||||
|
`font-size`, `padding`, `border`, `margin`, `width`, `height`, `top`, `bottom`, `left`, `right`.
|
||||||
|
|
||||||
|
|
||||||
|
## An Overview Of Available Sizes And Units
|
||||||
|
|
||||||
|
### How is the Size Calculated?
|
||||||
|
|
||||||
|
| **Absolute Lengths** | **Viewport Lengths** | **Font-Relative Lengths** |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| Mostly ignore user settings | Adjust to current viewport | Adjust to default font size |
|
||||||
|
| `px` | `vh` | `rem` |
|
||||||
|
| `cm` | | `vw` | `em` |
|
||||||
|
| `mm` | | `vmin` | `...` |
|
||||||
|
| `...` | | `vmax` | |
|
||||||
|
|
||||||
|
Also, percentage `%` is another special unit used.
|
||||||
|
|
||||||
|
### How is the Box Size for % Units Calculated?
|
||||||
|
|
||||||
|
To understand how `%` units are calculated, we first need to understand the concept of **containing blocks**.
|
||||||
|
|
||||||
|
|
||||||
|
## Rules to Remember Fixed Positioning & `%`
|
||||||
|
|
||||||
Loading…
Reference in New Issue