Tehnici Web

CSS #3

Claudia Chiriță . 2023/2024

CSS LAYOUT: multicoloane

permite aranjarea conținutului pe mai multe coloane, ca într-un ziar
în esență, un container cu proprietatea column-count sau column-width

column-count: numărul de coloane

column-width: lățimea unei coloane;

multicol

proprietăți pentru controlarea stilului într-un layout multicol:

column-gap: spațiul dintre coloane

column-span:câte coloane ocupă un element;

column-rule: stilul liniei care desparte coloanele;
/* prescurtare column-rule: column-rule-style
               column-rule-width column-rule-color*/

CSS across devices

adaptarea layoutului unei pagini web la diversele dispozitive ale utilizatorilor:
mobile (telefon, tabletă) & calculator

Adaptive/Mobile Friendly Design
vs.
Responsive Web Design

Adaptive design

aplicația server detectează dispozitivul utilizatorului și răspunde cu pagini diferite
ex: webpage.com vs. m.webpage.com

Responsive Design

o singură versiune a paginii care funcţionează pe orice dispozitiv
avantaje:
- mai ușor de menținut
- SEO friendly
- posibilitatea de sharing a aceluiaşi URL între diverse dispozitive

Media queries

aplicarea unui stil CSS în funcție de tipul general al unui dispozitiv sau alte caracteristici precum rezoluția ecranului sau lățimea browserului
aplicarea condiționată a unui stil folosind regulile @media și @import
pentru specificarea media pentru elemente precum <style>, <link>, <source> folosind atributul media=
pentru accesibilitate

Media queries

media type: screen, print, speech

media features: width, height, max-height, max-width, 
                orientation, resolution, aspect-ratio

sintaxă media query:

media type and (med-feature1:val) and (med-feature2:val)...

Media queries HTML

atributul HTML media
folosirea unor stiluri CSS diferite în funcție de proprietățile dispozitivului media

<head>
  
  
</head>

Media queries CSS

CSS at-rule @media
```
@media media-query1, media-query2 { }
```

exemplu:

@media screen and (max-width: 960px) and (min-width: 500px)
{
   body { background-color: pink; }
}

operatori @media

and, only, not și ","

only e folosit pentru browsere mai vechi care nu-l recunosc, css-ul din media query fiind ignorat
@media only x este echivalent cu @media x
operatorul "," are rol de disjuncție

Viewport

<head>
    
</head>

indică browserului că pagina trebuie să fie scalată pentru a se potrivi cu dimensiunea ecranului

Unități de măsură relative

unități de lungime relative la dimensiunea elementului părinte / a fontului elementului părinte, ori a dimensiunii viewportului
ex: em, rem, vw, vh, vmin, vmax

Text responsive

folosind unități de măsură ale viewportului
(vw, vh, vmin, vmax)

Text responsive

folosind media queries

Imagini responsive

elementele img, video, iframe nu se redimensionează cu cod HTML

Imagini responsive

pentru dimensiuni diferite se vor afișa imagini diferite; folosind elementele html <picture> și <source>

Imagini background responsive

background-image: url(adresă-imagine);
background-size: cover;
/* imaginea acoperă întregul container*/

FLASH QUIZ: ALINIERI

centrare pe orizontală

FLASH QUIZ: ALINIERI

to the right!

FLASH QUIZ: ALINIERI

centrare pe verticală

Transformări

Transformări CSS

schimbarea poziției și formei conținutului unui element HTML fără afectarea fluxului normal al documentului
transformări afine ale elementelor (box model)
rotații, scalări, translații, forfecări în plan și 3D

Transform

transform: metodă(valori);

metode de transformare 2D:

translate(), rotate(), scale(), skew(), matrix()

listă de transformări separate prin spațiu; transformările sunt aplicate pe rând
```
transform-origin
```
specifică poziția originii

Transform: translate

transform: translate(tx,ty)
           translateX(tx), translateY(ty);

mută elementul de la poziția inițială, conform parametrilor dați: [axa-X] și [axa-Y]

Transform: rotate

transform: rotate(grade);

rotește elementul în sensul acelor de ceasornic dacă valoarea grade este pozitivă și invers dacă valoarea este negativă

Transform: scale

transform: scale(sx,sy),
           scaleX(sx), scaleY(sy);

mărește sau micșorează dimensiunile elementului în funcție de parametrii sx și sy

Transform: skew

transform: skew(ax,ay),
           skewX(ax), skewY(ay);

distorsionează elementul de-a lungul axelor X și Y în funcție de parametrii specificați

Transform

unui element îi pot fi aplicate mai multe transformări în același timp

Accesibilitate

animațiile cu scalare/zoom pot ridica probleme din punct de vedere al accesibilității, putând provoca migrene
e recomandată adăugarea unui mijloc de control pentru oprirea animațiilor dintr-un site
e recomandată folosirea feature-ului media
prefers-reduced-motion

Transformări 3D

extensii ale transformărilor 2D
efectul 3D se obține folosind proprietatea
perspective (distanța pe axa Z)

translateZ(tz) -> translate3d(tx,ty,tz)

rotateZ(az) -> rotate3d(x,y,z,grade)

scaleZ(sz) -> scale3d(sx,sy,sz)

matrix3d(n,n,...,n)

perspective(n)

Tranziții

controlul vitezei de animație la schimbarea valorii unei proprietăți CSS: schimbarea poate să aibă loc de-a lungul unei perioade de timp, nu doar instantaneu
declanșate de evenimente
```
:hover, :focus, :active
```

Tranziții

proprietățile necesare definirii unei tranziții:

transition-property: proprietatea CSS de schimbat;
transition-duration: s; /* durata tranziției */
transition-timing-function: linear; /* ease, ease-in, 
                       ease-out, step-start, step-end 
                       (funcții predefinite) */
transition-delay: s; /* durata de așteptare înainte 
                        de începerea tranziției */
                        
transition: property  duration  timing-function  delay;

proprietăți cărora li se poate aplica o tranziție

Tranziții

Animații CSS

constau din două componente:
- un stil care descrie animația
- o mulțime de keyframes care indică stările inițiale și finale ale animației și posibile puncte intermediare

Keyframes

@keyframes nume-animație {
   0% {...}
   25% {...}
   ...
   75% {...}
   100% {...}
}


@keyframes nume-animație {
   from {...} /* echivalent cu 0% */
   to {...} /* echivalent cu 100% */
}

Animation

animation-name: nume-animație;

animation-duration: s; /* obligatorie */

animation-timing-function: linear /*ease, ease-in, ease-out*/

animation-delay: s;

animation-iteration-count: val; /* infinite */

animation-direction:normal /* alternate, reverse */

animation-fill-mode: none /* forwards, backwards, both */

Animation

The BRB

              .     .
             (>\---/<)
             ,'     `.
            /  q   p  \
           (  >(_Y_)<  )
            >-' `-' `-<-.
           /  _.== ,=.,- \       întrebări?
          /,    )`  '(    )
         ; `._.'      `--<
        :     \        |  )
        \      )       ;_/ 
         `._ _/_  ___.'-\\\
            `--\\\