::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
  • A Bootstrap 4 grid használata

    100% magasságot kell adni a bal oszlopnak....

  • WordPress sablon készítés

    Ne plugint használj, hanem írd bele a header.php-ba....

  • WordPress sablon készítés

    Hali. Beállítottam egy fav icont a weboldalamra, viszont nem látszik egyáltalán, csak akkor ha a WordPress adminjában vagyok. Szerinted ez miért van? ...

  • A Bootstrap 4 grid használata

    Hali. Nekem egy bootstrap 4-et használó oldalon van egy sorom, amiben van két oszlop. A bal oldali oszlopban van egy h2-es címsor, és két bekezdés. A ...

  • Az Advanced Custom Fields plugin használata

    Persze, a wysiwyg szerkesztővel tudsz videót is beszúrni....

  • Az Advanced Custom Fields plugin használata

    Ezzel a pluginnal youtube videót lehet beszúrni ugyanígy mint képet? Mert én nem tudtam igazán rájönni mit kéne kiválasztanom ehhez....

  • Bootstrap 4 setup

    Shift + Tab...

  • Bootstrap 4 setup

    Hali. Hogy csinálod azt a videókban, hogy egyszerre törölsz több sor tabulátorát is? Hogy kijelölsz egy részt és azok mögül mind törölsz tabulátort eg...

  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...