Advanced CSS Flashcards
vendor prefixes for major browsers:
- moz- : Firefox
- webkit- : Webkit browsers such as Safari and Chrome
- o- : Opera
- ms- : Internet Explorer
Give an example of vendor prefixes in action:
- webkit-transition: all 4s ease;
- moz-transition: all 4s ease;
- ms-transition: all 4s ease;
- o-transition: all 4s ease;
transition: all 4s ease;
Even though, in our example, the “transition” property is consistent across all browsers, some browsers have a different syntax for certain properties. Have look at this CSS gradient implementation:
Creating Cross-Browser Linear Gradients with CSS3
-webkit-linear-gradient(left, #999999 0%, #ffffff 100%);
Apart from px, pt, %, em, developers have access to:
rem (root em)
vw (viewport width)
vh (viewport height)
____ values are relative to the root html element, for instance, if the font-size of the root element is 16px then 1 rem = 16px for all elements.
rem (root em). rem values are relative to the root html element, for instance, if the font-size of the root element is 16px then 1 rem = 16px for all elements.
____ whereas the % values are relative tio the containing parent, vw is relative to the sise of the viewport. 1 vw = 1/100th of the viewport’s width.
vw (viewoport width). Whereas the % values are relative tio the containing parent, vw is relative to the sise of the viewport. 1 vw = 1/100th of the viewport’s width.
_______ Same as vw, except vh is used for height.
vh (viewport height). Same as vw, except vh is used for height.
Commonly used advanced selectors include:
Select:
- multiple elements
- descendant elements
- child elements
- siblings
- adjacent sibling
- by attribute or attribute value
- attribute begins or ends with value
- select NOT elements
- multiple elements
div,p{
color:red;
}
- descendant elements
div p{
color:red;
}
- child elements
div>p{
color:red;
}
- siblings
h2 ~ p{
color:red;
}
- adjacent sibling
h2 + p{
color:red;
}
- by attribute or attribute value
input[autofocus]{
border:1px solid red;
}
input[type=text]{
border:1px solid red;
padding:10px;
background-color:#CCCCCC;
}
- attribute begins or ends with value
a[href^=”https://”]{
color:red;
}
a[href$=”.pdf”]{
color:red;
}
- select NOT elements
:not(p){
font-weight:bold;
}
As mentioned, for a transition to take place, an element must have a change in state, and different styles must be identified for each state.
The easiest way for determining styles for different states is by using the :____, :_____, :____, and :____ pseudo-classes.
As mentioned, for a transition to take place, an element must have a change in state, and different styles must be identified for each state.
The easiest way for determining styles for different states is by using the :hover, :focus, :active, and :target pseudo-classes.
The actual syntax for the transform property is quite simple, including the transform property followed by the value. The value specifies the transform type followed by a specific amount inside parentheses.
div {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}2D Rotate (transform property)
.box-1 {
transform: rotate(20deg);
}
2D Scale (transform property)
.box-1 {
transform: scale(.75);
}
2D Translate (transform property)
.box-1 {
transform: translateX(-10px);
}
2D Skew (transform property)
.box-1 {
transform: skewX(5deg);
}
Combining Transforms
.box-1 {
transform: rotate(25deg) scale(.75);
}
2D Cube Demo
.cube {
position: relative;
}
.side {
height: 95px;
position: absolute;
width: 95px;
}
.top {
background: #9acc53;
transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
background: #8ec63f;
transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
}
.right {
background: #80b239;
transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
}
