CSS: Beyond the Basics - Part 1

[members_logged_in]
CSS: Beyond the Basics - Part 1

CSS can be amazing AND it can be frustrating.  In this 4 part series, we will be going deep beyond the basics and looking at how we can utilize CSS to handle lots of heavy design work on our WordPress sites. Whether you need customized navigations, modal windows, drop-downs, accordions, tabbed content, animated effects, image filters, and much more... you can do it all with CSS.

Save the Webinar 1

Webinar Originally Broadcast: July 27, 2024

Video Download: HD Download | Mobile Download

Additional Downloads: PDF Handout

Additional Notes:

Audio Only – Download File

 

<html>
<head>
	<title>CSS is Awesome</title>
	<style>
	#container{margin:50px;}
	.content{background:#fff;border:1px solid #ccc;border-radius: 0 5px 5px;padding:10px;position:absolute;width:100%;left:0;right:0;bottom:0;top:2em;}
	.tabs {position:relative;height:200px;display:block;width:500px;}
	.tab {float:left;}
	.tab label {cursor:pointer;font-size:1.2em;border-radius:5px 5px 0 0;padding:10px;background:#c69;}
	.tab [type=radio] {position:absolute;clip: rect(0,0,0,0);}
	.tab [type=radio]:hover + label {outline:2px dotted #000;}
	.tab [type=radio]:checked ~ label {background:#c99;}
	.tab [type=radio]:checked ~ label ~ .content {z-index:1;}
	.modal{position:fixed;top:0;left:0;display:flex;visibility:hidden;width:100%;height:100%;align-items:center;opacity:0;}
	.modal:target {visibility:visible;opacity:1;z-index:25;}
	.modal > div {background:#ccc;display:flex;align-items:center;justify-content: center;height:120px;padding:1em;position:relative;width:50%;}
	</style>
</head>
<body>
<h1>CSS is Awesome</h1>
<div id="container">

<h2>Look Modal Windows</h2>
<a href="#{@permalink}" class="modalbtn" id="modalTrigger">Click to open</a>

<dialog class="modal" id="{@permalink}" tabindex="-1">
	<div>
		<a href="#modalTrigger" class="close">&times;</a>
		<p>{@post_content}</p>
	</div>
</dialog>


<br><br>


<h2>Look Tabs</h2>
<div class="tabs">
	<div class="tab">
		<input type="radio" name="tabgroup" id="{@ID}" checked>
		<label for="{@ID}">{@post_title}</label>
		<div class="content">
			<p>{@post_content}</p>
		</div>
	</div>
	<div class="tab">
		<input type="radio" name="tabgroup" id="tab-2">
		<label for="tab-2">Second Tab</label>
		<div class="content">
			<p>ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
	<div class="tab">
		<input type="radio" name="tabgroup" id="tab-3">
		<label for="tab-3">Final Tab</label>
		<div class="content">
			<p>et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
		</div>
	</div>
</div>

</div>
</body>
</html>

[/members_logged_in] [members_not_logged_in]

You need to be logged into your membership account to have access to the webinar replays.

[/members_not_logged_in]
Back to Top