Главная » Языки программирования

Css list style template

На чтение 13 мин
Содержание
  1. CSS Lists
  2. Example
  3. An Image as The List Item Marker
  4. Example
  5. Position The List Item Markers
  6. Example
  7. Remove Default Settings
  8. Example
  9. List — Shorthand property
  10. Example
  11. Styling List With Colors
  12. Example
  13. More Examples
  14. All CSS List Properties
  15. CSS List Style: 20+ examples
  16. Contents
  17. Unordered List
  18. Set List Item Markers
  19. Custom Bullets
  20. Set an Image as List Item Marker
  21. Ordered List
  22. Changing Punctuation in List Items
  23. Position the List Item Markers
  24. Colored Markers
  25. Colored Markers with Background
  26. Examples of More Advanced Use
  27. Example #1
  28. Example #2
  29. Example #3
  30. 47 CSS Lists
  31. Related Articles
  32. Author
  33. Links
  34. Made with
  35. About a code
  36. Named Scroll-Timeline Vertical
  37. Author
  38. Links
  39. Made with
  40. About a code
  41. A Better OL (Numbered List with Circle Outline)
  42. Author
  43. Links
  44. Made with
  45. About a code
  46. Handwritten Shopping List with Custom markers
  47. Author
  48. Links
  49. Made with
  50. About a code
  51. Custom Properties Step Progress Indicator
  52. Author
  53. Links
  54. Made with
  55. About a code
  56. Compact Book Quotes
  57. Author
  58. Links
  59. Made with
  60. About a code
  61. Codepen Team Member List — Even/Odd Styles
  62. Author
  63. Links
  64. Made with
  65. About a code
  66. Reversed and Split List
  67. Author
  68. Links
  69. Made with
  70. About a code
  71. Reversed and Split List with ::before
  72. Author
  73. Links
  74. Made with
  75. About a code
  76. The Order of Operations
  77. Author
  78. Links
  79. Made with
  80. About a code
  81. Todo List with Sticky Notes
  82. Author
  83. Links
  84. Made with
  85. About a code
  86. Morphing Moonrocks
  87. Author
  88. Links
  89. Made with
  90. About a code
  91. Interactive Loose-Leaf Todo List
  92. Author
  93. Links
  94. Made with
  95. About a code
  96. Todo List with Little Details
  97. Author
  98. Links
  99. Made with
  100. About a code
  101. Stars List
  102. Author
  103. Links
  104. Made with
  105. About a code
  106. CSS3 List. Spinning Heart List-Style
  107. Author
  108. Links
  109. Made with
  110. About a code
  111. UL Cards with Depth
  112. Author
  113. Links
  114. Made with
  115. About a code
  116. OL Standing Cards
  117. Author
  118. Links
  119. Made with
  120. About a code
  121. UL Banner Cards
  122. Author
  123. Links
  124. Made with
  125. About a code
  126. OL Circle Cards
  127. Author
  128. Links
  129. Made with
  130. About a code
  131. UL Icon Cards
  132. Author
  133. Links
  134. Made with
  135. About a code
  136. UL-Circles with Icons
  137. Author
  138. Links
  139. Made with
  140. About a code
  141. OL Cards — Single Element
  142. Author
  143. Links
  144. Made with
  145. About a code
  146. Ordered List Arrow Cards
  147. Author
  148. Links
  149. Made with
  150. About a code
  151. Sticky Definition List
  152. Author
  153. Links
  154. Made with
  155. About a code
  156. Pure CSS To-Do
  157. Author
  158. Links
  159. Made with
  160. About a code
  161. CSS Pseudo Commas: Exploring Comma Rules in Nouns and Verbs
  162. Author
  163. Links
  164. Made with
  165. About a code
  166. Just Another Definition List, Grid, Sass, Responsive
  167. Author
  168. Links
  169. Made with
  170. About a code
  171. Take a Number Contact List
  172. Author
  173. Links
  174. Made with
  175. About a code
  176. Mini Insta-Friends Scrolling List Layout
  177. Author
  178. Links
  179. Made with
  180. About a code
  181. Inline Lists with Conditional Separators
  182. Author
  183. Links
  184. Made with
  185. About a code
  186. Forbes Leaderboard
  187. Author
  188. Links
  189. Made with
  190. About a code
  191. Pretty Sticky
  192. Author
  193. Links
  194. Made with
  195. About a code
  196. Checklist Animation — Only CSS
  197. Author
  198. Links
  199. Made with
  200. About a code
  201. 12nth Selectors
  202. Author
  203. Links
  204. Made with
  205. About a code
  206. Gradient Ordered List
  207. Author

CSS Lists

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example

ol.c list-style-type: upper-roman;
>

ol.d list-style-type: lower-alpha;
>

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

Example

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

«list-style-position: outside;» means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:

«list-style-position: inside;» means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

Example

ul.a <
list-style-position: outside;
>

ul.b list-style-position: inside;
>

Remove Default Settings

Example

List — Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Example

When using the shorthand property, the order of the property values are:

  • list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
  • list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
  • list-style-image (specifies an image as the list item marker)
Читайте также:  Превью при загрузке php

If one of the property values above is missing, the default value for the missing property will be inserted, if any.

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

    or
    tag, affects the entire list, while properties added to the
    tag will affect the individual list items:

Example

ol <
background: #ff9999;
padding: 20px;
>

ul background: #3399ff;
padding: 20px;
>

ol li background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
>

ul li background: #cce5ff;
color: darkblue;
margin: 5px;
>

More Examples

Customized list with a red left border
This example demonstrates how to create a list with a red left border.

Full-width bordered list
This example demonstrates how to create a bordered list without bullets.

All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.

All CSS List Properties

Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies the position of the list-item markers (bullet points)
list-style-type Specifies the type of list-item marker

Источник

CSS List Style: 20+ examples

This guide contains simple and practical CSS list styles you can copy and paste, including 20+ CSS list styles templates and examples.

Contents

Web browsers dictate how bulleted and numbered lists should look. Fortunately, you can style your lists by combining various CSS properties so that your lists look just the way you want them to. And this guide will help you achieve the maximum effect.

Unordered List

CSS unordered list example

Set List Item Markers

    ). By way of illustration, we’ll apply this rule to the each individual
    element inside their parent

      :

    CSS unordered list item markers examples

    Custom Bullets

    You can also specify your own markers, such as “—”, “+”, “*”, “→”, “🌈”, “😎”, etc.:

    Here’s another solution if you want to use more options like positioning of the marker:

    CSS list custom markers

    You can remove default settings by applying these rules:

    Here are more examples of custom bullets in square, triangular, arrow, heart, diamond and other shapes:

    CSS custom bullets

     li.diamond::before < content: ""; position: absolute; left: 0px; top: 0px; width: 0; height: 0; border: 5px solid transparent; border-bottom-color: #f9dd94; >li.diamond::after
     li.circle-checkmark::before < content: ""; position: absolute; left: 0; top: 2px; border: solid 8px #f9dd94; border-radius: 8px; >li.circle-checkmark::after
     li.heart::before, li.heart::after < content: ""; position: absolute; left: 7px; top: 5px; width: 7px; height: 12px; background: #f9dd94; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; >li.heart::after
     li.cross::before < content: ""; position: absolute; height: 15px; border-left: 2px solid #f9dd94; transform: rotate(45deg); top: 2px; left: 5px; >li.cross::after
     li.curved-arrow::before < content: ""; position: absolute; width: 0; height: 0; left: 4px; top: 3px; border-top: 9px solid transparent; border-right: 9px solid #f9dd94; transform: rotate(10deg); >li.curved-arrow::after

    Find more examples of creating different shapes with CSS:

    Set an Image as List Item Marker

    You can also set an image as the list item marker using one of two ways.

      element and indicate a path to your image. In this case, you need to resize your image manually in advance so it would fit in the list (e. g. 30 px × 30 px).

    Image as CSS list marker

    Learn more about CSS backgrounds:

    Ordered List

    CSS ordered list example

      ). By way of illustration, we’ll apply this rule to the each individual
      element inside their parent

        : 
       .one < list-style-type: decimal; >.two < list-style-type: decimal-leading-zero; >.three < list-style-type: lower-roman; >.four < list-style-type: upper-roman; >.five < list-style-type: lower-greek; >.six < list-style-type: lower-latin; >.seven < list-style-type: upper-latin; >.eight < list-style-type: armenian; >.nine < list-style-type: georgian; >.ten < list-style-type: lower-alpha; >.eleven

      CSS ordered list markers

      Changing Punctuation in List Items

      You can add a semicolon at the end of each list item or any other punctuation mark:

      CSS list with semicolon

      You can also remove a comma in an ordered list marker:

      CSS ordered list marker without a comma

      Position the List Item Markers

      Web browsers also dictate how CSS list items are positioned. You might want to change the default look.

      First, you might want to remove the margin to the left of your list (apply margin-left with any value that suits you).

      Second, you can add the list-style-position: inside; so that the bullet points would be inside the list item and part of the text. The result will be a CSS list indent.

      CSS list indent

      If you want the text to be aligned along one line vertically, simply remove list-style-position: inside; :

      CSS list vertical alignment

      You can use a shorthand property to set all the list properties in one declaration: ul

      Colored Markers

      By default, markers of unordered lists are round, small and have the same color as the text. You can set the color and size of markers the way you like. For example, let’s make them bigger and pink-colored:

       ul < display: block; margin-left: -10px; >ul li < display: block; position: relative; >ul li:not(:last-child) < margin-bottom: 16px; >ul li:before

      CSS list colored markers

      Apply linear-gradient() instead of simple color, and you will get gradient markers:

      CSS list gradient marker

      Find more examples of creating CSS gradients:

      If you only want to change the color, apply these rules:

      Likewise, you can change the color of markers in an ordered list:

      CSS ordered list color

      The counter-increment property allows you to assign a name to your counter. This provides a way to identify the counter when using the ::before pseudo-element. When you name the counter-increment “item” (or whatever you like), you’re telling the browser to use a counter for each list item.

      Colored Markers with Background

      You can go further and add even more visual effects. For example, you can create markers with numbers in colored squares:

      CSS ordered list background

      You can also use a different font family for numbers in list item markers:

      CSS ordered list font 

      It is also possible to make round colored markers with numbers.

       ol < counter-reset: item; list-style-type: none; line-height: 2.2; margin-left: -40px; >ol li < display: block; position: relative; >ol li span < margin-left: 40px; >ol li:before

      The result will look like this:

      CSS unordered list background

      Apply linear-gradient() instead of simple color, and you will get gradient markers:

      CSS list gradient background

      Find more examples of creating CSS gradients:

      Examples of More Advanced Use

      Below are three examples of more complicated CSS lists with fancy design and animation.

      Example #1

      CSS list animation

        Grilled Flatfish With Pistachio-Herb SauceCoconut Cod Chowder With Seasoned Oyster CrackersTamarind-Glazed Black Bass With Coconut-Herb SaladSpicy Sweet-and-Sour Salmon With Dates 
       ol < counter-reset: li; list-style: none; padding: 0; text-shadow: 0 1px 0 rgba(255,255,255,.5); >ol a < position: relative; display: block; padding: .4em .4em .4em 2em; margin: .5em 0; background: #DAD2CA; color: #444; text-decoration: none; border-radius: .3em; transition: .3s ease-out; >ol a:hover < background: #E9E4E0; >ol a:hover:before < transform: rotate(360deg); >ol a:before

      Example #2

      CSS list animation

        Grilled Flatfish With Pistachio-Herb SauceCoconut Cod Chowder With Seasoned Oyster CrackersTamarind-Glazed Black Bass With Coconut-Herb SaladSpicy Sweet-and-Sour Salmon With Dates 
       ol < counter-reset: li; list-style: none; padding: 0; text-shadow: 0 1px 0 rgba(255,255,255,.5); >ol a < position: relative; display: block; padding: .4em .4em .4em .8em; margin: .5em 0 .5em 2.5em; background: #D3D4DA; color: #444; text-decoration: none; transition: all .3s ease-out; >ol a:hover ol a:before < content: counter(li); counter-increment: li; position: absolute; left: -2.5em; top: 50%; margin-top: -1em; background: #f9dd94; height: 2em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; >ol a:after < position: absolute; content: ""; border: .5em solid transparent; left: -1em; top: 50%; margin-top: -.5em; transition: all .3s ease-out; >ol a:hover:after

      Example #3

      CSS list restaurant menu

       ul < list-style: none; font-family: 'Marck Script', cursive; >ul li < margin-bottom: 5px; border-bottom: 2px #404B51 dotted; font-size: 26px; line-height: 1; >ul li span:nth-child(odd) < padding-right: 6px; color: #404B51; >ul li span:nth-child(even) < float: right; padding-left: 6px; color: #fff; >ul span

      These three examples above are inspired by html5book.ru.

      Источник

      47 CSS Lists

      Collection of hand-picked free HTML and CSS list style code examples from Codepen, GitHub, and other resources. Update of May 2021 collection. Twenty nine new examples.

      Author

      Made with

      About a code

      Named Scroll-Timeline Vertical

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: A Better OL (Numbered List with Circle Outline)

      Author

      Made with

      About a code

      A Better OL (Numbered List with Circle Outline)

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: Handwritten Shopping List with Custom markers

      Author

      Made with

      About a code

      Handwritten Shopping List with Custom markers

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: Custom Properties Step Progress Indicator

      Author

      Made with

      About a code

      Custom Properties Step Progress Indicator

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Made with

      About a code

      Compact Book Quotes

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: Codepen Team Member List - Even/Odd Styles

      Author

      Made with

      About a code

      Codepen Team Member List — Even/Odd Styles

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: Reversed and Split List

      Author

      Made with

      About a code

      Reversed and Split List

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: Reversed and Split List with ::before

      Author

      Made with

      About a code

      Reversed and Split List with ::before

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: The Order of Operations

      Author

      Made with

      About a code

      The Order of Operations

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Made with

      About a code

      Todo List with Sticky Notes

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Made with

      About a code

      Morphing Moonrocks

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: Interactive Loose-Leaf Todo List

      Author

      Made with

      About a code

      Interactive Loose-Leaf Todo List

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Made with

      About a code

      Todo List with Little Details

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: Stars List

      Author

      Made with

      About a code

      Stars List

      Compatible browsers: Chrome, Edge, Opera, Safari

      Demo image: CSS3 List. Spinning Heart List-Style

      Author

      Made with

      About a code

      CSS3 List. Spinning Heart List-Style

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: UL Cards with Depth

      Author

      Made with

      About a code

      UL Cards with Depth

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: OL Standing Cards

      Author

      Made with

      About a code

      OL Standing Cards

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: UL Banner Cards

      Author

      Made with

      About a code

      UL Banner Cards

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: OL Circle Cards

      Author

      Made with

      About a code

      OL Circle Cards

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: UL Icon Cards

      Author

      Made with

      About a code

      UL Icon Cards

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: UL-Circles with Icons

      Author

      Made with

      About a code

      UL-Circles with Icons

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: OL Cards - Single Element

      Author

      Made with

      About a code

      OL Cards — Single Element

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: Ordered List Arrow Cards

      Author

      Made with

      About a code

      Ordered List Arrow Cards

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Made with

      About a code

      Sticky Definition List

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Made with

      About a code

      Pure CSS To-Do

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Made with

      About a code

      CSS Pseudo Commas: Exploring Comma Rules in Nouns and Verbs

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: Just Another Definition List, Grid, Sass, Responsive

      Author

      Made with

      About a code

      Just Another Definition List, Grid, Sass, Responsive

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: Take a Number Contact List

      Author

      Made with

      About a code

      Take a Number Contact List

      A little experiment displaying contact links.

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: Mini Insta-Friends Scrolling List Layout

      Author

      Made with

      About a code

      Mini Insta-Friends Scrolling List Layout

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Made with

      About a code

      Inline Lists with Conditional Separators

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Made with

      About a code

      Forbes Leaderboard

      A quick leaderboard for the forbes under 40 list.

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Made with

      About a code

      Pretty Sticky

      A simple example highlighting how awesome CSS position: sticky can be.

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Made with

      About a code

      Checklist Animation — Only CSS

      Simple checklist animation.

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Made with

      About a code

      12nth Selectors

      CSS list with custom counter and scroll effect.

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: Gradient Ordered List

      Author

      Made with

      About a code

      Gradient Ordered List

      A simple, styled ordered list using SCSS and HTML5. The gradient background transitions from one, to another, and back again. IE11 friendly.

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Demo image: Simple CSS Check List

      Author

      Источник

Оцените статью
© 2023 Программирование