Outline Practice


by Jeremy Caudle
code

I wanted to play with outline-style today and create a quick way for me to double check how the styles display.

View the code:

HTML and JS 
<ul class="codedoodle-block">
<li><a href="#">auto</a></li>
<li><a href="#" class="outline-none">none</a></li>
<li><a href="#" class="outline-solid">solid</a></li>
<li><a href="#" class="outline-dotted">dotted</a></li>
<li><a href="#" class="outline-dashed">dashed</a></li>
<li><a href="#" class="outline-double">double</a></li>
<li><a href="#" class="outline-groove">groove</a></li>
<li><a href="#" class="outline-ridge">ridge</a></li>
<li><a href="#" class="outline-inset">inset</a></li>
<li><a href="#" class="outline-outset">outset</a></li>
</ul>
CSS 
.codedoodle-block {
	display: block;
	margin: 2rem auto;
	padding: 1rem;
}

ul.codedoodle-block li {
	margin-bottom: 2rem;
}

ul.codedoodle-block li a {
	padding: .5rem;
	outline-style: auto;
}

ul.codedoodle-block li a.outline-none {
outline-style: none;
transition: outline-style 1s ease-in-out;
}

ul.codedoodle-block li a.outline-none:hover {
outline-style: dotted;
}

ul.codedoodle-block li a.outline-solid {
outline-style: solid;
}

ul.codedoodle-block li a.outline-dotted {
outline-style: dotted;
}

ul.codedoodle-block li a.outline-dashed {
outline-style: dashed;
}

ul.codedoodle-block li a.outline-double {
outline-style: double;
}

ul.codedoodle-block li a.outline-groove {
outline-style: groove;
}

ul.codedoodle-block li a.outline-ridge {
outline-style: ridge;
}

ul.codedoodle-block li a.outline-inset {
outline-style: inset;
}

ul.codedoodle-block li a.outline-outset {
outline-style: outset;
}

Tags