CSS List #5 - Code Example

Demo

2.56 KB
HTML, CSS
List
MIT License

Code
Editor

HTML

<ol>
    <li>The bigger the tank or aquarium the better. Most fish may be small in size, but they still need plenty of room to swim, especially if you have decided to get more than one.</li>
    <li>Think about where you place your tank. Keep it out of direct sunlight, away from windows and heating. The last thing you want is for the water in the tank to heat up out of your control.</li>
    <li>Invest in a decent filter. This will keep the water in the tank cleaner for longer, removing any debris, pollutants and waste.</li>
    <li>Add an air pump. This will keep the water in the tank oxygenated and keep it moving which is great for your fish. Pumps come in different sizes depending on the amount of litres your tank can hold.</li>
</ol>

CSS

ol {
    list-style: none;
    padding: 0;
    max-width: 500px;
}

li + li {
    margin-top: 1rem;
}

li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    gap: 1rem;
    background: aliceblue;
    padding: 1.5rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    width: -webkit-calc(100% - 2rem);
    width: -moz-calc(100% - 2rem);
    width: calc(100% - 2rem);
    -webkit-box-shadow: 0.25rem 0.25rem 0.75rem rgb(0 0 0 / 0.1);
    -moz-box-shadow: 0.25rem 0.25rem 0.75rem rgb(0 0 0 / 0.1);
    box-shadow: 0.25rem 0.25rem 0.75rem rgb(0 0 0 / 0.1);
}

li::before {
    counter-increment: list-item;
    content: counter(list-item);
    font-size: 3rem;
    font-weight: 700;
    width: 2em;
    height: 2em;
    background: black;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    flex: 0 0 auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: white;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
}

li:nth-child(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    flex-direction: row-reverse;
    background: lavender;
    margin-right: -2rem;
    margin-left: 2rem;
}

HTML
CSS

The code combines HTML and CSS to create a stylized ordered list <ol> focusing on best practices for setting up an aquarium or fish tank. The HTML part outlines four tips, including choosing a large enough tank, careful placement away from direct sunlight and heating, investing in a quality filter, and adding an air pump to ensure the water remains oxygenated and in motion.

The CSS section is designed to enhance the visual presentation of these tips. It removes the default list styling, sets a maximum width, and applies custom styles to each list item (li) and the list itself for a cleaner, more visually appealing look. Styles include background colors (alternating between ‘aliceblue’ and ‘lavender’ for even items), rounded corners, shadows for a subtle 3D effect, and custom counters before each item to serve as stylized numerical markers. The CSS employs flexbox properties for layout adjustments, ensuring items align correctly and adapt to different screen sizes.

This approach not only makes the information more engaging but also demonstrates how CSS can be used to transform standard HTML content into something more attractive and readable.