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

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 villanyszerelés örömei panelben

    Gratulálok! Szép leírás! Azt szeretném kérdezni, hogy nálam 3×32 amper lessz, bővítés után. Laikusként kérdem, így három Fi-relé kell? És mekkorát, é...

  • A villanyszerelés örömei panelben

    @Utolsó hozzászóló: Szia, olyan nincs, hogy 3 fázis érkezik be 3 külön vezetéken. Vagy 1 fázis 1, vagy 3 fázis 3 vezetéken. (+ a nulla) Ha az óráná...

  • A Pico CMS

    pico-release-v2.1.0, nincs benne content-samle, a content üres, nincs benne php nincs sub mappa és fájl sem, mégis ott van a subindex a menunuben...

  • CSS transition

    Köszönöm a válaszod! Igen ezzel már, próbálkoztam, de amint sikrül térben elhelyezni a megfelelő helyre a köröket, megszűnik működni rajtuk az effek...

  • CSS transition

    z-index-et állíts be a menüre, és arra is ami most fölé kerül. Értelemszerűen a menün legyen a magasabb érték....

  • CSS transition

    Kedves Tamás! Remélem még aktív a blog és tudsz nekem segíteni. Nagyon tetszett a videód, ki is próbáltam. A videód alapján beépitettem ezeket az ...

  • A villanyszerelés örömei panelben

    Egy fázis jön be három vezetéken keresztül. Az óránál egy darab megszakító van csak. Ezért kérdeztem, hogy milyen fi relét javasoltok?...

  • A villanyszerelés örömei panelben

    Ez nem igaz, mert az óránál ott a 3 biztosító darabja 20 A...

  • A shape-outside CSS property

    Olyasmit találtam hogy a szöveg részt 2 részre osztjuk bal és jobb......

  • Responsive menü

    Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...

  • Responsive menü

    Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...

  • A shape-outside CSS property

    Szerintem azt sehogy....