::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

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

  • Adobe XD VS. Lunacy

    A Photoshop sosem volt igazán weboldal tervező program. A Fireworks közelebb volt hozzá annak idején, de azt megszüntették. Más kérdés, hogy még mindi...

  • Adobe XD VS. Lunacy

    Meg a PS amúgy sem ingyenes, szóval az Xd egy jó alternatíva az ilyen esetekre....

  • Adobe XD VS. Lunacy

    Dehogynem. Csak most ez a divat, hogy kattintható prototípusokat hozzunk létre....

  • Adobe XD VS. Lunacy

    PS nem megfelelő?...

  • Adobe XD VS. Lunacy

    Az Xd vel fogom csinálni a weboldalak layoutját ezentúl....

  • Adobe XD VS. Lunacy

    A Lunacy-ban az "images, comments, messages" részt nem sikerűlt egyenlő távolságra alakítani :) Maradjunk az XD-nél :)...

  • Bootstrap carousel

    https://stackoverflow.com/questions/4753695/disabling-right-click-on-images-using-jquery...

  • Bootstrap carousel

    Hali. Nekem annyi kérdésem lenne, hogy hogyan lehet azt megcsinálni, mint néhány oldalnál van, hogy van egy kép például, és nem lehet jobbclickelni rá...