<< Back to the blog

CSS3 - Part2




By @islamzatary

CSS3 - Background

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.


Can i use background(css3)

CSS3 - Gradient

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.

Css3 Generator
Can i use gradient

Text effects.

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;


Can i use text shadow

Web Fonts - The @font-face

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

Can i use font face | Can i use => woff,woff2,ttf,otf,eot

Transforms

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.


can i use transform

Transitions

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).

can i use transition

Animation

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);

can i use animation

Multiple Columns

create multiple columns for laying out text - like in newspapers!
column-count
column-gap
column-rule


can i use multiple columns

Content, After & Before

Content: to insert generated content, and its used with the :before and :after pseudo-elements
a:after {
content: " (" attr(href) ")";
}

can i use content

css2 & css3 selectors

Types of Selectors
1. element
2. id
3. class
4. position in document

css2 & css3 selectors

* (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.

All Selectors

CSS Preprocessor

To generate CSS style sheets

Full resource about CSS Preprocessor

The most important tools:
1. SASS
2. LESS

Media Queries

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

can i use media query

Demos

demo1
demo2
guideline
Animation (css-vs-javascript)


References

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

Practical

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).

CSS3 - Part2




Practical



Wrapping up








<< Back to the blog

by @islamzatary