HTML Unordered List CSS Styling Examples

Here is one of various examples of HTML unordered lists with custom CSS styling. This example features the use of an inset box-shadow and a hover effect that makes the inset box-shadow grow wider during mouse over:

  • Years let form land likeness creature divided. Divide that they're. Called and creeping, fly won't had grass day good deep.
  • Abundantly beginning blessed one morning abundantly seed beginning said. Seasons deep blessed morning. Years shall is brought lesser fourth made. Open rule created, moveth make wherein.
  • Tree waters. Wherein grass god male earth forth deep let bearing over face in moving firmament fish void second made, fowl, face.
  • Were above all wherein kind face, also doesn't in kind us waters isn't called subdue shall deep abundantly fill. She'd deep fruitful.
  • Said earth it may gathered kind male years called seas fruit creeping evening given moved fourth sea first form sea dry sixth fifth very.
  • Life living Their dominion female behold which sea firmament god. Seasons there subdue air. Replenish, all you'll seasons light fifth moved second.

 

Here are the CSS directives that produce the list customizations above. The redundant padding and margin values on the list as a whole were set to override default CSS values created by the browser, which was Google Chrome while creating this example, which implements a feature called "user agent stylesheet" that establishes default styles that must be explicitly overridden either in a website's theming infrastructure or with custom CSS directives like these:

.list-unordered-custom
{
  margin: 0;
  margin-left: 20px;
  padding: 0;
  padding-left: 0;
}

.list-unordered-custom li
{
  list-style-type: none;
  background: #efefef;
  padding: .5em .5em .5em 2em;
  margin-bottom: 10px;
  border: 0px solid black;
  box-shadow:inset 0.5em 0 #898989;  
  -moz-transition: box-shadow 1s;
  -o-transition: box-shadow 1s;
  -ms-transition: box-shadow 1s;
  -webkit-transition: box-shadow 1s;
  transition: box-shadow 1s;  
}

.list-unordered-custom li:hover
{
  box-shadow: inset 1.5em 0 black;
}

The example(s) above were created with the help of the Drupal 8 Asset Injector Module. The Asset Injector Module makes it a snap to quickly insert snippets of custom CSS within a Drupal website without having to modify Drupal theme itself. The Asset Injector Module is an essential tool for use during site building. The Asset Injector Module is also able to restrict CSS or Javascript injection to specific URLs which can be difficult if the theme doesn't include information such as node ID markup in the body tag of each page.

 

websitework.space | Saturday September 9, 2017 | Thursday March 14, 2024

html
css