Recapitulare

- HTML form (diverse tipuri de input si exemple)

- CSS ce este si cum influenteaza infatisarea unei pagini
- Culori in css (predefinite, Hex, RGB si RGBA)
- Background
- Borders
- Selectori de baza + 30 cei mai folositi

Copyright 2017 © Fortech. All rights reserved.

 CSS

Copyright 2017 © Fortech. All rights reserved.

 Pseudo-clase si Pseudo-elemente

- MDN
- 1 sau 2 exemple

Copyright 2017 © Fortech. All rights reserved.

 Fonts - Obiective

- Sa stim lucra cu proprietatile legate de font si text

- Sa stim importa fonturi (Google fonts)

Copyright 2017 © Fortech. All rights reserved.

 Fonts

/* font-family */
(http://www.cssfontstack.com/) - fonturi sigure pe care le putem folosi
/* font-size */
Modalitati multiple de a reprezenta font-size
/* font-weight */
/* line-height */
/* text-align */
/* text-decoration */

Copyright 2017 © Fortech. All rights reserved.

 How to use google fonts

https://fonts.google.com

Copyright 2017 © Fortech. All rights reserved.

 Box model

- In a document, each element is represented as a rectangular box. Determining the size,

properties — like its color, background, borders aspect — and the position of these boxes is the
goal of the rendering engine.
- In CSS, each of these rectangular boxes is described using the standard box model. This model
describes the space of the content taken by an element. Each box has four edges: the margin
edge, border edge, padding edge, and content edge.

(MDN)

Copyright 2017 © Fortech. All rights reserved.

 Box model

Content / Padding / Border/ Margin

Copyright 2017 © Fortech. All rights reserved.

 Exercitiu 1

Recreati pagina

Copyright 2017 © Fortech. All rights reserved.

 Exercitiu 2

Creati o pagina de blog dupa model

Copyright 2017 © Fortech. All rights reserved.

 HTML5

Copyright 2017 © Fortech. All rights reserved.

 Ce e HTML5?

- Cea mai noua versiune de HTML

- Browserul recunoaste opagina HTML5 dupa tagul de !DOCTYPE
- O noua structura a paginii
- Introduce noi elemente pentru form si noi tipuri de input
- Mai multe validari client side
- Introduce elemente Audio si Video
- Componenta canvas

Copyright 2017 © Fortech. All rights reserved.

 Noua structura a paginii

Header
Nav
Main
Sections
Article
Aside
Footer

Copyright 2017 © Fortech. All rights reserved.

 Elemente noi

Meter
Progress
Details
Figure
Mark
Wrb

Copyright 2017 © Fortech. All rights reserved.

 Multimedia elements

Audio
Video

Copyright 2017 © Fortech. All rights reserved.

 CSS3

Copyright 2017 © Fortech. All rights reserved.

 Ce e CSS3?

- Cea mai noua versiune de CSS

- Se pot folosi in continuare elemente din CSS
- Nu toate browserele suporta toate elementele de CSS3
- Un module noi de Fonts
- Un modul nou de Text
- Transitions si Amination
- Filters si Columns
- Standard for Media Queries

Copyright 2017 © Fortech. All rights reserved.

 CSS3 borders si Gradient background

• Border-radius
• background: linear-gradient
• background: radial-gradient

Copyright 2017 © Fortech. All rights reserved.

 CSS3 Shadow effect

• Text-shadow
• Box-shadow

Copyright 2017 © Fortech. All rights reserved.

 CSS3 Text

- Text-overflow: ellipsis
- Word-wrap : break-word
- Word-break: break-all;

Copyright 2017 © Fortech. All rights reserved.

 CSS3 Transformation

- Translate
- Scale
- Rotate
- Skew

Copyright 2017 © Fortech. All rights reserved.

 CSS3 Transition

- Controleaza viteza animatie cand schimbam unele proprietati CSS

(background, width, hover, etc)

Copyright 2017 © Fortech. All rights reserved.

CSS3 Animation

Copyright 2017 © Fortech. All rights reserved.

 CSS3 Columns

- column-count
- column-gap
- column-rule

Copyright 2017 © Fortech. All rights reserved.

 CSS3 Filters

- Aplly filters on images

- “filter”

Copyright 2017 © Fortech. All rights reserved.

 Exemplu

- Color game

Copyright 2017 © Fortech. All rights reserved.