SWBin
Egy Kettő
#filter {
position: relative;
background-color:green;
height: 25px;
width: 300px;
text-align: center;
margin: 55px auto;
box-shadow: 0 4px 4px #000;
padding: 10px;
}
#filter:before, #filter:after {
height: 0;
width: 30px;
position: absolute;
content: "";
top: 4px;
}
#filter:before{
left: -70px;
box-shadow: 5px 4px 4px rgba(0, 0, 0);
border-top: 22px solid green;
border-bottom: 22px solid green;
border-left: 22px solid transparent;
border-right: 22px solid green;
}
#filter:after{
right: -70px;
box-shadow: -5px 4px 4px rgba(0, 0, 0);
border-top: 22px solid green;
border-bottom: 22px solid green;
border-left: 22px solid green;
border-right: 22px solid transparent;
}
===== Paralelogramma =====
paralelogramma
#alak {
width: 180px;
height: 100px;
-ms-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
transform: skew(-20deg);
background-color: red;
text-align: center;
}
.hely {
height: 50%;
display: inline-block;
}
===== CSS sprite =====
A CSS sprite-t akkor használunk, amikor például egér eseményre
szeretnénk megváltoztatni a háttérképet. Ha két külön képpel
oldjuk meg a feladatot, akkor lassabb eredményt kapunk.
E helyett a két képből egyet készítek. Betöltjük például
háttérnek a képe egyik felét. Az egéreseményre megmutatom
a kép másik felét. A képcsere így nagyon gyors lesz,
mert már eleve a helyén van, csak a pozícióján változtatok.
Linkeknél vagy akár más elemeknél is alkalmazható.
Az alábbi példában egy div elemmel látjuk a CSS részt:
div {
font-size: 44px;
background: url(http://szit.hu/minta/images/kep001.jpg);
background-size: 300px;
}
div:hover{
background-position: 0 -1500px;
}
===== Modális doboz CSS-ben =====
A modális doboz lényege, hogy olyan dobozt készítünk, amely
az egész böngészőt fedi.
A modális doboz célja általában egy párbeszédablak, amely viszont
nem fedi az elég böngészőt. Ezért két dobozunk lesz, egy külső
és egy belső. A külső dobozt biztosítja a modalitást, a belső
doboz egy szimpla párbeszédes doboz.
A külső dobozt vagy a display értékkel eltüntetem, vagy teljesen átlátszóvá teszem,
miközben tiltom az egéraktivitást. Utóbbi azért jobb, mert ezt animálva tudjuk megtenni.
Modális
Eredeti weboldal
Az eredeti weboldal első bekezdése
x
Modális párbeszédablak
Elsőként vegyük ki a külső dobozt az elemek folyamából a position értékkel,
majd állítsuk be minden a négy oldalhoz:
.modalisKulso {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Állítsuk be maximális z-index értéket, hogy biztosan ez legyen legfelül:
.modalisKulso {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2147483647;
}
Természetesen lehet 9999999, ha nem használunk ennél nagyobbat a weblap más részein.
Állítsunk be fekete, de kicsit átlátszó hátteret:
.modalisKulso {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2147483647;
background-color: rgba(0, 0, 0, 0.7);
}
Most, hogy készen van, utolsóként vegyük az átlátszóságát maximumra,
az egéreseményeket tiltsuk:
.modalisKulso {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2147483647;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
pointer-events: none;
}
Ha a "modalis" cél (lásd href célja) aktiválódik, akkor meg kell jelenítenünk
a modális dobozt:
.modalisKulso:target {
opacity: 1;
pointer-events: auto;
}
Az átlátszóságot elvesszük, az egéreseményeket visszaadjuk.
Formázzunk kicsit a belső dobozon:
.modalisBelso {
background-color:bisque;
margin: 10%;
padding: 15px;
border-radius: 15px;
}
Tulajdonképpen minden működik, csak szebbé kell tennünk.
Teljes lista, külön CSS állománnyal:
Modális
Eredeti weboldal
Az eredeti weboldal első bekezdése
x
Modális párbeszédablak
.modalisKulso {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2147483647;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
pointer-events: none;
transition: opacity 500ms ease-in;
}
.modalisKulso:target {
opacity: 1;
pointer-events: auto;
}
.modalisBelso {
background: linear-gradient(#fff, #999);
margin: 10%;
padding: 15px;
border-radius: 10px;
position: relative;
font-family: sans-serif;
text-align: center;
}
.bezar {
text-decoration: none;
position: absolute;
right: -12px;
top: -12px;
background-color: dimgray;
border-radius: 25px;
width: 25px;
text-align: center;
line-height: 25px;
color: white;
box-shadow: 1px 1px 3px black;
}
.bezar:hover {
background-color:aqua;
}
Eredeti ötlet:
* [[http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/|http://www.webdesignerdepot.com/]] (2014)
===== Háromszög =====
.haromszog {
margin: 50px;
width: 0;
height: 0;
border-style: outset;
border-width: 50px;
border-right-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: blue;
}