[[:oktatas:web:css|< CSS]] ====== CSS3 ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2011-2022 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== A CSS szintekről ===== A CSS-nek nincsenek hagyományos értelemben vett verziói. Szintek vannak. Minden szint kiegészíti, finomítja az előző szintet. Amikor azt olvassuk, hogy az első szint elavult, nem jelenti azt, hogy hibás vagy nem használjuk, csak naprakészebb specifikációk állnak már rendelkezésre. A CSS2 egy újabb szint volt. Néhány dolgot újra kellett gondolni, ebből lett a CSS2.1, majd később a CSS2.2. A CSS3 változtat az eddigi szokásokon, modulonként van szintezve, Vagyis az egész CSS-nek nincs 3 szintje, csak az egyes moduloknak lehet. Ebből következik, hogy sosem lesz CSS4. ===== Szegély =====



div {
   border-radius: 15px;
   box-shadow: 10px 10px 5px #888888;
}

Egy doboz, aminek van egy kis radius meg egy kis árnyék beállítva



div {
   border-radius: 15px;
   box-shadow: inset 10px 10px 5px #888888;
}

Egy doboz, aminek van egy kis radius meg egy kis árnyék beállítva

===== Szöveg árnyékolása =====


div {
    text-shadow: vízszintes-eltolás függőleges-eltolás foltosítás szín;
}

Példa:


text-shadow: 5px 5px 5px #888888;



Szöveg

Szöveg

===== Átméretezhető ===== Szintaxis:


resize: none|both|horizontal|vertical:


div {
    resize:both;
    overflow:auto;	
}



Átméretezhető

===== Háttér nyírása ===== background-clip tulajdonsággal állítjuk. Lehetséges értékei: * border-box * padding-box * content-box ==== Border ====


background-color: yellow;
background-clip: border-box;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

==== Padding ====


background-color: yellow;
background-clip: padding-box;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

==== Content ====


background-color: yellow;
background-clip: content-box;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

===== Külső font =====


@font-face { 
    font-family: linliber; 
    src: url('http://szit.hu/download/fontok/LinLibertine_RI_G.ttf'); 
}
p {
    font-family: linliber;
}

Valami
Valami

Lorem ipsum dolor est amet

===== Színátmenet ===== ==== Egyszerű színátmenet ====


.egy {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(blue, navy);
}

==== Irány ==== Megadhatunk irányt is, de a böngészők, már nem biztos, hogy ismerik a linear-gradient tulajdonsággal:


.egy {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(left, blue, navy);
    background-image: -webkit-linear-gradient(left, blue, navy);
}

2022 januárban a Google-Chrome és a Vivaldi csak -webkit előtéttel jeleníti meg. A Firefox megjeleníti. A Google-Chrome és a Vivaldi böngésző is webkit böngészőmotort használt.

==== Összetett színátmenet ==== Megadhatjuk, hogy a színátmenet a dobozon belül mettől meddig tartson. {{:oktatas:web:css:szinatmenet.png?400|}}


background-image: linear-gradient(bottom, rgb(0,30,140) 15%, rgb(72,111, 253) 58%);
background-image: -o-linear-gradient(bottom, rgb(0,30,140) 15%, rgb(72,111,253) 58%);
background-image: -moz-linear-gradient(bottom, rgb(0,30,140) 15%, rgb(72,111,253) 58%);
background-image: -webkit-linear-gradient(bottom, rgb(0,30,140) 15%, rgb(72,111,253) 58%);
background-image: -ms-linear-gradient(bottom, rgb(0,30,140) 15%, rgb(72,111,253) 58%);

Lorem ipsum dolores amet


background-image: linear-gradient(left, rgb(0,30,140) 15%, rgb(72,111, 253) 58%);
background-image: -o-linear-gradient(left, rgb(0,30,140) 15%, rgb(72,111,253) 58%);
background-image: -moz-linear-gradient(left, rgb(0,30,140) 15%, rgb(72,111,253) 58%);
background-image: -webkit-linear-gradient(left, rgb(0,30,140) 15%, rgb(72,111,253) 58%);
background-image: -ms-linear-gradient(left, rgb(0,30,140) 15%, rgb(72,111,253) 58%);

Lorem ipsum dolores amet

Megadhatunk fokokban kifejezett értéket is, de 0° máshol van liner-gradient és a többi között. A linear-gradient esetén 0deg lentről felfele. A -webkit-linear-gradient és a többi esetén 0deg balról jobbra. Egyező beállítások:


background-image: linear-gradient(0deg, rgb(0,30,140) 15%, rgb(72,111, 253) 58%);
background-image: -webkit-linear-gradient(275deg, rgb(0,30,140) 15%, rgb(72,111, 253) 58%);

===== Betű szélesség ===== A választott betűtípusnak támogatnia kell.


font-stretch: extra-condensed;

* normal * ultra-condensed * extra-condensed * condensed * semi-condensed * semi-expanded * expanded * extra-expanded * ultra-expanded * initial * inherit Ha itt van különbség:

Lorem ipsum dolores amet (normal)

Lorem ipsum dolores amet (ultra-expanded)

Lorem ipsum dolores amet (condensed)

Lorem ipsum dolores amet (20px)

Lásd még: http://www.w3schools.com/cssref/css3_pr_font-stretch.asp ===== Dobozméretek ===== A dobozok szélességébe alapértelmezetten nem számít bele a szegély. Ha egymás mellé szeretnénk helyezni két dobozt 50%-50% kitöltéssel, a dobozok nem férnek el a szegély miatt. ==== inline-block megoldás ====



    Első div
    Második div


.container {
    width:400px;
    border:2px solid navy;
    font-size: 0;
}
.container .box {
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
    font-size: 1rem;
}
.container .egy {
    border: 10px solid red;
}
.container .ketto {
    border: 10px solid green;
}

Fontos a **külső doboz fontméretének nullázása**, mivel a forráskódban lesz egy white-space karakter, aminek a szélességével számolnunk kell.

Első div

Második div

A box-sizing: border-box; beállítás segít számunkra. A border-box értékkel megmondhatjuk, hogy a doboz szélességébe a szegélyt is számoljuk bele. ==== float: left megoldás ==== Az alábbi példában 3 dobozt szeretnénk egymás mellét tenni:



    Első div.
    Második div
    Harmadik div


container {
    width: 30em;
    border: 2px solid navy;
}
.box {
    box-sizing: border-box;
    float: left;
}
.container .box:nth-child(1) {
    width: 33%;
    border: 1em solid red;
}
.container .box:nth-child(2) {
    width: 33%;
    border: 1em solid green;
}
.container .box:nth-child(3) {
    width: 34%;
    border: 1em solid blue;
}

Első div

Második div

Harmadik div


box-sizing:border-box;

===== Nagyítás =====


div {
  zoom: 200%
}

teszt szöveg eredeti

teszt szöveg nagyítva

===== Rugalmas dobozok ===== Ha rugalmas dobozt szeretnénk, a **display: flex** tulajdonság értékpárost, a **szülő doboz számára** kell beállítanunk.



    Első
    Második


div {
  border: 1px solid #ecd858;
  padding: 10px;
}
#az {
  display: flex;
}
#egy {
  flex: 1.0; 
}
#ketto {
  flex: 2.0; 
}

Működés:

Első

Második


display: flex;         /*  Opera, Firefox, Chrome */
display: -moz-box;     /* Firefox */
display: -webkit-box;  /* iOS, Safari, Chrome */
display: -webkit-flex; /* Későbbi Chrome */
display: -ms-flexbox;  /* IE 10 */


flex: 1.0;
-moz-box: 1.0;
-webkit-box: 1.0;
-webkit-flex: 1.0;
-ms-flexbox: 1.0;

Több információt a flex használatáról [[oktatas:web:css:css_flex|CSS flexbox]] fejezet ad. ===== Hasábok =====


#az {
  column-count: 3;
  -webkit-column-count: 3; 
  -moz-column-count: 3;
    
  column-gap: 1em;
  -webkit-column-gap: 0.5em;
  -moz-column-gap: 1em;
  
  column-rule:2px solid #ff00ff;
  -webkit-column-rule:2px solid #ff00ff;
  -moz-column-rule:2px solid #ff00ff;
  
  
  margin: 5%;
  padding: 10px;
  border: 1px solid #dcb028;
  border-radius: 10px;
}



  Lorem ipsum dolor sit amet, consectetur ...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat. Vivamus posuere massa euismod libero varius et mollis velit aliquam. Donec ultrices placerat consequat. Phasellus sit amet est non lorem vestibulum placerat iaculis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum feugiat eleifend. Duis tincidunt tempus eros, ac laoreet magna suscipit eu. Praesent quis facilisis lacus. Quisque imperdiet egestas lectus dapibus iaculis. Morbi egestas nulla eu magna sagittis vitae eleifend lacus sodales. Nullam vel nunc nisl. Vestibulum eget sapien eros. Donec ac pellentesque odio. In hac habitasse platea dictumst.

===== Több háttérkép =====


body {
    background-image: url(http://szit.hu/p/images/kep001.jpg),
    url(http://szit.hu/p/images/kep003.jpg);
    
    background-size: 100px, 200px;
    background-repeat: no-repeat;

}

===== Kép vágása alakzat alapján =====


img {
    width: 200px;
    height: 200px;
    clip-path: circle(50%);
}

===== Háttér =====


body {
background-color: #269;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
background-image: -webkit-linear-gradient(white 2px, transparent 2px),
                  -webkit-linear-gradient(0, white 2px, transparent 2px),
                  -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
                  -webkit-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
background-image: -moz-linear-gradient(white 2px, transparent 2px),
                  -moz-linear-gradient(0, white 2px, transparent 2px),
                  -moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
                  -moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
background-image: linear-gradient(white 2px, transparent 2px),
                  linear-gradient(90deg, white 2px, transparent 2px),
                  linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);

}

===== Másik háttér =====


body {
background:
radial-gradient(black 20%, transparent 20%) 0 0,
radial-gradient(black 20%, transparent 20%) 20px 20px,
radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 20%) 0 0,
radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 20%) 20px 20px;
background-color:#282828;
background-size:40px 40px;
}

===== Transzformációk ===== ==== A transform tulajdonság ==== Szintaxis: transform: none|transform-functions|initial|inherit; Használható transzformációs függvények: * 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(szög) * rotate3d(x,y,z, szög) * rotateX(szög) * rotateY(szög) * rotateZ(szög) * skew(x-szög,y-szög) * skewX(szög) * skewY(szög) * perspective(n) * matrix(n, n, n, n, n, n) * 6 darab 3x2 mátrix * matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) * 16 darab 4x4 mátrix ==== Forgatás ====


#egy {
  background-color: navy;
  color: white;
  padding: 5px;
  position: absolute;
  top: 50px;
  transform: rotate(-90deg); 
}

teszt szöveg

==== 3D ====


.belso {
    position: relative;
    top: 100px;
    width: 200px;
    height: 200px;
    background-color: green;
    -webkit-transform:
        perspective(1000px)        
        rotateY(50deg)
        translateZ(100px)
        ;    
}

Lorem ipsum dolor sit amet

==== Skew ====


transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */

Lorem ipsum dolores amet

===== Tranzit =====


div#transit001Kulso {
    position: relative;
    height: 60px;
    background-color: green;
    width: 120px;
}

div#transit001 {
    position: absolute;
    display: inline-block;
    background-color: navy;
    color: white;
    left: -80%;
    transition: all 0.6s ease;
}

div#transit001Kulso:hover div#transit001 {
   left: 0;
}

Mozgassuk az egeret a zöld doboz felé, a tranzit beindításához:

alma

==== Transzformáció példa ====


.doboz {
    width: 200px;
    height: 200px;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    transition-duration: 2s; /* vissza is lassan */
}

.doboz:hover {
    transform: rotate(45deg);
    transition-duration: 2s; /* forgatás lassan */
}
.doboz img {
    height: 200px;
}

===== Media Query ===== A CSS korábbi verzióinál lehetőségünk volt külön CSS megvalósítására nyomtatott felület és képernyőre szánt felületre, külön-külön. A CSS3-mal a lehetőségek nőttek. Beállíthatunk külön CSS-t a fekvőtájolású és az állótájolású megjelenítők esetén. A monitor persze az ember nem szokta forgatni, de a mai mobiltelefonokat már szoktuk. Az orientáció beállításával lekérdezhetjük egy eszköz vagy megjelenítő milyen tájolással van beállítva. A fekvő és az állótájolású eszközhöz is külön CSS-t hozhatunk létre. A böngésző persze a megjelenítés szélességét és magasságát kérdezi le. Ha a magasság nagyobb mint a szélesség, akkor állótájolásként (portrait) értelmezi, ha szélesség a nagyobb a magasságnál, akkor a fekvő tájolásról (Landscape) beszélünk. Az álló és fekvőtájoláshoz a CSS-t így kezdhetjük:


/* Álló tájolás */

@media screen and (orientation:portrait) {

    /* Ide jönnek álló tájolás esetén a CSS meghatározások */

}

/* Fekvő tájolás */

@media screen and (orientation:landscape) {

    /* Ide jönnek fekvő tájolás esetén a CSS meghatározások */

}

==== Konkrét példa ==== Illesszünk egy weboldalba egy képet. Például:

Majd határozzuk meg a következő CSS-t:


body {
    margin: 0;   
}
@media screen and (orientation:portrait) { 
    img {
        opacity: 0.3;
    } 
}
 
@media screen and (orientation:landscape) {
    img {
        opacity: 0.6;
    } 
}

Méretezzük át a böngészőt, majd figyeljük mit történik. ==== Átmenettel ==== Látványosabb lehet a változás, ha teszünk hozzá egy kis átmenetet.


body {
    margin: 0;
}
@media screen and (orientation:portrait) { 
    img {
        opacity: 1;
        -webkit-transition: opacity 2s ease;
        -moz-transition: opacity 2s ease;
        -o-transition: opacity 2s ease;
        transition: opacity 2s ease;
    } 
}
 
 
@media screen and (orientation:landscape) {
    img {
        opacity: 0.2;
        -webkit-transition: opacity 2s ease;
        -webkit-transition: opacity 2s ease;
        -moz-transition: opacity 2s ease;
        -o-transition: opacity 2s ease;
        transition: opacity 2s ease;
    } 
}

==== iPhone ==== Az iPhone nem támogatja a medai query lekérdezéseket. Ha valaki iPhone-ra is szeretne optimalizálni, akkor a következő sorok oldják meg a problémát:


/* Álló tájolás */
@media screen and (max-width: 320px) {
    body { opacity: 1; }
}

/* Fekvő tájolás */
@media screen and (min-width: 321px) and (max-width: 480px) {
    body { opacity: 0.2; }
}

Vegyük észre a max-width: 320px és a min-width: 321px feltételeket. Az iPhone esetén most túl nagy képet kaphatunk. A backgorund-size segítségével megoldhatjuk a problémát:


@media screen and (max-device-width: 480px) {
    html, body {
        -moz-background-size: 80% auto;
        -webkit-background-size: 80% auto;
        background-size: 80% auto;
    }
}

* http://www.w3.org/TR/css3-mediaqueries/ ===== Szelektor tulajdonságai =====


#egy::selection {
    background-color: yellow;
    color: blue;
}

#egy::-moz-selection {
    background-color: yellow;
    color: blue;
}

Mindenhol:


::selection {
    background-color: yellow;
    color: blue;
}

::-moz-selection {
    background-color: yellow;
    color: blue;
}