szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[: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 =====

<code css>

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

</code>


<html>
<br /><br /><br />
<div style="
   display: inline;
   margin: 20px;
   padding: 20px;
   border-radius: 15px;
   box-shadow: 10px 10px 5px #888888;
   border-style: solid;
   border-width: 1px; 
">
Egy doboz, aminek van egy kis radius meg egy kis árnyék beállítva
</div>

<br /><br /><br />
</html>



<code css>

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

</code>

<html>
<br /><br /><br />
<div style="
   display: inline;
   margin: 20px;
   padding: 20px;
   border-radius: 15px;
   box-shadow: inset 10px 10px 5px #888888;
   border-style: solid;
   border-width: 1px; 
">
Egy doboz, aminek van egy kis radius meg egy kis árnyék beállítva
</div>

<br /><br /><br />
</html>

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

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

Példa:
<code css>
text-shadow: 5px 5px 5px #888888;
</code>

<code html>
<div>
Szöveg
</div>
</code>

<html>
<div style="
    font-size: 24px;
    text-shadow: 5px 5px 5px #888888;
">
Szöveg
</div>
</html>


===== Átméretezhető =====

Szintaxis:
<code>
resize: none|both|horizontal|vertical:
</code>


<code css>
div {
    resize:both;
    overflow:auto;	
}
</code>

<html>
<code css>
<div style="
    resize:both;
    overflow:auto;
    color: blue;
    background-color: green;
    width: 150px;
    height: 30px;
    ">
Átméretezhető
</div>
</code>
</html>

===== Háttér nyírása =====
background-clip tulajdonsággal állítjuk. Lehetséges értékei:

  * border-box
  * padding-box
  * content-box


==== Border ====

<code css>
background-color: yellow;
background-clip: border-box;
</code>


<html>


<div style="
width: 300px;
padding:25px;
border:8px dotted #5e5e5e;
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.

</div>

</html>



==== Padding ====

<code css>
background-color: yellow;
background-clip: padding-box;
</code>


<html>


<div style="
width: 300px;
padding:25px;
border:8px dotted #5e5e5e;
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.

</div>

</html>



==== Content ====

<code css>
background-color: yellow;
background-clip: content-box;
</code>


<html>


<div style="
width: 300px;
padding:25px;
border:8px dotted #5e5e5e;
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.

</div>

</html>


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

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


<html>

<style>

@font-face { font-family: linlibertine; 
src: url('/download/fontok/Aladdin.ttf'); }

</style>

<span style="font-family: linlibertine; font-size: 24px;">Valami</span>
<br />
<span style="font-size: 24px; ">Valami</span>


</html>



<html>
<style>
@font-face { 
    font-family: linliber; 
    src: url('https://szit.hu/download/fontok/LinLibertine_RI_G.ttf'); 
}

#masfont {
  font-family: linliber; font-size: 24px;
}
</style>
<p id="masfont">Lorem ipsum dolor est amet</p>
</html>

Példa rovásírással:
  * https://szit.hu/m/rovas/

===== Színátmenet =====


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


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

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




<html>
<div class="egy3843"></div>

<style>
.egy3843 {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(blue, navy);
}
</style>
</html>


==== Irány ====
Megadhatunk irányt is, de a böngészők, már nem biztos, hogy ismerik
a linear-gradient tulajdonsággal:
<code css>
.egy {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(left, blue, navy);
    background-image: -webkit-linear-gradient(left, blue, navy);
}
</code>

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.

<html>
<div class="egy3844"></div>

<style>
.egy3844 {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(left, blue, navy);
    background-image: -webkit-linear-gradient(left, blue, navy);
}
</style>
</html>
==== Összetett színátmenet ====

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

{{:oktatas:web:css:szinatmenet.png?400|}}


<code css>
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%);
</code>



<html>
<div style="
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%);
height: 100px;
width: 100px;
">Lorem ipsum dolores amet
</div>
</html>













<code css>
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%);
</code>



<html>
<div style="
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%);
height: 100px;
width: 100px;
">Lorem ipsum dolores amet
</div>
</html>


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:
<code css>
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%);
</code>




===== Betű szélesség =====

A választott betűtípusnak támogatnia kell.

<code css>
font-stretch: extra-condensed;
</code>


  * normal
  * ultra-condensed
  * extra-condensed
  * condensed
  * semi-condensed
  * semi-expanded
  * expanded
  * extra-expanded
  * ultra-expanded
  * initial
  * inherit


Ha itt van különbség:
<html>
<style>
.szelesbetu {
  font-family: Arial;
} 
</style>

<div class="szelesbetu">
  <div style="font-stretch: normal;">Lorem ipsum dolores amet (normal) </div> 
  <div style="font-stretch: ultra-expanded;">Lorem ipsum dolores amet (ultra-expanded)</div>
  <div style="font-stretch: consdensed;">Lorem ipsum dolores amet (condensed)</div> 
  <div style="font-stretch: 20px;">Lorem ipsum dolores amet (20px)</div>
</div>
</html>

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 ====

<code html>
<div class="container">
    <div class="box egy">Első div</div>
    <div class="box ketto">Második div</div>
</div>
</code>

<code css>
.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;
}
</code>

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.


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


<div class="container0002">
    <div class="box egy">Első div</div>
    <div class="box ketto">Második div</div>
</div>
</html>


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:

<code html 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>
</code>

<code css>
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;
}
</code>



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


<div class="container0001">
    <div class="box">Első div</div>
    <div class="box">Második div</div>
    <div class="box">Harmadik div</div>
    <div style="clear:both;"></div>
</div>
</html>



^  A box-sizing lehetséges értékei  ^^
^  Érték  ^  Leírás  ^
| content-box |	Max szélesség és magasság a tartalomnál  |
| border-box | Max szélesség és magasság margónál  |
| inherit | Az értékek a szülőktől örököltek  |


<code css>
box-sizing:border-box;
</code>


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

<code css>
div {
  zoom: 200%
}
</code>

| normal | Nincs nagytás |
| szám | Lebegőpontos szám, nagyítás mértékét megadva. Ha szám < 1.0 kicsinyítés történik. \\ Másként kicsinyítés |
| százalék | Pozitív lebegőpontos egész szám. Nagyítás mértéke |

<html>
<style>
#nagyitas002 {
    zoom: 200%;
}
</style>
<div id="nagyitas001">teszt szöveg eredeti</div>

<div id="nagyitas002">teszt szöveg nagyítva</div>

</html>
===== 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. 

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

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


Működés:
<html>
<style>
#azRugalmasDoboz, #egyRugalmasDoboz, #kettoRugalmasDoboz {
  border: 1px solid #ecd858;
  padding: 10px;
}
#azRugalmasDoboz {
  display: flex;
  width: 30%;
}
#egyRugalmasDoboz {
  flex: 1.0; 
}
#kettoRugalmasDoboz {
  flex: 2.0; 
}
</style>

<div id="azRugalmasDoboz">
    <div id="egyRugalmasDoboz">Első</div>
    <div id="kettoRugalmasDoboz">Második</div>
</div>
</html>

Régebbi típusú böngészők esetén:
| -webkit-box | -moz-box | -ms-flexbox | -webkit-flex |

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

<code css>
flex: 1.0;
-moz-box: 1.0;
-webkit-box: 1.0;
-webkit-flex: 1.0;
-ms-flexbox: 1.0;
</code>

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

===== Hasábok =====

<code css>
#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;
}
</code>


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



<html>

<p style="
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;

-webkit-column-gap: 1em;
-moz-column-gap: 1em;
-o-column-gap: 1em;

-webkit-column-rule: 2px solid #ff00ff;
-moz-column-rule: 2px solid #ff00ff;
-o-column-rule: 2px solid #ff00ff;

text-align: justify;
padding: 5px;

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

</p>

</html>


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

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

}
</code>


<html>
<style>
#cssharomtobbhatter {
    width: 400px;
    height: 300px;
    border: 5px dashed #ccc;
    background-image: url(https://szit.hu/p/images/kep001.jpg),
    url(https://szit.hu/p/images/kep003.jpg);
    background-size: 100px, 200px;
    background-repeat: no-repeat;
}
</style>
<div id="cssharomtobbhatter"></div>

</html>

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

<code css>
img {
    width: 200px;
    height: 200px;
    clip-path: circle(50%);
}
</code>

<code html>
<img src="kep.png">
</code>

<html>
<style>
img.ovalis_pelda01 {
    width: 200px;
    height: 200px;
    clip-path: circle(50%);
}
</style>


<img class="ovalis_pelda01" src="https://szit.hu/p/images/kep001.jpg">
</html>

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

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

}
</code>


<html>

<style>
#css88591pelda {
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);
width: 600px;
height: 400px;

}
</style>

<div id="css88591pelda">

</div>



</html>


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

<code css>
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;
}
</code>


<html>

<style>
#css88592pelda {
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;
width: 600px;
height: 400px;

}
</style>

<div id="css88592pelda">

</div>



</html>


===== 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 ====

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

<html>
<style>
#forgatas001 {
  background-color: navy;
  color: white;
  padding: 5px;
  position: relative;
  top: 50px;
  width: 100px;
  transform: rotate(-90deg); 
}
</style>
<div id="forgatas001">teszt szöveg</div>

<br><br><br><br><br>

</html>


==== 3D ====

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


<html>
<style>
.dobozharomdhataskulso {
    position: relative;
    width: 300px;
    height: 300px;
}
.dobozharomdhatas {
    position: relative;
    top: 100px;
    width: 200px;
    height: 200px;
    background-color: green;
    padding: 10px;
    -webkit-transform:
        perspective(1000px)        
        rotateY(50deg)
        translateZ(100px)
        ;    
}
</style>
<div class="dobozharomdhataskulso">
    <div class="dobozharomdhatas">
        Lorem ipsum dolor sit amet
    </div>
</div>
</html>

==== Skew ====

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




<html>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />


<div style="
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 */
font-size: 40px;
">
Lorem ipsum dolores amet
</div>

</html>




===== Tranzit =====

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

</code>


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

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

</style>
<div id="transit001Kulso">
    <div id="transit001">
        alma
    </div>
</div>

</html>


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

<html>
<style>


div#transit002 {
    width: 100px;
    height: 100px;
    background-color: navy;
    transition: width 2s;
}

div#transit002:hover {
   width: 300px;
}

</style>
<div id="transit002">

</div>

</html>


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

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

<code css>
.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;
}
</code>


<html>
<style>
.doboz9482 {
    width: 200px;
    height: 200px;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    transition-duration: 2s;
}

.doboz9482:hover {
    transform: rotate(45deg);
    transition-duration: 2s;
}
.doboz9482 img {
    height: 200px;
}
</style>

<div class="doboz9482">
    <img src="/download/peldak/css/tajkep01_300x225.jpg" alt="tájkép">    
</div>

<br><br><br><br><br>
</html>



<html>
<style>
.doboz2547 {
    width: 200px;
    height: 200px;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    transition-duration: 2s;
}

.doboz2547:hover {
    transform: rotate(4deg);
    transition-duration: 2s;
}
.doboz2547 img {
    height: 200px;
}
</style>

<div class="doboz2547">
    <img src="/download/peldak/css/tajkep01_300x225.jpg" alt="tájkép">    
</div>

<br><br><br><br><br>
</html>

===== 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:
<code css>
/* Á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 */

}
</code>


==== Konkrét példa ====
Illesszünk egy weboldalba egy képet. Például:
<code html>
<img src="https://szit.hu/minta/images/kep001.jpg" width="300">
</code>

Majd határozzuk meg a következő CSS-t:
<code css>
body {
    margin: 0;   
}
@media screen and (orientation:portrait) { 
    img {
        opacity: 0.3;
    } 
}
 
@media screen and (orientation:landscape) {
    img {
        opacity: 0.6;
    } 
}
</code>

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.

<code css>
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;
    } 
}
</code>
==== 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:

<code css>
/* Á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; }
}
</code>

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:
<code css>
@media screen and (max-device-width: 480px) {
    html, body {
        -moz-background-size: 80% auto;
        -webkit-background-size: 80% auto;
        background-size: 80% auto;
    }
}
</code>

  * http://www.w3.org/TR/css3-mediaqueries/

===== Szelektor tulajdonságai =====

<code css>
#egy::selection {
    background-color: yellow;
    color: blue;
}

#egy::-moz-selection {
    background-color: yellow;
    color: blue;
}
</code>

Mindenhol:
<code css>
::selection {
    background-color: yellow;
    color: blue;
}

::-moz-selection {
    background-color: yellow;
    color: blue;
}
</code>