denene is my private playground for html and css.
this website is an open source project. see github jamband/denene diff --git a/accent-color/index.html b/accent-color/index.html index 9020ad7..e6b25ef 100644 --- a/accent-color/index.html +++ b/accent-color/index.html @@ -1,10 +1,10 @@ -
the
accent-colorcss property sets the accent color for user-interface controls generated by some elements.
| chrome | firefox | safari | |
|---|---|---|---|
| accent-color | 93 | 92 | 15.4 |
the
<dialog>html element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or diff --git a/flexbox/index.html b/flexbox/index.html index 9302630..82abf3c 100644 --- a/flexbox/index.html +++ b/flexbox/index.html @@ -1,10 +1,10 @@ -flexbox ･ jamband/denene - -flexbox
flexbox is a one-dimensional layout method for arranging items in rows or columns. items flex (expand) to fill additional space or shrink to fit into smaller spaces. this article explains all the fundamentals.
rowe.g. navigation header
grids and flexbox
the basic difference between css grid layout and css flexbox layout is diff --git a/focus-within/index.html b/focus-within/index.html index ca5c69c..a84f417 100644 --- a/focus-within/index.html +++ b/focus-within/index.html @@ -1,10 +1,10 @@ -
:focus-within ･ jamband/denene - -:focus-within
the
:focus-withincss pseudo-class matches an element if the element or any of its descendants are focused. in other words, it represents an element that is itself matched by the :focus diff --git a/grids/index.html b/grids/index.html index d951c01..8b0b155 100644 --- a/grids/index.html +++ b/grids/index.html @@ -1,10 +1,10 @@ -grids ･ jamband/denene - -grids
css grid layout is a two-dimensional layout system for the web. it lets you lay content out in rows and columns. it has many features that make building complex layouts straightforward. this article will explain all diff --git a/img/index.html b/img/index.html index fff1211..3f584c1 100644 --- a/img/index.html +++ b/img/index.html @@ -1,10 +1,10 @@ -
<img> ･ jamband/denene - -<img>
the
<img>html element embeds an image into the document. use both width and height to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content diff --git a/index.html b/index.html index ddc5370..f66a0e9 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ -jamband/denene +jamband/denene \ No newline at end of file diff --git a/introduction/index.html b/introduction/index.html index bebc2eb..bafcccf 100644 --- a/introduction/index.html +++ b/introduction/index.html @@ -1,8 +1,9 @@ - introduction ･ jamband/denene -introduction
1
+._container_1isma_1{align-items:center;background-color:rgb(var(--gray-700));bottom:0;box-shadow:0 0 .1rem .05rem rgb(var(--gray-900));display:flex;justify-content:center;padding:.5rem 0;position:fixed;width:100%;z-index:100}._navigation_1isma_14{display:flex;flex-direction:row;gap:1rem}@media (min-width: 768px){._navigation_1isma_14{gap:2rem}}._link_1isma_26{border-radius:.25rem;color:rgb(var(--gray-400));padding:.5rem 1.5rem;text-decoration:none}._link_1isma_26:active{background-color:rgb(var(--gray-600));color:rgb(var(--gray-100))}._container_mardz_1{background-color:rgb(var(--gray-700));box-shadow:0 .05rem .1rem rgb(var(--gray-900));font-family:var(--font-mono);position:fixed;width:100%;z-index:100}._navigation_mardz_10{align-items:center;display:flex;justify-content:center;padding:.5rem 1rem}._link_mardz_17{border-radius:.25rem;padding:.5rem 1.5rem;text-decoration:none}._link_mardz_17:active{background-color:rgb(var(--gray-600))}._account_mardz_27{color:rgb(var(--gray-100));font-size:.85rem;font-weight:700}._repository_mardz_33{color:rgb(var(--pink-300));font-weight:700} +
introduction
1
this site does not use cookies. it uses html and css, and a little javascript. it's an experimental site to think about what we can do in such a situation. diff --git a/mask-image/index.html b/mask-image/index.html index 21d39f4..fff4a70 100644 --- a/mask-image/index.html +++ b/mask-image/index.html @@ -1,10 +1,10 @@ -
mask-image ･ jamband/denene - -mask-image
the mask-image css property sets the image that is used as mask layer for an element. by default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. this can be diff --git a/position/index.html b/position/index.html index 4afea9a..1bd2820 100644 --- a/position/index.html +++ b/position/index.html @@ -1,10 +1,11 @@ -
position ･ jamband/denene -position
the
positioncss property sets how an element is +._container_1isma_1{align-items:center;background-color:rgb(var(--gray-700));bottom:0;box-shadow:0 0 .1rem .05rem rgb(var(--gray-900));display:flex;justify-content:center;padding:.5rem 0;position:fixed;width:100%;z-index:100}._navigation_1isma_14{display:flex;flex-direction:row;gap:1rem}@media (min-width: 768px){._navigation_1isma_14{gap:2rem}}._link_1isma_26{border-radius:.25rem;color:rgb(var(--gray-400));padding:.5rem 1.5rem;text-decoration:none}._link_1isma_26:active{background-color:rgb(var(--gray-600));color:rgb(var(--gray-100))}._container_mardz_1{background-color:rgb(var(--gray-700));box-shadow:0 .05rem .1rem rgb(var(--gray-900));font-family:var(--font-mono);position:fixed;width:100%;z-index:100}._navigation_mardz_10{align-items:center;display:flex;justify-content:center;padding:.5rem 1rem}._link_mardz_17{border-radius:.25rem;padding:.5rem 1.5rem;text-decoration:none}._link_mardz_17:active{background-color:rgb(var(--gray-600))}._account_mardz_27{color:rgb(var(--gray-100));font-size:.85rem;font-weight:700}._repository_mardz_33{color:rgb(var(--pink-300));font-weight:700} +position
the
positioncss property sets how an element is positioned in a document. the top, right, bottom, and left properties determine the final location of positioned elements.overlay contents
an example of an overlay images using diff --git a/subgrid/index.html b/subgrid/index.html index 0306d2c..012cf90 100644 --- a/subgrid/index.html +++ b/subgrid/index.html @@ -1,10 +1,10 @@ -
subgrid ･ jamband/denene - -subgrid
when you add
display: gridto a grid container, only the direct children become grid items and can then be placed on the grid you created. the children of these items display in normal flow.
diff --git a/text-underline/index.html b/text-underline/index.html index 6b7b3a2..c4d17cf 100644 --- a/text-underline/index.html +++ b/text-underline/index.html @@ -1,10 +1,10 @@ -text underline ･ jamband/denene - -text underline
the
text-decorationshorthand css property sets the appearance of decorative lines on text. it is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and diff --git a/transition/index.html b/transition/index.html index 8580686..62b3130 100644 --- a/transition/index.html +++ b/transition/index.html @@ -1,10 +1,10 @@ -transition ･ jamband/denene - -transition
css transitions is a module of css that lets you create gradual transitions between the values of specific css properties. the behavior of these transitions can be controlled by specifying their timing function,