CSS3

• Szerző: Sallai András
• Copyright © Sallai András, 2011-2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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.

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

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

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;

<div>
Szöveg
</div>

Szintaxis:

resize: none|both|horizontal|vertical:

div {
    resize:both;
    overflow:auto;	
}

background-clip tulajdonsággal állítjuk. Lehetséges értékei:

• border-box
• padding-box
• content-box

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

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

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

@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

<div class="egy"></div>

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

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.

Megadhatjuk, hogy a színátmenet a dobozon belül mettől meddig tartson.

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

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

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

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:

Lásd még: http://www.w3schools.com/cssref/css3_pr_font-stretch.asp

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.

<div class="container">
    <div class="box egy">Első div</div>
    <div class="box ketto">Második div</div>
</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.

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.

Az alábbi példában 3 dobozt szeretnénk egymás mellét tenni:

index.html

<div class="container">
    <div class="box">Első div.</div>
    <div class="box">Második div</div>
    <div class="box">Harmadik div</div>
</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;
}

box-sizing:border-box;

div {
  zoom: 200%
}

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

<div id="az">
    <div id="egy">Első</div>
    <div id="ketto">Második</div>
</div>

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

Működés:

Régebbi típusú böngészők esetén:

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 CSS flexbox fejezet ad.

#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;
}

<div id="az">
  Lorem ipsum dolor sit amet, consectetur ...
</div>

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.

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

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

<img src="kep.png">

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

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

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 3×2 mátrix
• matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)
  • 16 darab 4×4 mátrix

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

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

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 */

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:

<style>
div#transit002 {
    width: 100px;
    height: 100px;
    background-color: navy;
    transition: width 2s;
}
div#transit002:hover {
   width: 300px;
}
</style>
<div id="transit002"></div>

<div class="doboz">
    <img src="tajkep01_300x225.jpg" alt="tájkép">    
</div>

.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;
}

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 */
 
}

Illesszünk egy weboldalba egy képet. Például:

<img src="http://szit.hu/minta/images/kep001.jpg" width="300">

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.

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

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/

#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;
}