CSS3 - Part2
By @islamzatary
By @islamzatary
The new properties
background-size (pixels or in percentages) and take (cover & contain).
background-origin - positioning area of the background images, (border-box, padding-box, content-box), like smiley
Multiple Background Images, by comma separate them.
Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors.
Linear Gradients.
Color stops are the colors you want to render smooth transitions among.
You can also set a starting point and a direction (or an angle) along with the gradient effect.
Syntax: background: linear-gradient(angle, color-stop1, color-stop2);
Using Transparency.
Repeating a Linear Gradient(Syntax background: repeating-linear-gradient(angle, color-stop1, color-stop2);)
Radial Gradients(Syntax radial-gradient(shape size at position, start-color, ..., last-color);), shape is ellipse by default.
Text Shadow
Syntax (text-shadow: 5px 5px 5px #CCCCCC;)
horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow.
Word Wrapping
allows you to force the text to wrap - even if it means splitting it in the middle of a word.
Syntax( word-wrap: break-word;)
text-align: justify;
word-break: break-all;
Web fonts allow Web designers to use fonts that are not installed on the user's computer.
Font Formats:
TrueType Fonts (TTF) - font standard - (c,f,s,o).
OpenType Fonts (OTF) - trademark of Microsoft- (c,f,s,o).
The Web Open Font Format (WOFF) - support font distribution from a server to a client over a network - (i,c,f,s,o).
SVG Fonts/Shapes - (c,s,o).
Embedded OpenType Fonts (EOT) - use as embedded fonts on web pages - (i).
Syntax:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
www.fontsquirrel.com | https://www.google.com/fonts
applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
matrix(n,n,n,n,n,n).
translate(x,y), translate3d(x,y,z).
translateX(x), translateY(y), translateZ(z).
scale(x,y), scale3d(x,y,z), scaleX(x), scaleY(y), scaleZ(z).
rotate(angle), rotate3d(x,y,z,angle), rotateX(angle), rotateY(angle), rotateZ(angle),
skew(x-angle,y-angle), skewX(angle), skewY(angle).
perspective(n).
initial.
Add an effect when changing from one style to another
you must specify two things: CSS property & the duration of the effect(default is 0).
Syntax: transition: width 2s;
Multiple Changes
Add transition effects for more than one CSS property, separate the properties with a comma.
Extra properties (transition-timing-function, delay).
transition-timing-function(ease(default), linear, ease-in, ease-out, ease-in-out).
we can create animations without flash or Java Script
@keyframes Rule
The animation will gradually change from the current style to the new style.
You must bind @keyframe rule to a selector, to take effect by call the name of the animation and the duration of the animation
1. from(0)-to(100%)
2. steps (0%-100%);
you can use: animation-timing-function, animation-iteration-count(0 times - default, infinite), animation-play-state(paused, running -default);
create multiple columns for laying out text - like in newspapers!
column-count
column-gap
column-rule
Content: to insert generated content, and its used with the :before and :after pseudo-elements
a:after {
content: " (" attr(href) ")";
}
Types of Selectors
1. element
2. id
3. class
4. position in document
* (every single element on the page)
X Y (The next most comment selector)
X:visited, X:hover
X + Y (adjacent selector - first Y after X)
X > Y (direct children)
X ~ Y (sibling combinator)
X[title]
X[href="foo"], X[href*="google"], X[href^="http"], X[href$=".jpg"], X[data-*="foo"]
X[foo~="bar"] (target an attribute which has a spaced-separated list of values)
X:checked
X:after, X:before
X:not(selector)
X:nth-child(n), X:nth-last-child(n), X:nth-of-type(n).
X:first-child, X:last-child.
To generate CSS style sheets
Full resource about CSS Preprocessor
The most important tools:
1. SASS
2. LESS
Single website, different CSS files for rearranging a website to take advantage of the size available.
link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css"
link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css'
Resolution Dependent Layout
http://www.css3.info/
http://www.w3schools.com/cssref/css_colors_legal.asp
http://css-tricks.com/
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://www.smashingmagazine.com/
CSS Sprite
Color Picker
You can find it in googlder drive folder (Advanced HTML5 => css3 => sdc_css3.jpg).
1. Clean HTML5
2. Valid HTML5
3. No Inline style (preferred external)
4. No Javascript
5. Test IE8+, FF, Chrome
6. Responsive.
7. Font for heading title like h1 (SINKIN SANS).
by @islamzatary