.parent:hover .child { /* here we make a selector that only selects the child if the parent is hovered on */
/* do something different on the child element which only triggers when the parent is hovered, but not when only hovered on the child */
background-color: red;
}
width: 100px; /* we set the width of the element fixed */
position: absolute;
/* as we know the full width of the element is 100px
we can calculate where it should come so it will be centered
- we position the element at 50%; this makes the element start from the middle of it's parent
- then we reduce 50px (so 100px/2); so that instead that the element starts from the middle of the parent, it'll start from the middle, minus the half of the element itself - this will result in centered element
*/
left: calc(50% - 50px);
https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll
https://stackoverflow.com/questions/4131490/any-way-to-limit-border-length
on the parent of the element that you want to center set display flex & justify content as center (this is just one of the ways of doing it)
<section class="parent">
<article>element to center</article>
</section>
.parent {
display: flex;
justify-content: center;
}
on the parent of the elements you want to put next to eachother: set display flex & justify content as e.g. space-around (this is just one of the ways of doing it)
<section>
<article>element to center</article>
<article>element to center</article>
</section>
section {
display: flex;
justify-content: space-around;
}
https://stackoverflow.com/questions/47324360/background-size-cover-center-not-working
section {
/* background-image: ...; */
background-size: cover;
background-position: center center; /* center in both x & y axis */
}
standard, when using fractions e.g. 1fr it will use 1 fraction of the available space
to ensure that instead we only use the maximum size of the object; we can use “max-content”
e.g. this will define a grid 5 by 5, with a gap of 50px
.grid-wrapper {
display: grid;
grid-template-columns: repeat(5, max-content);
grid-template-rows: repeat(5, max-content);
gap: 50px
}
free icons on https://icomoon.io/
div {
border-radius: 50%;
}
good article on Pluralsight here
article on W3schools here
good article on Mozilla Developer Network here
good article explaining this can be found here
basically by litteraly saying to “search engine robots” this is the header, this is the navigation & this is the article, makes it easier to for search engine to offer up relevant parts of your website in the results of searches online
see: this link from Reddit on finding web fonts
google on “identify font”
https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll
body {
/** set the url of the image **/
background-image: url(media/images/berg.png);
/** set image size to "cover, this will ensure the images always covers either the maximum amount of height of width (whatever it is reaching first) **/
background-size: cover; /** alternatively set to 100% **/
}
body {
background-repeat: no-repeat;
}
Kevin Powel explains it in a good way here
some points;
more flexible
all elements behave more independent from each other
to get more finegrained control, you’ll more often have to also apply css to the children of the flexbox container
flexbox is very good at taking care of the intrinsic sizing of elements; this means the actual size of the element (an element with only the word “Lorem” will be twice as small as an element with the word “LoremLorem”) - by default it shrinks to intrinsic size
more structured
all elements behave more relative to each other (taking same height/width depending on where they are)
you can do much more at parent level without having to apply css to individual children elements (compared to flexbox)
children living within grid that is created & doing what the parent is telling it to do
CSS grid will setup the space & the children will take up the space that is put available
A question you can ask yourself is, do I want the elements to take up their own size (flexbox) or do I want them to all be aligned equally (grid)?
more details on how to decide - also by KP here
structured layouts: grid
layouts where all elements need to keep their size (e.g. navigation): flexbox
great resource by Rachel Andrew https://gridbyexample.com/
Kevin Powel video on CSS grid https://www.youtube.com/watch?v=rg7Fvvl3taU
Kevin Powel video on responsive grid here
Wes Bos’ https://cssgrid.io/
Firefox has a grid inspector, use it
Morten Rand-Hendriksen did a pretty good talk on CSS Grid (although from 2017) - check it out here
complete guid to CSS grid on CSS tricks here
in this line:
minmax(220px, 1fr)
220px will stand for minimum value 1fr for the maximum value (which is one fraction)
this will come down to: at minimum always showing a width of 220px for each cell & maximum using 1 fraction
main > section.portfolio-section > div {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
more info here https://www.hongkiat.com/blog/css-grid-layout-minmax/
way to design first using a grid
then place elements on the grid & re-arrange using media queries
e.g.
.site {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
grid-template-areas:
"title title"
"main header"
"main sidebar"
}
@media screen and (min-width: 34em) {
.site {
grid-template-columns: 2fr 1fr 1fr;
grid-template-areas:
"title title title"
"main header header"
"main sidebar footer"
}
}
see this video here
simple:
img {
/* this indicates that:
- we need to go to & back from the original value in this selector
- for the properties scale & filter
- within 300ms & 500ms respectively
- using an "ease" animation
*/
transition: scale 300ms ease, filter 500ms ease;
}
img:hover {
scale: 1.1; /*will set the scale of the image on hover*/
filter: contrast(120%); /*will set the filter on hover*/
}
or see more advanced way how Kevin Powell does it: https://youtu.be/OGJvhpoE8b4?t=701
:after / :before https://developer.mozilla.org/en-US/docs/Web/CSS/::after
nice video here
e.g.
.img-gallery:has(img:hover) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
flex-grow re-explain
optimize website for slow connections; use native lazy loading (here)
eenmaal flex wrap gebeurt, kan je dan nog flex end forceren?
refer website met stage offers / erasmus hogeschool?
What is mainly determining the font size?