Transition Practice


by Jeremy Caudle
code

Today I'm doing some practice with transitions and link styles. Making these posts on my phone is a little tricky, but I'm glad I get the opportunity to make use of more apps.

I often struggle with figuring out the best color and style for hyperlinks on my own site. I want to make sure they stand out with proper contrast and style, and provide information about themselves whenever possible. It's been interesting to learn about the ability to style links with certain values, like specific file extensions, differently. I still have so much to learn. :)

View the code:

HTML and JS 
<div class="codedoodle-block" id="top" >

<p>
I often struggle with figuring out the best color and style for <a href="#top">hyperlinks</a> on my own <a href="https://jeremycaudle.com">site</a>. I want to make sure they stand out with proper contrast and style, and provide information about themselves whenever possible. It's been interesting to learn about the ability to style links with certain values, like specific file extensions, differently. I still have so much to learn. :)
</p>

</div>
CSS 
.codedoodle-block {
	max-width:60em;
	padding: 1rem;
	margin: 1rem 0;
	font-size: 1.25rem;
}
.codedoodle-block a {
	text-decoration-style: dashed;
	text-decoration-color: blue;
	text-decoration-thickness: 3px;
	color: #232323;
	transition: color .25s ease-in;
	transition: padding .125s ease-in-out;
	transition: background-color .5s ease-in-out;
}

.codedoodle-block a:hover, .codedoodle-block a:focus {
	color: red;
	background-color: #eeeeee;
	text-decoration-style: wavy;
}

.codedoodle-block p {
	font-family: 'Helvetica', Verdana, sans-serif;
	line-spacing: 1.5;
}

Tags