Section 2 Flashcards
How do you decide how a browser window clips and image?
How does clip-path work and what site can you use to help you create shapes?
background-position: (insert value here)
Far left is 0%. Far right is 100%
Top is 0%. Bottom is 100%
Building the header – part 2
Why is the h1 element important?
How does absolute positioning work?
How does transform translate work?
How do you get span elements to stack and still be part of the h1 element?
What is something google dev tools is good at?
It helps google find the webpage.
It positions the element relative to its parent element. The parent element needs to have a relative positioning.
Transform properties are relative to the element they are applied to, This means to center an element, you need to make the element centered with p:a then center it again with trf:trslate -50% -50%.
Give each span element a class and declare each span element as a block level element with display:block.
Changing values on the fly. Though a lot of text editiors have a live view.
Creating cool css animations
What is the @keyframe syntax?
How do you fix a slight shake in an animation?
Which transform properties are browsers optimized for?
@keyframe (name here) {
0% {stuffinhere}
100% {stuff in here}
}
Use the backface-visibility property and set it to hidden. No one really knows why this fixes this. ¯_(ツ)_/¯
Opacity and translate.
Building a complex animated Button.
How can you center an inline element?
What is one way you can make a button interact naturally with the user?
What is the fundemental rule for creating a realistic button shadow?
How do you make the animated element appear on its first animation value?
Inline or inline-block elements can be controlled by declaring a text-align value in its parent container.
You can make it translate up on hover and translate down on active.
Decreade the shadow size and blur the closer it gets to the “ground”.
Animation-fill-mode: backward
SECTION 2
Three pillars of web design
What are they?
Responsive design: ☻Works on all screen sizes ☻Fluid layouts ☻responsive images ☻Correct units ☻Desktop or Mobile first
Maintainable and scalable code:
☻Clean ☻Easy to understand ☻Growth ☻Reusable ☻Organized files ☻Name classes ☻Structure html
Web performence: ☻Less http requests ☻Less code ☻Compress code ☻Preprocessor ☻Less images ☻Compress images
How does css work behind the scenes?
https://cdn-images-1.medium.com/max/1600/1*pU6B5gIzzOIX3vcbXHNEhA.jpeg
The cascade and specificity:
How does the cascade solve conflicting declarations?
What is the number system used to determine cascade specificity?
How many classes would it take to overide an id?
(Or elements to or class)
Do you put your style sheet before or after a 3rd party style sheet?
It first looks at the importance of the declarations. Looking at user and author ! declarations. If there is still conflict it looks at the specificity of each declaration, using the specificity numbering system. If there is still conflict it looks at the source order!
The number system is comprsied of 4 digits. Reading right to left.
_ , _. _, _.
Elements get a 1 in the last place, classes a 1 in the seconf place, id’s a 1 in the third place, and inline styles a 1 in the last place..
Higher numbers are always more specific than lower numbers.
1000
Afterwards. this is becasue of source order. Last comes first.
What is a good practice to make sure pseudo-classes work as they should?
Make sure they are more specific than the original element. Do this by making sure the selectors match up then the pseudo element will always be more specific.
How css is parsed part 2 Value processing
What are the 6 steps of how sizing units are processed?
What are the various parts of an element that values are applied too and computed from?
How are %, em, rem, and Vh/w converted?
Summarize the important things to remember.
1: Find the declared value
2: Take the cascade into consideration, is the value being conflicted and will it be overidden if it is?
3: Specified value. What is the default value of the css property. Not relevent due to step 2.
4: The relative values are always computed into an absolute value of pixels.
5: Finds the used value.
6: The actual value may be slightly off from from the value it is supposed to use because browsers will round numbers.
☻Every css property needs to have a value!☻
☻Width (Paragragh)
☻Padding (Initial value is 0px)
☻Font-size (Root) (Browser default is usually 16px)
☻Font-size(Section)(Declared value, remember relative values are converted to pixels)
☻Font-size (Paragraph)
Inherits computed value of parent or section element.
Font% is computed from parents computed value.
Length% is computed from parents computed width.
FontEM Computed from parents font size. Value * PFS
LengthEM Computed from current elements font-size
REM Value*root font-size which is usually 16px.
VH and VW values are percentages of viewports height and width.
Summary.
☻Every propery has an inital value.
☻Browers speciify a root font-size (Usually 16px)
☻Relative units are always converted into pixels
☻Percentage sizes are always computed from their parent
☻emFont is computed from parent, EM length is computed from current element.
☻REM is computed from documents root font-size (usually 16px)
☻VW and VH values represent the percent of the current viewport dimensions. VW = Viewport width & VH=Viewport height.
Inheritance:
How does the browser find the correct values to use?
As a rule of thumb, which values are inherited and which are not?
Are there decalrions to force inheritance or to set intial values?
The browser "asks": Is there a cascaded value? If yes then it will use it. If no then: Is there an inhertied value? If yes then it will use it ut it will use the computed value not the declared value. If no then: The browser will use the inital value
Font values are often inherited and other sizing values are not.
Yes, though they will be covered later on. ☻
Converting px to rem
How to you convert an entire stylesheet to rem?
Does it work on older browsers?
Does the universal selector target pseudo elements?
What is the best practice for the box-sizing: border-box; declarion reset?
Set the root value to the correct percentage of the browsers inital value (usually 16px) so that it equals 10px inside a html selector. Don’t use pixels because that messes up the user’s ability to control font-sizing.
Then just divide all pixels by 10 to get the rem.
Older browsers do not support REM.
No it doesn’t
Remember to inlucde universal selectors for pseudo-elements in your reset css.
Set the box-sizing value to inherit inside the universal selector rule-set, then in the body ruleset delare a box-sizing value of border-box.
How does the Visual formatting model algorithm calculate boxes?
What is the box model?
What are the three ways boxes can be laid out on a page?
What are four positioning schemes?
Box dimensions Box display properties Box positioning properties Stacking order Other elements on render tree Viewport size
The box model is the fundemental way a website is laid out. Boxes will have their content, surrounding by padding, outlined with a border, and then around all of that there is a margin. The padding and border add extra dimensions to the box but box-sizing: border-box; changes this so that the height and width declared for the content also includes the padding and border.
Block, inline, Inline-block
Normal flow
Floats
Absolute
Stacking context
