This content originally appeared on DEV Community and was authored by Gaurav-Shekhawat
1. How to center an div element vertically or horizontally.
There are many ways to center an div element, few of them are:-
Method-1: Using margin:auto (For horizontal centering)
In this method, if the width of our element is less than 100%, we can just set its margin value to auto, and this will automatically center the element horizontally.
Method-2: Using css-flexbox (both horizontal and vertical centering)
Method-3: Using css-grids (both horizontal and vertical centering)
The below example is for horizontal centering, similarly we can center the element vertically.
or
The other method for both horizontal and vertical centering at the same time is using:-
place-items: center;
which is a shorthand for align-items and justify-items in order.
.center-inside-of-me {
display: grid;
place-items: center;
}
Method-4: Using transform: translate property( both horizontal and vertical centering)
See the below codepen by Gabriel Laroche for the example. Although using this method is not recommended and must be used only when the other methods are not working.
Method-5: using inset and margin:auto
This is almost similar to the previous method. The inset property is defined in the notes section below.
Method-6: abusing margin and padding
First we can remove the height from our parent element, so that it will become the same height as the child. Now, we horizontally center the child it using margin: 0 auto , then we increase the top and the bottom padding, so that the element seems centered.
Difference between position relative and position absolute
Summary:-
The relative property defines the behaviour with respect to the element's current position. The element is not removed from the normal flow of the document.
In absolute positioning, the element is removed from the normal flow of the webpage, and is positioned with reference to its first ancestor having position: absolute/relative (very imp)(like if you want to center an div2 inside a div1, then first you have to set the display property of div1 to be relative, then the display property of div2 to be absolute, and then this will work), otherwise with respect to the viewport.
See this article of medium to understand the concept in full detail.
Also see this standford slide
css-tricks article.
Css position: sticky property
This property is mostly used to make a sticky navigation bar at the top of your website.
- Best guide:- medium article.
- See this css-tricks article.
- MDN complete guide to position.
Summary:- Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
The threshold must be defined in the form of top/bottom/right/left.
All background properties
Background image
css-tricks article on background image
Short Summary:-
body {
background: url(sweettexture.jpg);
background: linear-gradient(black, white);
background: radial-gradient(circle, black, white);
}
Setting a Fallback-color:- If the background image is not supported, then the fallback color will be loaded instead.
body {
background: url(sweettexture.jpg) blue;
}
Multiple Background Images:- The image that you want on the top should be listed first. These may be used to put logo on top of a background, after changing some of the properties, as given in the second code block.
body {
background: url(logo.png), url(background-pattern.png);
}
body {
background:
url(logo.png) bottom center no-repeat,
url(background-pattern.png) repeat;
}
The codepens of each of these are:-
Background Gradients
css-trick's guide.
Please make sure that you go through the above guide, it is wonderfully made. I left the tricks section for later. Also cannot understand anything below the pie chart example.
Points that I noticed:-
- The default value of the angle in the
linear-gradient (angle, color1, color2)is not 0deg, but it is 180deg. Play with the below codepen to understand more.
Background position
The first value is the horizontal position, while the next value is the vertical position. The lengths and pertencages are measured from the top left.
- The percentages have special meaning:- moving a background image by X% means it will align the X% point in the image to the X% point in the container. For example, 50% means it will align the middle of the image with the middle of the container. 100% means it will align the last pixel of the image with the last pixel of the container, and so on.
When four/three(this just means that the remaining one value is 0) are given, then they are interpreted as:-
.three-values {
background-position: right 45px bottom;
}
This positions the background image 45px from the right and 0px from the bottom of the container.
.four-values {
background-position: right 45px bottom 20px;
}
This puts the background image 45px from the right and 20px from the bottom of the container.
Multiline underline text-gradient animation
KevinPowell video link.
Background size
css-tricks article
The various ways are:-
Keywords:- cover full covering the entire container, even if it has to cut some parts of the image, or expand the image. contain respects the aspect ratio of the image, and shows the whole image, even if it has to leave some empty space.
One Value:- Example: 400px, this will be considered as width, and the height will be set to auto.
Two values:- First is the width, second is the height.
Multiple Images:- We can specify their sizes individually. Example: -
html { background:url(greatimage.jpg),url(wonderfulimage.jpg);
background-size: 300px 100px, cover;
/* first image is 300x100, second image covers the whole area */
}
This will follow the background stacking order.
Background repeat
css-tricks article
Few Notes:-
- In the padding property, the values are written in the clockwise order starting from top.
padding: 25px 50px 75px 100px;
1. top padding is 25px
2. right padding is 50px
3. bottom padding is 75px
4. left padding is 100px
If position: sticky; - the top property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
CSS element+element Selector:- Example:-
div + p {
background-color: yellow;
}
Select and style the first
element that are placed immediately after
elements. This was used in the above medium article for sticky position so the space between two rows can be 20px, while the most upper and the most bottom space be 10px.The property top/bottom/right/left are measured with reference to its nearest positioned ancestor(just parent).
Adding some shadow to a div element makes it look much much better. You will also learn some bad way to center an element inside its container. Also, we can put variables inside a CSS file!!!!.
The
insetCSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of themarginshorthand.
Points that I still need to work upon
- Background gradient (things left from the article).
- Background repeat (round and space(some))
This content originally appeared on DEV Community and was authored by Gaurav-Shekhawat
Gaurav-Shekhawat | Sciencx (2021-08-14T16:07:57+00:00) Day 1: 100 days of code. Retrieved from https://www.scien.cx/2021/08/14/day-1-100-days-of-code/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.