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