CSS minták

Szerző: Sallai András
Copyright © Sallai András, 2014, 2015
Licenc: GNU Free Documentation License 1.3
Web: https://szit.hu

Szalag

Egy Kettő

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>SWBin</title>
</head>
<body>
	<div id="filter">Egy Kettő</div>
 
</body>
</html>

style.css

#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

<div id="alak">
    paralelogramma
    <span class="hely"></span>    
</div>

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

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modális</title>
<style>
 
</style>
</head>
<body>
 
<h1>Eredeti weboldal</h1>
<p>Az eredeti weboldal első bekezdése</p>
<p><a href="#modalis">Jöhet a modális ablak</a></p>
 
<div class="modalisKulso" id="modalis">
	<div class="modalisBelso">
		<a href="#" class="bezar" title="Bezárás">x</a>
		<h2>Modális párbeszédablak</h2>
	</div>
</div>
 
 
</body>
</html>

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:

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modális</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
 
<h1>Eredeti weboldal</h1>
<p>Az eredeti weboldal első bekezdése</p>
<p><a href="#modalis">Jöhet a modális ablak</a></p>
 
<div class="modalisKulso" id="modalis">
	<div class="modalisBelso">
		<a href="#" class="bezar" title="Bezárás">x</a>
		<h2>Modális párbeszédablak</h2>
	</div>
</div>
 
 
</body>
</html>

style.css

.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/ (2014)

Háromszög

<div class="haromszog"></div>

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