::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
  • WordPress sablonkészítés

    Nem vagyok programozó, de ezek nagyon alap dolgok. A WP-ben használt függvények nevei és paraméterei megtalálhatók a dokumentációban....

  • WordPress sablonkészítés

    Szia Tamás! Valahol régebben írtad, hogy te webdesigner vagy és nem webfejlesztő (ahol már kódolás kell), mégis profin vágod a php-t. pl., hogy hívju...

  • A Bootstrap 4 grid használata

    Nem tudom, én nagy projektekbe csak alvállalkozóként megyek bele ahol órabérben lehet számlázni és a fővállalkozó garantáltan fizet. De azt is csak ak...

  • WordPress sablonkészítés

    Köszönöm szépen!...

  • WordPress sablonkészítés

    add_action( 'wp_print_styles', 'remove_css', 100 ); function remove_css() { wp_dequeue_style( 'wp-block-library' ); wp_deregister_style( 'wp-b...

  • WordPress sablonkészítés

    Szia Tamás! Hogy lehet kigyakni a head-ből az új, 5.0.2-es wordpress Gutenberg CSS link-rel sorát? Ezt: Próbáltam egy csomó remove_action-t de ...

  • A Bootstrap 4 grid használata

    Az előleg hány százalék? Ha megcsinálod az egészet, és mégsem kell neki, akkor is bukod a teljes munkadíjat, nem? Vagy fázisonként fizettesz vele?...

  • Reszponzív weboldal tervezés Bootstrap használatával

    A media object-ed tudod erre használni: https://www.w3schools.com/bootstrap/bootstrap_media_objects.asp...

  • Reszponzív weboldal tervezés Bootstrap használatával

    Kedves Tamás! Nagyon szuper ez a videód is. Szeretnélek megkérdezni, hogy Bootstrap 3-ban működik-e az, hogy a dobozok szöveges tartalmát nem a doboz ...

  • HTML5 + CSS3 menü

    Ki az a Sanyi?...

  • Scrollbar színezgetés CSS-sel

    Köszi a választ. Igen, egyébként azt használtam, amit először küldtél, és azzal állt fent az említett probléma. Már váltottam plugint azóta, és már me...

  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...