::before & ::after pseudo selector-ok használata

Szerző:   |   2017-09-30

Utálom használni, de néha muszáj.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


<!DOCTYPE HTML>
<html lang="hu">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width">
	<title>Tutorial</title>
	<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Quattrocento" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="wrapper">
		<div class="col">
			<div class="box">
				<div class="image">
					<img src="1.jpg" alt="">
					<div class="title">Aenean mauris arcu</div>
				</div>
				<div class="box-content">
					<p>Morbi porta placerat augue, nec ornare risus porta ac. Curabitur ac lorem ante. Donec ut pulvinar dui, ac cursus mauris. In interdum mi mi, ut efficitur eros congue ut. Cras facilisis et libero sit amet euismod. Ut id sem turpis. Quisque ultricies elit volutpat, efficitur ipsum sed, consequat est.</p>
					<a href="">Read more »</a>
				</div>
			</div>
			<div class="box">
				<div class="image">
					<img src="2.jpg" alt="">
					<div class="title">Mauris vitae bibendum nibh</div>
				</div>
				<div class="box-content">
					<p>Morbi porta placerat augue, nec ornare risus porta ac. Curabitur ac lorem ante. Donec ut pulvinar dui, ac cursus mauris. In interdum mi mi, ut efficitur eros congue ut. Cras facilisis et libero sit amet euismod. Ut id sem turpis. Quisque ultricies elit volutpat, efficitur ipsum sed, consequat est.</p>
					<a href="">Read more »</a>
				</div>
			</div>
		</div>
		<div class="col">
			<div class="box">
				<div class="image">
					<img src="3.jpg" alt="">
					<div class="title">Aliquam aliquet nec purus sed blandit</div>
				</div>
				<div class="box-content">
					<p>Duis vulputate justo in facilisis faucibus. Sed eleifend justo eu aliquam pharetra. Cras egestas vehicula consequat. Maecenas maximus enim quis quam congue, quis sollicitudin magna vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
					<a href="">Read more »</a>
				</div>
			</div>
			<div class="box">
				<div class="image">
					<img src="4.jpg" alt="">
					<div class="title">Aliquam aliquet nec purus sed blandit</div>
				</div>
				<div class="box-content">
					<p>Duis vulputate justo in facilisis faucibus. Sed eleifend justo eu aliquam pharetra. Cras egestas vehicula consequat. Maecenas maximus enim quis quam congue, quis sollicitudin magna vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
					<a href="">Read more »</a>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

CSS forráskód


* { padding:0; margin:0; border:0; box-sizing:border-box }

body { font-family: 'Quattrocento', serif; font-size: 120%; background: #181818; color: #fff; margin: 3% }

.box { position: relative; color: #fff; font-size: 120%; line-height: 1.6; transition: all .5s }
.box .image { position: relative }
.box .image img { width: 100%; display: block; }
.box .image .title { position: absolute; bottom: 0; left: 0; right: 0; padding:2% 5%; background: rgba(0,0,0,0.8); color: #fff; font-size: 150%; font-family: 'Oswald', sans-serif }
.box-content { padding: 5% }
.box p { margin: 0 0 2% 0; transition: all .5s }
.box a { color: #eec015; text-decoration: none; border-bottom: 1px dotted #eec015; display: inline-block; margin: 10px 0; padding: 10px 0 0 0 }
.box:hover a { color: #fff; border-color: transparent; background: #000; padding: 5px 30px; transition: all .5s }
.box:hover a:hover { color:#eec015 }
.box:hover p { color: #000; transition: all .5s }
.box::before { content: ''; width: 100%; background: #eec015; position: absolute; top: 0; bottom: 100%; left: 0; z-index: -1; transition: all .5s }
.box:hover::before { bottom: 0; border-bottom: 10px solid #ee9f15; transition: all .5s }

.col { width: 50%; float: left; padding: 0 1.5% 0 0 }
.col:nth-child(2n) { padding: 0 0 0 1.5% }
.col:nth-child(2n) .box::before { background: #53b3d7 }
.col:nth-child(2n) .box:hover::before { border-color: #378eae }
.col:nth-child(2n) .box:hover a { background: #26677f }
.col:nth-child(2n) .box:hover a:hover { background: #1c4c5e; color: #fff }

.wrapper:after { content: ''; display: table; clear: both }


@media(max-width:1200px) {
	body { font-size:90% }
}


@media(max-width:768px) {
	body { margin: 0 }
	.col { float: none; width: 100%; padding: 0 }
	.col:nth-child(2n) { padding: 0 }
}

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Dia szkennelés házilag

    Ezt a fajtát nem tudom, hogy lehet még kapni. Normál diavetítőt lehet kapni nagyobb játékboltokban például....

  • Bootstrap carousel

    Ennél a réginél nem tudom, hogy volt e már ilyen opció, de az újnál már van olyan, hogy touch="true"...

  • Adobe XD VS. Lunacy

    Sketch-et nem használok, mert nincs mac-em. Axure-t használok, arról találsz anyagot az oldalon....

  • Adobe XD VS. Lunacy

    Kedves Cyrex! A Sketch és az Axure UX-UI designer programok? Te melyiket használod ha használsz ilyen programokat? Köszönöm, üdv Balázs...

  • Bootstrap carousel

    Kedves Tamás! Az megoldható, hogy mobilon ne a nyilakra koppintva, hanem ujjal húzva váltsam a képeket? Köszönöm a sok hasznos videót. Üdvözlettel:...

  • Dia szkennelés házilag

    Ilyen diavetítőt hol lehet beszerezni?...

  • A villanyszerelés örömei panelben

    Ha nincsen a házban központilag rendbe rakva, akkor veszett fejsze nyele... Kialakíthatsz otthon EPH sínt, de ez már egy másik szint. 7kW felett 10m...

  • A villanyszerelés örömei panelben

    Ez a kábelcsatornás szegőléc nagyon jól néz ki. Szinte biztos, hogy a fürdő / konyha földelése lesz. Máshova nem vittek régen földet. Ha te húzod be a...

  • A villanyszerelés örömei panelben

    Köszönöm a gyors választ, akkor megpróbálom multiméterrel megkeresni, remélem csak a fürdő és a konyha földelését vitték innnen, nem a szomszéd lakásé...

  • A villanyszerelés örömei panelben

    A folyosón kábelcsatornában jött az órától, a bejárató ajtó felett meg be volt vakolva a falba a három bejövő vezeték. Szerencsére minimális romboláss...

  • A villanyszerelés örömei panelben

    Szia Tamás! Már hosszú ideje nézem ezt a cikkedet (szó szerint évek óta), de pár kérdésem felmerült a témában: 1. Az elosztóban az a piros vezeték, ...

  • A villanyszerelés örömei panelben

    MMCu a megnevezése (fekete, kék ér egymás mellett majd picit távolabb a zöld-sárga). Léteznek olyan fehér köpenyszigetelésű Mfal (nem írtam el, csak ...