703 Matching Annotations
- Jul 2024
-
dataxdesign.io dataxdesign.io
-
remain below
There's got to be some way to use
position:stickyto keep it this particular thing thing, rather than the second one in the lower right, if you want.
Tags
Annotators
URL
-
-
dataxdesign.io dataxdesign.io
-
RandomTimeline
Probably want the z-index higher on the buttons here than the shuffled cards?
-
- Feb 2024
-
www.11ty.dev www.11ty.dev
-
This tip works well on small sites that don’t have a lot of CSS. Inlining your CSS removes an external request from your critical path and speeds up page rendering times! If your CSS file is small enough, this is a simplification/end-around for Critical CSS approaches
Tags
Annotators
URL
-
-
course.oc-static.com course.oc-static.com
-
word-wrap
Cette propriété n'est plus présente dans la documentation fournie par Mozilla, elle a été remplacée par la propriété
overflow-wrapdont elle partage les même valeurs. Bien que son remplacement soit effectif, sa syntaxe reste tout de même acceptée par le CSS Working Group à des fins de rétrocompatibilité.
-
- Jan 2024
-
web.hypothes.is web.hypothes.is
-
The author's byline is styled like a link but is just text.
-
- Dec 2023
-
www.joshwcomeau.com www.joshwcomeau.com
-
I think this is one of those situations where it's easy to confuse “familiar” with “simple”. You're probably much more comfortable with min-width than flex-shrink, but that doesn't mean flex-shrink is more complicated!
-
- Nov 2023
-
-
✅ We can actually use a neat trick which basically consists in making a CSS grid with a single grid item. All we really have to do then, is taking our grid-template-rows and make it transition from 0fr to 1fr: this way, our grid item will transition from 0 to its "natural" height. It's THAT simple:
```css .accordion - body { display: grid; grid - template - rows: 0 fr; transition: 250 ms grid - template - rows ease; }
.accordion: hover.accordion - body { grid - template - rows: 1 fr; }
.accordion - body>div { overflow: hidden; } ```
-
-
www.theodinproject.com www.theodinproject.com
-
In addition to that issue, too many new developers also jump into learning frameworks too early in their education; the prospect of not having to practice writing vanilla CSS is very tempting. As a result, many developers do not get enough CSS practice under their belts to solidify the fundamentals of this very important language.
-
-
css-tricks.com css-tricks.com
-
I’m sure you can imagine, the ability to shift an element around based on its regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.
-
-
www.theodinproject.com www.theodinproject.com
-
The default positioning mode that you’ve gotten used to is position: static.
-
-
learn.shayhowe.com learn.shayhowe.com
-
Esta página es un tutorial a todos los tipos de selectors y pseudo-selectors que ofrece CSS3.
-
-
cssbattle.dev cssbattle.dev
-
Welcome to CSSBattleThe funnest multiplayer game with 300K+ web designers & developers. Replicate the target images using CSS - the shorter your code, the higher your score! Happy coding!
https://cssbattle.dev/
-
-
gregorlove.com gregorlove.com
-
css-tricks.com css-tricks.com
-
It’s become very popular to use viewport units for responsive typography – establishing font-sizes that grow and shrink depending on the current viewport size. Using simple viewport units for font-size has an interesting (dangerous) effect. As you can see, fonts scale very quickly – adjusting from unreadably small to extra large in a very small range.
No es conveniente utilizar viewport units para tipografía, ya que genera un efecto escala distorcionado.
Para evitar este efecto y seguir utilizando viewport units, debes primero colocar una unidad absoluta base (e.g. 16px) y luego utilizar una función como
calcpara multiplicarlos. Téngase por ejemplo:calc(16px + 0.5vw).
-
-
Tags
Annotators
URL
-
-
codyloyd.com codyloyd.com
-
So to reiterate my conclusion: I definitely prefer using relative units to define font-size so that you can respect the user’s settings, but I don’t personally think it’s a big deal if your layout is complex enough that you cannot support it. If you’re using rem for fonts, then I slightly prefer using pixels for elements such as margin and padding, but there is nothing wrong with using rem for that, if you prefer that scaling effect.
Utilizar
remen elementos comomarginandpaddingproduce un efecto escala similar al zoom. Si no quieres que las cosas se agranden mucho, sino solo lo necesario, es mejor utilizarpx.
-
-
meyerweb.com meyerweb.com
-
I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline.
Aún cuando se trata de un reseteo completo de estilo CSS, proponentes de este método como es the Meyer's Reset recomiendan sobreescribir partes del reseteo con las preferencias personales del diseñador. Esto quiere decir que un reseteo no debe ser un reseteo en blanco, sino un reseteo hacia el estándar o base que el diseñador prefiera.
Tags
Annotators
URL
-
-
www.theodinproject.com www.theodinproject.com
-
To counter this, many developers start their projects with a “CSS Reset”; a file that undoes browser defaults, so that every element behaves the same in every browser.
Para lidear de manera fulminante con las diferencias entre los navegadores con respecto al estilo, los diseñadores aplican un CSS Reset, lo cual elimina cualquier personalización que esté por defecto. Esta solución es radical y no estrictamente necesaria, ya que el diseñador tendra que reescribir muchas de las configuraciones que han sido borradas.
-
The problem with this is that there is no guarantee that different browsers will style everything the same. In general, inconsistencies are going to be pretty minor, but they DO exist.
Aunque existen diversas similitudes, todos los navegadores tienen defaults distintos respecto del CSS de los principales elementos HTML. Esto es algo a tener en cuenta al momento de tratar de dar una experiencia uniforme al usuario porque vas a tener que sobreescribir las diferencias entre navegadores y establecer tu propio estándar.
-
-
pencilandpaper.io pencilandpaper.io
-
Hay una serie de buenas prácticas en la fabricación de tablas que permiten una interacción más eficiente entre el usuario y la data que se busca comunicar. Una buena experiencia entre el usuario y las tablas dentro de una página web dependen en suma del diseño establecido. La fabricación de buenas tablas en la web solo requieren de conocimientos de HTML y CSS.
-
-
alan.norbauer.com alan.norbauer.com
Tags
Annotators
URL
-
-
gitlab.com gitlab.com
-
It was an intentional decision to make the items in the dropdown of content editor span two lines instead of one. The reason being that sometimes the text can get too long and the dropdown spans the entire width of page which isn't ideal. Also, a slimmer dropdown looks better on mobile devices.
Tags
Annotators
URL
-
- Oct 2023
-
developer.chrome.com developer.chrome.com
-
developer.chrome.com developer.chrome.com
Tags
Annotators
URL
-
-
-
developer.mozilla.org developer.mozilla.org
-
-
```css :root { color-scheme: light dark; }
body { background: light-dark(#333, #ccc); } ```
-
- Sep 2023
-
hachyderm.io hachyderm.io
Tags
Annotators
URL
-
- Aug 2023
-
svelte.dev svelte.dev
Tags
Annotators
URL
-
-
www.youtube.com www.youtube.com
-
-
Tags
Annotators
URL
-
-
web-platform-tests.org web-platform-tests.org
Tags
Annotators
URL
-
-
cheatsheetseries.owasp.org cheatsheetseries.owasp.org
-
stackoverflow.com stackoverflow.com
-
-
```html
<body style="visibility: hidden;"> <script>0</script> </body> <noscript> <style>body { visibility: visible; }</style> </noscript>```
-
- Jul 2023
-
gist.github.com gist.github.com
-
stackoverflow.com stackoverflow.com
-
developer.chrome.com developer.chrome.com
-
firefox-source-docs.mozilla.org firefox-source-docs.mozilla.org
- Jun 2023
-
css-tricks.com css-tricks.com
-
ishadeed.com ishadeed.com
Tags
Annotators
URL
-
-
postcss.org postcss.org
Tags
Annotators
URL
-
- May 2023
-
developer.mozilla.org developer.mozilla.org
-
developer.mozilla.org developer.mozilla.org
- Apr 2023
-
developer.mozilla.org developer.mozilla.org
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
developer.mozilla.org developer.mozilla.org
-
developer.mozilla.org developer.mozilla.org
-
x.st x.st
Tags
Annotators
URL
-
- Mar 2023
-
www.w3.org www.w3.org
Tags
Annotators
URL
-
-
web.dev web.dev
Tags
Annotators
URL
-
-
-
developer.mozilla.org developer.mozilla.org
-
vanilla-extract.style vanilla-extract.style
-
-
css-tricks.com css-tricks.com
Tags
Annotators
URL
-
-
drafts.csswg.org drafts.csswg.org
-
-
www.w3.org www.w3.org
-
-
www.mattstobbs.com www.mattstobbs.com
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
developer.mozilla.org developer.mozilla.org
-
developer.mozilla.org developer.mozilla.org
-
CSS-generated content is not included in the DOM. Because of this, it will not be represented in the accessibility tree and certain assistive technology/browser combinations will not announce it. If the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document.
-
```abnf content = normal | none | [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> ]+ ]? | element( )
<content-replacement> = <image>
<content-list> = [ <string> | contents | <image> | <counter> | <quote> | <target> | <leader()> ]+
<counter> = <counter()> | <counters()>
<image> = <url> | <gradient>
<quote> = open-quote | close-quote | no-open-quote | no-close-quote
<target> = <target-counter()> | <target-counters()> | <target-text()>
<leader()> = leader( <leader-type> )
<counter()> = counter( <counter-name> , <counter-style>? )
<counters()> = counters( <counter-name> , <string> , <counter-style>? )
<url> = url( <string> <url-modifier> ) | src( <string> <url-modifier> )
<target-counter()> = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )
<target-counters()> = target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )
<target-text()> = target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )
<leader-type> = dotted | solid | space | <string>
<counter-style> = <counter-style-name> | <symbols()>
<symbols()> = symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed <br /> ```
-
-
tailwindcss.com tailwindcss.com
-
```html
<div data-size="large" class="data-[size=large]:p-8"> </div> <div data-size="medium" class="data-[size=large]:p-8"> </div> <style> .data-\[size\=large\]\:p-8[data-size="large"] { padding: 2rem; } </style>```
-
-
-
developer.mozilla.org developer.mozilla.org
-
developer.mozilla.org developer.mozilla.org
-
abnf object-fit = fill | contain | cover | none | scale-down
-
-
developer.mozilla.org developer.mozilla.org
-
```abnf object-position = <position>
<position> = [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<length-percentage> = <length> | <percentage> ```
-
-
developer.mozilla.org developer.mozilla.org
-
css-tricks.com css-tricks.com
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
Tags
Annotators
URL
-
-
css-tricks.com css-tricks.com
-
developer.mozilla.org developer.mozilla.org
- Feb 2023
-
developer.chrome.com developer.chrome.com
Tags
Annotators
URL
-
-
patrickbrosset.medium.com patrickbrosset.medium.com
-
storybook.js.org storybook.js.org
Tags
Annotators
URL
-
- Jan 2023
-
-
semicolon.dev semicolon.dev
Tags
Annotators
URL
-
-
iamkate.com iamkate.com
Tags
Annotators
URL
-
-
garden.bradwoods.io garden.bradwoods.io
-
github.com github.com
-
https://github.com/CondeNast/atjson
They're using annotations in this context more like CSS, but instead of adding the markup into the content as is done in HTML and processing it, they've physically separated the text and the markup entirely and are using location within the text to indicate where the formatting should take place.
-
- Dec 2022
-
www.w3.org www.w3.org
Tags
Annotators
URL
-
-
hicks.design hicks.design
-
barryfrost.com barryfrost.com
-
Tailwind CSS has utility classes for height using the pattern h-x where x is a number, for example h-4 which maps to a height of 16px. Microformats 2 (MF2) also uses the h- class prefix for top-level objects like h-entry. When a MF2 parser encounters the Tailwind height classes it will incorrectly assume a new h- object has been defined.
-
-
blog.logrocket.com blog.logrocket.com
Tags
Annotators
URL
-
-
www.zhangxinxu.com www.zhangxinxu.com
-
从今天开始，请叫我Node文本节点处理大师
-
-
www.zhihu.com www.zhihu.com
-
有哪些CSS标准是前端工程师很有必要研读的？
-
-
www.zhihu.com www.zhihu.com
-
怎么进一步提高 HTML 和 CSS 的能力？
-
-
www.zhihu.com www.zhihu.com
-
CSS sprite 对性能究竟有多大影响？
-
-
www.zhihu.com www.zhihu.com
-
line-height:normal是怎样计算的?
-
-
www.zhihu.com www.zhihu.com
-
css样式的百分比都相对于谁？
-
-
www.zhihu.com www.zhihu.com
-
没有为 position: absolute 元素赋予 left、top 等值，与赋予 left:0; top:0; 的效果为何不一样？
-
-
www.zhihu.com www.zhihu.com
-
CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里？
-
-
www.zhihu.com www.zhihu.com
-
如何使移动web页面禁止横屏？
-
-
www.zhihu.com www.zhihu.com
-
CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？
-
-
www.zhihu.com www.zhihu.com
-
用 CSS 实现元素垂直居中，有哪些好的方案？
-
-
www.zhihu.com www.zhihu.com
-
CSS3 的字体大小单位「rem」到底好在哪？
-
-
www.zhihu.com www.zhihu.com
-
css content 如何自定义生成图标？
-
-
www.zhihu.com www.zhihu.com
-
CSS:line-height:150%与line-height:1.5的真正区别是什么？
-
-
www.zhihu.com www.zhihu.com
-
如何解决外边距叠加的问题？
-
-
www.zhihu.com www.zhihu.com
-
CSS 的 ID 和 Class 有什么区别？如何正确使用它们？
-
-
www.zhihu.com www.zhihu.com
-
Chrome 的审查元素功能有哪些奇技淫巧？
-
-
www.w3.org www.w3.org
Tags
Annotators
URL
-
-
www.itcodar.com www.itcodar.com
-
fastwebstart.com fastwebstart.com
-
www.w3.org www.w3.org
-
- Nov 2022
-
www.positioniseverything.net www.positioniseverything.net
-
-
docs.emmet.io docs.emmet.io
-
-
blog.jim-nielsen.com blog.jim-nielsen.com
Tags
Annotators
URL
-
-
stackoverflow.com stackoverflow.com
-
www.joshwcomeau.com www.joshwcomeau.com
Tags
Annotators
URL
-
-
www.youtube.com www.youtube.com
Tags
Annotators
URL
-
-
www.youtube.com www.youtube.com
-
-
www.youtube.com www.youtube.com
-
-
www.youtube.com www.youtube.com
-
-
www.youtube.com www.youtube.com
-
-
css-tricks.com css-tricks.com
Tags
Annotators
URL
-
-
tw-classed.vercel.app tw-classed.vercel.app
Tags
Annotators
URL
-
-
www.digitalocean.com www.digitalocean.com
-
mozilladevelopers.github.io mozilladevelopers.github.io
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
www.colorzilla.com www.colorzilla.com
Tags
Annotators
URL
-
-
codepen.io codepen.io
-
-
developer.mozilla.org developer.mozilla.org
-
css-tricks.com css-tricks.com
Tags
Annotators
URL
-
-
www.joshwcomeau.com www.joshwcomeau.com
Tags
Annotators
URL
-
-
frontendin.com frontendin.com
-
Javascript Rich Text Editors
25+ Best Javascript Rich Text Editors (WYSIWYG) For Faster And Useful Development
-
-
frontendin.com frontendin.com
-
Top 10 Best Angular Rich Text Editors For Web Development
Top 10 Best Angular Rich Text Editors For Web Development
-
-
www.w3.org www.w3.org
-
<table class="colortable"> <tbody> <tr> <th style="background:black">Named </th><th>Numeric </th><th>Color name </th><th>Hex rgb </th><th>Decimal </th></tr><tr> <td class="c" style="background:aliceblue"> </td><td class="c" style="background:#f0f8ff"> </td><td><dfn id="aliceblue">aliceblue</dfn> </td><td class="c" style="background:silver">#f0f8ff </td><td class="c" style="background:silver">240,248,255 </td></tr><tr> <td class="c" style="background:antiquewhite"> </td><td class="c" style="background:#faebd7"> </td><td><dfn id="antiquewhite">antiquewhite</dfn> </td><td class="c" style="background:silver">#faebd7 </td><td class="c" style="background:silver">250,235,215 </td></tr><tr> <td class="c" style="background:aqua"> </td><td class="c" style="background:#00ffff"> </td><td><dfn id="aqua0">aqua</dfn> </td><td class="c" style="background:silver">#00ffff </td><td class="c" style="background:silver">0,255,255 </td></tr><tr> <td class="c" style="background:aquamarine"> </td><td class="c" style="background:#7fffd4"> </td><td><dfn id="aquamarine">aquamarine</dfn> </td><td class="c" style="background:silver">#7fffd4 </td><td class="c" style="background:silver">127,255,212 </td></tr><tr> <td class="c" style="background:azure"> </td><td class="c" style="background:#f0ffff"> </td><td><dfn id="azure">azure</dfn> </td><td class="c" style="background:silver">#f0ffff </td><td class="c" style="background:silver">240,255,255 </td></tr><tr> <td class="c" style="background:beige"> </td><td class="c" style="background:#f5f5dc"> </td><td><dfn id="beige">beige</dfn> </td><td class="c" style="background:silver">#f5f5dc </td><td class="c" style="background:silver">245,245,220 </td></tr><tr> <td class="c" style="background:bisque"> </td><td class="c" style="background:#ffe4c4"> </td><td><dfn id="bisque">bisque</dfn> </td><td class="c" style="background:silver">#ffe4c4 </td><td class="c" style="background:silver">255,228,196 </td></tr><tr> <td class="c" style="background:black"> </td><td class="c" style="background:#000000"> </td><td><dfn id="black0">black</dfn> </td><td class="c" style="background:silver">#000000 </td><td class="c" style="background:silver">0,0,0 </td></tr><tr> <td class="c" style="background:blanchedalmond"> </td><td class="c" style="background:#ffebcd"> </td><td><dfn id="blanchedalmond">blanchedalmond</dfn> </td><td class="c" style="background:silver">#ffebcd </td><td class="c" style="background:silver">255,235,205 </td></tr><tr> <td class="c" style="background:blue"> </td><td class="c" style="background:#0000ff"> </td><td><dfn id="blue0">blue</dfn> </td><td class="c" style="background:silver">#0000ff </td><td class="c" style="background:silver">0,0,255 </td></tr><tr> <td class="c" style="background:blueviolet"> </td><td class="c" style="background:#8a2be2"> </td><td><dfn id="blueviolet">blueviolet</dfn> </td><td class="c" style="background:silver">#8a2be2 </td><td class="c" style="background:silver">138,43,226 </td></tr><tr> <td class="c" style="background:brown"> </td><td class="c" style="background:#a52a2a"> </td><td><dfn id="brown">brown</dfn> </td><td class="c" style="background:silver">#a52a2a </td><td class="c" style="background:silver">165,42,42 </td></tr><tr> <td class="c" style="background:burlywood"> </td><td class="c" style="background:#deb887"> </td><td><dfn id="burlywood">burlywood</dfn> </td><td class="c" style="background:silver">#deb887 </td><td class="c" style="background:silver">222,184,135 </td></tr><tr> <td class="c" style="background:cadetblue"> </td><td class="c" style="background:#5f9ea0"> </td><td><dfn id="cadetblue">cadetblue</dfn> </td><td class="c" style="background:silver">#5f9ea0 </td><td class="c" style="background:silver">95,158,160 </td></tr><tr> <td class="c" style="background:chartreuse"> </td><td class="c" style="background:#7fff00"> </td><td><dfn id="chartreuse">chartreuse</dfn> </td><td class="c" style="background:silver">#7fff00 </td><td class="c" style="background:silver">127,255,0 </td></tr><tr> <td class="c" style="background:chocolate"> </td><td class="c" style="background:#d2691e"> </td><td><dfn id="chocolate">chocolate</dfn> </td><td class="c" style="background:silver">#d2691e </td><td class="c" style="background:silver">210,105,30 </td></tr><tr> <td class="c" style="background:coral"> </td><td class="c" style="background:#ff7f50"> </td><td><dfn id="coral">coral</dfn> </td><td class="c" style="background:silver">#ff7f50 </td><td class="c" style="background:silver">255,127,80 </td></tr><tr> <td class="c" style="background:cornflowerblue"> </td><td class="c" style="background:#6495ed"> </td><td><dfn id="cornflowerblue">cornflowerblue</dfn> </td><td class="c" style="background:silver">#6495ed </td><td class="c" style="background:silver">100,149,237 </td></tr><tr> <td class="c" style="background:cornsilk"> </td><td class="c" style="background:#fff8dc"> </td><td><dfn id="cornsilk">cornsilk</dfn> </td><td class="c" style="background:silver">#fff8dc </td><td class="c" style="background:silver">255,248,220 </td></tr><tr> <td class="c" style="background:crimson"> </td><td class="c" style="background:#dc143c"> </td><td><dfn id="crimson">crimson</dfn> </td><td class="c" style="background:silver">#dc143c </td><td class="c" style="background:silver">220,20,60 </td></tr><tr> <td class="c" style="background:cyan"> </td><td class="c" style="background:#00ffff"> </td><td><dfn id="cyan">cyan</dfn> </td><td class="c" style="background:silver">#00ffff </td><td class="c" style="background:silver">0,255,255 </td></tr><tr> <td class="c" style="background:darkblue"> </td><td class="c" style="background:#00008b"> </td><td><dfn id="darkblue">darkblue</dfn> </td><td class="c" style="background:silver">#00008b </td><td class="c" style="background:silver">0,0,139 </td></tr><tr> <td class="c" style="background:darkcyan"> </td><td class="c" style="background:#008b8b"> </td><td><dfn id="darkcyan">darkcyan</dfn> </td><td class="c" style="background:silver">#008b8b </td><td class="c" style="background:silver">0,139,139 </td></tr><tr> <td class="c" style="background:darkgoldenrod"> </td><td class="c" style="background:#b8860b"> </td><td><dfn id="darkgoldenrod">darkgoldenrod</dfn> </td><td class="c" style="background:silver">#b8860b </td><td class="c" style="background:silver">184,134,11 </td></tr><tr> <td class="c" style="background:darkgray"> </td><td class="c" style="background:#a9a9a9"> </td><td><dfn id="darkgray">darkgray</dfn> </td><td class="c" style="background:silver">#a9a9a9 </td><td class="c" style="background:silver">169,169,169 </td></tr><tr> <td class="c" style="background:darkgreen"> </td><td class="c" style="background:#006400"> </td><td><dfn id="darkgreen">darkgreen</dfn> </td><td class="c" style="background:silver">#006400 </td><td class="c" style="background:silver">0,100,0 </td></tr><tr> <td class="c" style="background:darkgrey"> </td><td class="c" style="background:#a9a9a9"> </td><td><dfn id="darkgrey">darkgrey</dfn> </td><td class="c" style="background:silver">#a9a9a9 </td><td class="c" style="background:silver">169,169,169 </td></tr><tr> <td class="c" style="background:darkkhaki"> </td><td class="c" style="background:#bdb76b"> </td><td><dfn id="darkkhaki">darkkhaki</dfn> </td><td class="c" style="background:silver">#bdb76b </td><td class="c" style="background:silver">189,183,107 </td></tr><tr> <td class="c" style="background:darkmagenta"> </td><td class="c" style="background:#8b008b"> </td><td><dfn id="darkmagenta">darkmagenta</dfn> </td><td class="c" style="background:silver">#8b008b </td><td class="c" style="background:silver">139,0,139 </td></tr><tr> <td class="c" style="background:darkolivegreen"> </td><td class="c" style="background:#556b2f"> </td><td><dfn id="darkolivegreen">darkolivegreen</dfn> </td><td class="c" style="background:silver">#556b2f </td><td class="c" style="background:silver">85,107,47 </td></tr><tr> <td class="c" style="background:darkorange"> </td><td class="c" style="background:#ff8c00"> </td><td><dfn id="darkorange">darkorange</dfn> </td><td class="c" style="background:silver">#ff8c00 </td><td class="c" style="background:silver">255,140,0 </td></tr><tr> <td class="c" style="background:darkorchid"> </td><td class="c" style="background:#9932cc"> </td><td><dfn id="darkorchid">darkorchid</dfn> </td><td class="c" style="background:silver">#9932cc </td><td class="c" style="background:silver">153,50,204 </td></tr><tr> <td class="c" style="background:darkred"> </td><td class="c" style="background:#8b0000"> </td><td><dfn id="darkred">darkred</dfn> </td><td class="c" style="background:silver">#8b0000 </td><td class="c" style="background:silver">139,0,0 </td></tr><tr> <td class="c" style="background:darksalmon"> </td><td class="c" style="background:#e9967a"> </td><td><dfn id="darksalmon">darksalmon</dfn> </td><td class="c" style="background:silver">#e9967a </td><td class="c" style="background:silver">233,150,122 </td></tr><tr> <td class="c" style="background:darkseagreen"> </td><td class="c" style="background:#8fbc8f"> </td><td><dfn id="darkseagreen">darkseagreen</dfn> </td><td class="c" style="background:silver">#8fbc8f </td><td class="c" style="background:silver">143,188,143 </td></tr><tr> <td class="c" style="background:darkslateblue"> </td><td class="c" style="background:#483d8b"> </td><td><dfn id="darkslateblue">darkslateblue</dfn> </td><td class="c" style="background:silver">#483d8b </td><td class="c" style="background:silver">72,61,139 </td></tr><tr> <td class="c" style="background:darkslategray"> </td><td class="c" style="background:#2f4f4f"> </td><td><dfn id="darkslategray">darkslategray</dfn> </td><td class="c" style="background:silver">#2f4f4f </td><td class="c" style="background:silver">47,79,79 </td></tr><tr> <td class="c" style="background:darkslategrey"> </td><td class="c" style="background:#2f4f4f"> </td><td><dfn id="darkslategrey">darkslategrey</dfn> </td><td class="c" style="background:silver">#2f4f4f </td><td class="c" style="background:silver">47,79,79 </td></tr><tr> <td class="c" style="background:darkturquoise"> </td><td class="c" style="background:#00ced1"> </td><td><dfn id="darkturquoise">darkturquoise</dfn> </td><td class="c" style="background:silver">#00ced1 </td><td class="c" style="background:silver">0,206,209 </td></tr><tr> <td class="c" style="background:darkviolet"> </td><td class="c" style="background:#9400d3"> </td><td><dfn id="darkviolet">darkviolet</dfn> </td><td class="c" style="background:silver">#9400d3 </td><td class="c" style="background:silver">148,0,211 </td></tr><tr> <td class="c" style="background:deeppink"> </td><td class="c" style="background:#ff1493"> </td><td><dfn id="deeppink">deeppink</dfn> </td><td class="c" style="background:silver">#ff1493 </td><td class="c" style="background:silver">255,20,147 </td></tr><tr> <td class="c" style="background:deepskyblue"> </td><td class="c" style="background:#00bfff"> </td><td><dfn id="deepskyblue">deepskyblue</dfn> </td><td class="c" style="background:silver">#00bfff </td><td class="c" style="background:silver">0,191,255 </td></tr><tr> <td class="c" style="background:dimgray"> </td><td class="c" style="background:#696969"> </td><td><dfn id="dimgray">dimgray</dfn> </td><td class="c" style="background:silver">#696969 </td><td class="c" style="background:silver">105,105,105 </td></tr><tr> <td class="c" style="background:dimgrey"> </td><td class="c" style="background:#696969"> </td><td><dfn id="dimgrey">dimgrey</dfn> </td><td class="c" style="background:silver">#696969 </td><td class="c" style="background:silver">105,105,105 </td></tr><tr> <td class="c" style="background:dodgerblue"> </td><td class="c" style="background:#1e90ff"> </td><td><dfn id="dodgerblue">dodgerblue</dfn> </td><td class="c" style="background:silver">#1e90ff </td><td class="c" style="background:silver">30,144,255 </td></tr><tr> <td class="c" style="background:firebrick"> </td><td class="c" style="background:#b22222"> </td><td><dfn id="firebrick">firebrick</dfn> </td><td class="c" style="background:silver">#b22222 </td><td class="c" style="background:silver">178,34,34 </td></tr><tr> <td class="c" style="background:floralwhite"> </td><td class="c" style="background:#fffaf0"> </td><td><dfn id="floralwhite">floralwhite</dfn> </td><td class="c" style="background:silver">#fffaf0 </td><td class="c" style="background:silver">255,250,240 </td></tr><tr> <td class="c" style="background:forestgreen"> </td><td class="c" style="background:#228b22"> </td><td><dfn id="forestgreen">forestgreen</dfn> </td><td class="c" style="background:silver">#228b22 </td><td class="c" style="background:silver">34,139,34 </td></tr><tr> <td class="c" style="background:fuchsia"> </td><td class="c" style="background:#ff00ff"> </td><td><dfn id="fuchsia0">fuchsia</dfn> </td><td class="c" style="background:silver">#ff00ff </td><td class="c" style="background:silver">255,0,255 </td></tr><tr> <td class="c" style="background:gainsboro"> </td><td class="c" style="background:#dcdcdc"> </td><td><dfn id="gainsboro">gainsboro</dfn> </td><td class="c" style="background:silver">#dcdcdc </td><td class="c" style="background:silver">220,220,220 </td></tr><tr> <td class="c" style="background:ghostwhite"> </td><td class="c" style="background:#f8f8ff"> </td><td><dfn id="ghostwhite">ghostwhite</dfn> </td><td class="c" style="background:silver">#f8f8ff </td><td class="c" style="background:silver">248,248,255 </td></tr><tr> <td class="c" style="background:gold"> </td><td class="c" style="background:#ffd700"> </td><td><dfn id="gold">gold</dfn> </td><td class="c" style="background:silver">#ffd700 </td><td class="c" style="background:silver">255,215,0 </td></tr><tr> <td class="c" style="background:goldenrod"> </td><td class="c" style="background:#daa520"> </td><td><dfn id="goldenrod">goldenrod</dfn> </td><td class="c" style="background:silver">#daa520 </td><td class="c" style="background:silver">218,165,32 </td></tr><tr> <td class="c" style="background:gray"> </td><td class="c" style="background:#808080"> </td><td><dfn id="gray0">gray</dfn> </td><td class="c" style="background:silver">#808080 </td><td class="c" style="background:silver">128,128,128 </td></tr><tr> <td class="c" style="background:green"> </td><td class="c" style="background:#008000"> </td><td><dfn id="green0">green</dfn> </td><td class="c" style="background:silver">#008000 </td><td class="c" style="background:silver">0,128,0 </td></tr><tr> <td class="c" style="background:greenyellow"> </td><td class="c" style="background:#adff2f"> </td><td><dfn id="greenyellow">greenyellow</dfn> </td><td class="c" style="background:silver">#adff2f </td><td class="c" style="background:silver">173,255,47 </td></tr><tr> <td class="c" style="background:grey"> </td><td class="c" style="background:#808080"> </td><td><dfn id="grey">grey</dfn> </td><td class="c" style="background:silver">#808080 </td><td class="c" style="background:silver">128,128,128 </td></tr><tr> <td class="c" style="background:honeydew"> </td><td class="c" style="background:#f0fff0"> </td><td><dfn id="honeydew">honeydew</dfn> </td><td class="c" style="background:silver">#f0fff0 </td><td class="c" style="background:silver">240,255,240 </td></tr><tr> <td class="c" style="background:hotpink"> </td><td class="c" style="background:#ff69b4"> </td><td><dfn id="hotpink">hotpink</dfn> </td><td class="c" style="background:silver">#ff69b4 </td><td class="c" style="background:silver">255,105,180 </td></tr><tr> <td class="c" style="background:indianred"> </td><td class="c" style="background:#cd5c5c"> </td><td><dfn id="indianred">indianred</dfn> </td><td class="c" style="background:silver">#cd5c5c </td><td class="c" style="background:silver">205,92,92 </td></tr><tr> <td class="c" style="background:indigo"> </td><td class="c" style="background:#4b0082"> </td><td><dfn id="indigo">indigo</dfn> </td><td class="c" style="background:silver">#4b0082 </td><td class="c" style="background:silver">75,0,130 </td></tr><tr> <td class="c" style="background:ivory"> </td><td class="c" style="background:#fffff0"> </td><td><dfn id="ivory">ivory</dfn> </td><td class="c" style="background:silver">#fffff0 </td><td class="c" style="background:silver">255,255,240 </td></tr><tr> <td class="c" style="background:khaki"> </td><td class="c" style="background:#f0e68c"> </td><td><dfn id="khaki">khaki</dfn> </td><td class="c" style="background:silver">#f0e68c </td><td class="c" style="background:silver">240,230,140 </td></tr><tr> <td class="c" style="background:lavender"> </td><td class="c" style="background:#e6e6fa"> </td><td><dfn id="lavender">lavender</dfn> </td><td class="c" style="background:silver">#e6e6fa </td><td class="c" style="background:silver">230,230,250 </td></tr><tr> <td class="c" style="background:lavenderblush"> </td><td class="c" style="background:#fff0f5"> </td><td><dfn id="lavenderblush">lavenderblush</dfn> </td><td class="c" style="background:silver">#fff0f5 </td><td class="c" style="background:silver">255,240,245 </td></tr><tr> <td class="c" style="background:lawngreen"> </td><td class="c" style="background:#7cfc00"> </td><td><dfn id="lawngreen">lawngreen</dfn> </td><td class="c" style="background:silver">#7cfc00 </td><td class="c" style="background:silver">124,252,0 </td></tr><tr> <td class="c" style="background:lemonchiffon"> </td><td class="c" style="background:#fffacd"> </td><td><dfn id="lemonchiffon">lemonchiffon</dfn> </td><td class="c" style="background:silver">#fffacd </td><td class="c" style="background:silver">255,250,205 </td></tr><tr> <td class="c" style="background:lightblue"> </td><td class="c" style="background:#add8e6"> </td><td><dfn id="lightblue">lightblue</dfn> </td><td class="c" style="background:silver">#add8e6 </td><td class="c" style="background:silver">173,216,230 </td></tr><tr> <td class="c" style="background:lightcoral"> </td><td class="c" style="background:#f08080"> </td><td><dfn id="lightcoral">lightcoral</dfn> </td><td class="c" style="background:silver">#f08080 </td><td class="c" style="background:silver">240,128,128 </td></tr><tr> <td class="c" style="background:lightcyan"> </td><td class="c" style="background:#e0ffff"> </td><td><dfn id="lightcyan">lightcyan</dfn> </td><td class="c" style="background:silver">#e0ffff </td><td class="c" style="background:silver">224,255,255 </td></tr><tr> <td class="c" style="background:lightgoldenrodyellow"> </td><td class="c" style="background:#fafad2"> </td><td><dfn id="lightgoldenrodyellow">lightgoldenrodyellow</dfn> </td><td class="c" style="background:silver">#fafad2 </td><td class="c" style="background:silver">250,250,210 </td></tr><tr> <td class="c" style="background:lightgray"> </td><td class="c" style="background:#d3d3d3"> </td><td><dfn id="lightgray">lightgray</dfn> </td><td class="c" style="background:silver">#d3d3d3 </td><td class="c" style="background:silver">211,211,211 </td></tr><tr> <td class="c" style="background:lightgreen"> </td><td class="c" style="background:#90ee90"> </td><td><dfn id="lightgreen">lightgreen</dfn> </td><td class="c" style="background:silver">#90ee90 </td><td class="c" style="background:silver">144,238,144 </td></tr><tr> <td class="c" style="background:lightgrey"> </td><td class="c" style="background:#d3d3d3"> </td><td><dfn id="lightgrey">lightgrey</dfn> </td><td class="c" style="background:silver">#d3d3d3 </td><td class="c" style="background:silver">211,211,211 </td></tr><tr> <td class="c" style="background:lightpink"> </td><td class="c" style="background:#ffb6c1"> </td><td><dfn id="lightpink">lightpink</dfn> </td><td class="c" style="background:silver">#ffb6c1 </td><td class="c" style="background:silver">255,182,193 </td></tr><tr> <td class="c" style="background:lightsalmon"> </td><td class="c" style="background:#ffa07a"> </td><td><dfn id="lightsalmon">lightsalmon</dfn> </td><td class="c" style="background:silver">#ffa07a </td><td class="c" style="background:silver">255,160,122 </td></tr><tr> <td class="c" style="background:lightseagreen"> </td><td class="c" style="background:#20b2aa"> </td><td><dfn id="lightseagreen">lightseagreen</dfn> </td><td class="c" style="background:silver">#20b2aa </td><td class="c" style="background:silver">32,178,170 </td></tr><tr> <td class="c" style="background:lightskyblue"> </td><td class="c" style="background:#87cefa"> </td><td><dfn id="lightskyblue">lightskyblue</dfn> </td><td class="c" style="background:silver">#87cefa </td><td class="c" style="background:silver">135,206,250 </td></tr><tr> <td class="c" style="background:lightslategray"> </td><td class="c" style="background:#778899"> </td><td><dfn id="lightslategray">lightslategray</dfn> </td><td class="c" style="background:silver">#778899 </td><td class="c" style="background:silver">119,136,153 </td></tr><tr> <td class="c" style="background:lightslategrey"> </td><td class="c" style="background:#778899"> </td><td><dfn id="lightslategrey">lightslategrey</dfn> </td><td class="c" style="background:silver">#778899 </td><td class="c" style="background:silver">119,136,153 </td></tr><tr> <td class="c" style="background:lightsteelblue"> </td><td class="c" style="background:#b0c4de"> </td><td><dfn id="lightsteelblue">lightsteelblue</dfn> </td><td class="c" style="background:silver">#b0c4de </td><td class="c" style="background:silver">176,196,222 </td></tr><tr> <td class="c" style="background:lightyellow"> </td><td class="c" style="background:#ffffe0"> </td><td><dfn id="lightyellow">lightyellow</dfn> </td><td class="c" style="background:silver">#ffffe0 </td><td class="c" style="background:silver">255,255,224 </td></tr><tr> <td class="c" style="background:lime"> </td><td class="c" style="background:#00ff00"> </td><td><dfn id="lime0">lime</dfn> </td><td class="c" style="background:silver">#00ff00 </td><td class="c" style="background:silver">0,255,0 </td></tr><tr> <td class="c" style="background:limegreen"> </td><td class="c" style="background:#32cd32"> </td><td><dfn id="limegreen">limegreen</dfn> </td><td class="c" style="background:silver">#32cd32 </td><td class="c" style="background:silver">50,205,50 </td></tr><tr> <td class="c" style="background:linen"> </td><td class="c" style="background:#faf0e6"> </td><td><dfn id="linen">linen</dfn> </td><td class="c" style="background:silver">#faf0e6 </td><td class="c" style="background:silver">250,240,230 </td></tr><tr> <td class="c" style="background:magenta"> </td><td class="c" style="background:#ff00ff"> </td><td><dfn id="magenta">magenta</dfn> </td><td class="c" style="background:silver">#ff00ff </td><td class="c" style="background:silver">255,0,255 </td></tr><tr> <td class="c" style="background:maroon"> </td><td class="c" style="background:#800000"> </td><td><dfn id="maroon0">maroon</dfn> </td><td class="c" style="background:silver">#800000 </td><td class="c" style="background:silver">128,0,0 </td></tr><tr> <td class="c" style="background:mediumaquamarine"> </td><td class="c" style="background:#66cdaa"> </td><td><dfn id="mediumaquamarine">mediumaquamarine</dfn> </td><td class="c" style="background:silver">#66cdaa </td><td class="c" style="background:silver">102,205,170 </td></tr><tr> <td class="c" style="background:mediumblue"> </td><td class="c" style="background:#0000cd"> </td><td><dfn id="mediumblue">mediumblue</dfn> </td><td class="c" style="background:silver">#0000cd </td><td class="c" style="background:silver">0,0,205 </td></tr><tr> <td class="c" style="background:mediumorchid"> </td><td class="c" style="background:#ba55d3"> </td><td><dfn id="mediumorchid">mediumorchid</dfn> </td><td class="c" style="background:silver">#ba55d3 </td><td class="c" style="background:silver">186,85,211 </td></tr><tr> <td class="c" style="background:mediumpurple"> </td><td class="c" style="background:#9370db"> </td><td><dfn id="mediumpurple">mediumpurple</dfn> </td><td class="c" style="background:silver">#9370db </td><td class="c" style="background:silver">147,112,219 </td></tr><tr> <td class="c" style="background:mediumseagreen"> </td><td class="c" style="background:#3cb371"> </td><td><dfn id="mediumseagreen">mediumseagreen</dfn> </td><td class="c" style="background:silver">#3cb371 </td><td class="c" style="background:silver">60,179,113 </td></tr><tr> <td class="c" style="background:mediumslateblue"> </td><td class="c" style="background:#7b68ee"> </td><td><dfn id="mediumslateblue">mediumslateblue</dfn> </td><td class="c" style="background:silver">#7b68ee </td><td class="c" style="background:silver">123,104,238 </td></tr><tr> <td class="c" style="background:mediumspringgreen"> </td><td class="c" style="background:#00fa9a"> </td><td><dfn id="mediumspringgreen">mediumspringgreen</dfn> </td><td class="c" style="background:silver">#00fa9a </td><td class="c" style="background:silver">0,250,154 </td></tr><tr> <td class="c" style="background:mediumturquoise"> </td><td class="c" style="background:#48d1cc"> </td><td><dfn id="mediumturquoise">mediumturquoise</dfn> </td><td class="c" style="background:silver">#48d1cc </td><td class="c" style="background:silver">72,209,204 </td></tr><tr> <td class="c" style="background:mediumvioletred"> </td><td class="c" style="background:#c71585"> </td><td><dfn id="mediumvioletred">mediumvioletred</dfn> </td><td class="c" style="background:silver">#c71585 </td><td class="c" style="background:silver">199,21,133 </td></tr><tr> <td class="c" style="background:midnightblue"> </td><td class="c" style="background:#191970"> </td><td><dfn id="midnightblue">midnightblue</dfn> </td><td class="c" style="background:silver">#191970 </td><td class="c" style="background:silver">25,25,112 </td></tr><tr> <td class="c" style="background:mintcream"> </td><td class="c" style="background:#f5fffa"> </td><td><dfn id="mintcream">mintcream</dfn> </td><td class="c" style="background:silver">#f5fffa </td><td class="c" style="background:silver">245,255,250 </td></tr><tr> <td class="c" style="background:mistyrose"> </td><td class="c" style="background:#ffe4e1"> </td><td><dfn id="mistyrose">mistyrose</dfn> </td><td class="c" style="background:silver">#ffe4e1 </td><td class="c" style="background:silver">255,228,225 </td></tr><tr> <td class="c" style="background:moccasin"> </td><td class="c" style="background:#ffe4b5"> </td><td><dfn id="moccasin">moccasin</dfn> </td><td class="c" style="background:silver">#ffe4b5 </td><td class="c" style="background:silver">255,228,181 </td></tr><tr> <td class="c" style="background:navajowhite"> </td><td class="c" style="background:#ffdead"> </td><td><dfn id="navajowhite">navajowhite</dfn> </td><td class="c" style="background:silver">#ffdead </td><td class="c" style="background:silver">255,222,173 </td></tr><tr> <td class="c" style="background:navy"> </td><td class="c" style="background:#000080"> </td><td><dfn id="navy0">navy</dfn> </td><td class="c" style="background:silver">#000080 </td><td class="c" style="background:silver">0,0,128 </td></tr><tr> <td class="c" style="background:oldlace"> </td><td class="c" style="background:#fdf5e6"> </td><td><dfn id="oldlace">oldlace</dfn> </td><td class="c" style="background:silver">#fdf5e6 </td><td class="c" style="background:silver">253,245,230 </td></tr><tr> <td class="c" style="background:olive"> </td><td class="c" style="background:#808000"> </td><td><dfn id="olive0">olive</dfn> </td><td class="c" style="background:silver">#808000 </td><td class="c" style="background:silver">128,128,0 </td></tr><tr> <td class="c" style="background:olivedrab"> </td><td class="c" style="background:#6b8e23"> </td><td><dfn id="olivedrab">olivedrab</dfn> </td><td class="c" style="background:silver">#6b8e23 </td><td class="c" style="background:silver">107,142,35 </td></tr><tr> <td class="c" style="background:orange"> </td><td class="c" style="background:#ffa500"> </td><td><dfn id="orange">orange</dfn> </td><td class="c" style="background:silver">#ffa500 </td><td class="c" style="background:silver">255,165,0 </td></tr><tr> <td class="c" style="background:orangered"> </td><td class="c" style="background:#ff4500"> </td><td><dfn id="orangered">orangered</dfn> </td><td class="c" style="background:silver">#ff4500 </td><td class="c" style="background:silver">255,69,0 </td></tr><tr> <td class="c" style="background:orchid"> </td><td class="c" style="background:#da70d6"> </td><td><dfn id="orchid">orchid</dfn> </td><td class="c" style="background:silver">#da70d6 </td><td class="c" style="background:silver">218,112,214 </td></tr><tr> <td class="c" style="background:palegoldenrod"> </td><td class="c" style="background:#eee8aa"> </td><td><dfn id="palegoldenrod">palegoldenrod</dfn> </td><td class="c" style="background:silver">#eee8aa </td><td class="c" style="background:silver">238,232,170 </td></tr><tr> <td class="c" style="background:palegreen"> </td><td class="c" style="background:#98fb98"> </td><td><dfn id="palegreen">palegreen</dfn> </td><td class="c" style="background:silver">#98fb98 </td><td class="c" style="background:silver">152,251,152 </td></tr><tr> <td class="c" style="background:paleturquoise"> </td><td class="c" style="background:#afeeee"> </td><td><dfn id="paleturquoise">paleturquoise</dfn> </td><td class="c" style="background:silver">#afeeee </td><td class="c" style="background:silver">175,238,238 </td></tr><tr> <td class="c" style="background:palevioletred"> </td><td class="c" style="background:#db7093"> </td><td><dfn id="palevioletred">palevioletred</dfn> </td><td class="c" style="background:silver">#db7093 </td><td class="c" style="background:silver">219,112,147 </td></tr><tr> <td class="c" style="background:papayawhip"> </td><td class="c" style="background:#ffefd5"> </td><td><dfn id="papayawhip">papayawhip</dfn> </td><td class="c" style="background:silver">#ffefd5 </td><td class="c" style="background:silver">255,239,213 </td></tr><tr> <td class="c" style="background:peachpuff"> </td><td class="c" style="background:#ffdab9"> </td><td><dfn id="peachpuff">peachpuff</dfn> </td><td class="c" style="background:silver">#ffdab9 </td><td class="c" style="background:silver">255,218,185 </td></tr><tr> <td class="c" style="background:peru"> </td><td class="c" style="background:#cd853f"> </td><td><dfn id="peru">peru</dfn> </td><td class="c" style="background:silver">#cd853f </td><td class="c" style="background:silver">205,133,63 </td></tr><tr> <td class="c" style="background:pink"> </td><td class="c" style="background:#ffc0cb"> </td><td><dfn id="pink">pink</dfn> </td><td class="c" style="background:silver">#ffc0cb </td><td class="c" style="background:silver">255,192,203 </td></tr><tr> <td class="c" style="background:plum"> </td><td class="c" style="background:#dda0dd"> </td><td><dfn id="plum">plum</dfn> </td><td class="c" style="background:silver">#dda0dd </td><td class="c" style="background:silver">221,160,221 </td></tr><tr> <td class="c" style="background:powderblue"> </td><td class="c" style="background:#b0e0e6"> </td><td><dfn id="powderblue">powderblue</dfn> </td><td class="c" style="background:silver">#b0e0e6 </td><td class="c" style="background:silver">176,224,230 </td></tr><tr> <td class="c" style="background:purple"> </td><td class="c" style="background:#800080"> </td><td><dfn id="purple0">purple</dfn> </td><td class="c" style="background:silver">#800080 </td><td class="c" style="background:silver">128,0,128 </td></tr><tr> <td class="c" style="background:red"> </td><td class="c" style="background:#ff0000"> </td><td><dfn id="red0">red</dfn> </td><td class="c" style="background:silver">#ff0000 </td><td class="c" style="background:silver">255,0,0 </td></tr><tr> <td class="c" style="background:rosybrown"> </td><td class="c" style="background:#bc8f8f"> </td><td><dfn id="rosybrown">rosybrown</dfn> </td><td class="c" style="background:silver">#bc8f8f </td><td class="c" style="background:silver">188,143,143 </td></tr><tr> <td class="c" style="background:royalblue"> </td><td class="c" style="background:#4169e1"> </td><td><dfn id="royalblue">royalblue</dfn> </td><td class="c" style="background:silver">#4169e1 </td><td class="c" style="background:silver">65,105,225 </td></tr><tr> <td class="c" style="background:saddlebrown"> </td><td class="c" style="background:#8b4513"> </td><td><dfn id="saddlebrown">saddlebrown</dfn> </td><td class="c" style="background:silver">#8b4513 </td><td class="c" style="background:silver">139,69,19 </td></tr><tr> <td class="c" style="background:salmon"> </td><td class="c" style="background:#fa8072"> </td><td><dfn id="salmon">salmon</dfn> </td><td class="c" style="background:silver">#fa8072 </td><td class="c" style="background:silver">250,128,114 </td></tr><tr> <td class="c" style="background:sandybrown"> </td><td class="c" style="background:#f4a460"> </td><td><dfn id="sandybrown">sandybrown</dfn> </td><td class="c" style="background:silver">#f4a460 </td><td class="c" style="background:silver">244,164,96 </td></tr><tr> <td class="c" style="background:seagreen"> </td><td class="c" style="background:#2e8b57"> </td><td><dfn id="seagreen">seagreen</dfn> </td><td class="c" style="background:silver">#2e8b57 </td><td class="c" style="background:silver">46,139,87 </td></tr><tr> <td class="c" style="background:seashell"> </td><td class="c" style="background:#fff5ee"> </td><td><dfn id="seashell">seashell</dfn> </td><td class="c" style="background:silver">#fff5ee </td><td class="c" style="background:silver">255,245,238 </td></tr><tr> <td class="c" style="background:sienna"> </td><td class="c" style="background:#a0522d"> </td><td><dfn id="sienna">sienna</dfn> </td><td class="c" style="background:silver">#a0522d </td><td class="c" style="background:silver">160,82,45 </td></tr><tr> <td class="c" style="background:silver"> </td><td class="c" style="background:#c0c0c0"> </td><td><dfn id="silver0">silver</dfn> </td><td class="c" style="background:silver">#c0c0c0 </td><td class="c" style="background:silver">192,192,192 </td></tr><tr> <td class="c" style="background:skyblue"> </td><td class="c" style="background:#87ceeb"> </td><td><dfn id="skyblue">skyblue</dfn> </td><td class="c" style="background:silver">#87ceeb </td><td class="c" style="background:silver">135,206,235 </td></tr><tr> <td class="c" style="background:slateblue"> </td><td class="c" style="background:#6a5acd"> </td><td><dfn id="slateblue">slateblue</dfn> </td><td class="c" style="background:silver">#6a5acd </td><td class="c" style="background:silver">106,90,205 </td></tr><tr> <td class="c" style="background:slategray"> </td><td class="c" style="background:#708090"> </td><td><dfn id="slategray">slategray</dfn> </td><td class="c" style="background:silver">#708090 </td><td class="c" style="background:silver">112,128,144 </td></tr><tr> <td class="c" style="background:slategrey"> </td><td class="c" style="background:#708090"> </td><td><dfn id="slategrey">slategrey</dfn> </td><td class="c" style="background:silver">#708090 </td><td class="c" style="background:silver">112,128,144 </td></tr><tr> <td class="c" style="background:snow"> </td><td class="c" style="background:#fffafa"> </td><td><dfn id="snow">snow</dfn> </td><td class="c" style="background:silver">#fffafa </td><td class="c" style="background:silver">255,250,250 </td></tr><tr> <td class="c" style="background:springgreen"> </td><td class="c" style="background:#00ff7f"> </td><td><dfn id="springgreen">springgreen</dfn> </td><td class="c" style="background:silver">#00ff7f </td><td class="c" style="background:silver">0,255,127 </td></tr><tr> <td class="c" style="background:steelblue"> </td><td class="c" style="background:#4682b4"> </td><td><dfn id="steelblue">steelblue</dfn> </td><td class="c" style="background:silver">#4682b4 </td><td class="c" style="background:silver">70,130,180 </td></tr><tr> <td class="c" style="background:tan"> </td><td class="c" style="background:#d2b48c"> </td><td><dfn id="tan">tan</dfn> </td><td class="c" style="background:silver">#d2b48c </td><td class="c" style="background:silver">210,180,140 </td></tr><tr> <td class="c" style="background:teal"> </td><td class="c" style="background:#008080"> </td><td><dfn id="teal0">teal</dfn> </td><td class="c" style="background:silver">#008080 </td><td class="c" style="background:silver">0,128,128 </td></tr><tr> <td class="c" style="background:thistle"> </td><td class="c" style="background:#d8bfd8"> </td><td><dfn id="thistle">thistle</dfn> </td><td class="c" style="background:silver">#d8bfd8 </td><td class="c" style="background:silver">216,191,216 </td></tr><tr> <td class="c" style="background:tomato"> </td><td class="c" style="background:#ff6347"> </td><td><dfn id="tomato">tomato</dfn> </td><td class="c" style="background:silver">#ff6347 </td><td class="c" style="background:silver">255,99,71 </td></tr><tr> <td class="c" style="background:turquoise"> </td><td class="c" style="background:#40e0d0"> </td><td><dfn id="turquoise">turquoise</dfn> </td><td class="c" style="background:silver">#40e0d0 </td><td class="c" style="background:silver">64,224,208 </td></tr><tr> <td class="c" style="background:violet"> </td><td class="c" style="background:#ee82ee"> </td><td><dfn id="violet">violet</dfn> </td><td class="c" style="background:silver">#ee82ee </td><td class="c" style="background:silver">238,130,238 </td></tr><tr> <td class="c" style="background:wheat"> </td><td class="c" style="background:#f5deb3"> </td><td><dfn id="wheat">wheat</dfn> </td><td class="c" style="background:silver">#f5deb3 </td><td class="c" style="background:silver">245,222,179 </td></tr><tr> <td class="c" style="background:white"> </td><td class="c" style="background:#ffffff"> </td><td><dfn id="white0">white</dfn> </td><td class="c" style="background:silver">#ffffff </td><td class="c" style="background:silver">255,255,255 </td></tr><tr> <td class="c" style="background:whitesmoke"> </td><td class="c" style="background:#f5f5f5"> </td><td><dfn id="whitesmoke">whitesmoke</dfn> </td><td class="c" style="background:silver">#f5f5f5 </td><td class="c" style="background:silver">245,245,245 </td></tr><tr> <td class="c" style="background:yellow"> </td><td class="c" style="background:#ffff00"> </td><td><dfn id="yellow0">yellow</dfn> </td><td class="c" style="background:silver">#ffff00 </td><td class="c" style="background:silver">255,255,0 </td></tr><tr> <td class="c" style="background:yellowgreen"> </td><td class="c" style="background:#9acd32"> </td><td><dfn id="yellowgreen">yellowgreen</dfn> </td><td class="c" style="background:silver">#9acd32 </td><td class="c" style="background:silver">154,205,50 </td></tr></tbody></table>
-
-
www.w3.org www.w3.org
Tags
Annotators
URL
-
-
css-tricks.com css-tricks.com
-
codepen.io codepen.io
Tags
Annotators
URL
-
-
blog.logrocket.com blog.logrocket.com
Tags
Annotators
URL
-
-
twitter.com twitter.com
-
www.w3.org www.w3.org
Tags
Annotators
URL
-
-
microsoftedge.github.io microsoftedge.github.io
-
www.azabani.com www.azabani.com
-
```html
<style> ::selection { background: #00FF00; } ::highlight(foo) { background: #FF00FF; } </style> <script> getSelection().removeAllRanges(); getSelection().selectAllChildren(document.body); const style = getComputedStyle(document.body, "::highlight(foo)"); console.log(style.backgroundColor); </script> <body>Hello, world!</body>```
-
-
daisyui.com daisyui.com
-
- Oct 2022
-
deck-24abcd.netlify.app deck-24abcd.netlify.app
Tags
Annotators
URL
-
-
css-tricks.com css-tricks.com
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
stackoverflow.com stackoverflow.com
-
Auto Margins With auto margins, flex items can be centered, spaced away or packed into sub-groups. Unlike justify-content, which is applied to the flex container, auto margins go on flex items. They work by consuming all free space in the specified direction. Align group of flex items to the right, but first item to the left Scenario from the question: making a group of flex items align-right (justify-content: flex-end) but have the first item align left (justify-self: flex-start) Consider a header section with a group of nav items and a logo. With justify-self the logo could be aligned left while the nav items stay far right, and the whole thing adjusts smoothly ("flexes") to different screen sizes.
-
-
www.loom.com www.loom.com
-
https://www.loom.com/share/a05f636661cb41628b9cb7061bd749ae
Synopsis: Maggie Delano looks at some of the affordances supplied by Tana (compared to Roam Research) in terms of providing better block-based user interface for note type creation, search, and filtering.
These sorts of tools and programmable note implementations remind me of Beatrice Webb's idea of scientific note taking or using her note cards like a database to sort and search for data to analyze it and create new results and insight.
It would seem that many of these note taking tools like Roam and Tana are using blocks and sub blocks as a means of defining atomic notes or database-like data in a way in which sub-blocks are linked to or "filed underneath" their parent blocks. In reality it would seem that they're still using a broadly defined index card type system as used in the late 1800s/early 1900s to implement a set up that otherwise would be a traditional database in the Microsoft Excel or MySQL sort of fashion, the major difference being that the user interface is cognitively easier to understand for most people.
These allow people to take a form of structured textual notes to which might be attached other smaller data or meta data chunks that can be easily searched, sorted, and filtered to allow for quicker or easier use.
Ostensibly from a mathematical (or set theoretic and even topological) point of view there should be a variety of one-to-one and onto relationships (some might even extend these to "links") between these sorts of notes and database representations such that one should be able to implement their note taking system in Excel or MySQL and do all of these sorts of things.
Cascading Idea Sheets or Cascading Idea Relationships
One might analogize these sorts of note taking interfaces to Cascading Style Sheets (CSS). While there is the perennial question about whether or not CSS is a programming language, if we presume that it is (and it is), then we can apply the same sorts of class, id, and inheritance structures to our notes and their meta data. Thus one could have an incredibly atomic word, phrase, or even number(s) which inherits a set of semantic relationships to those ideas which it sits below. These links and relationships then more clearly define and contextualize them with respect to other similar ideas that may be situated outside of or adjacent to them. Once one has done this then there is a variety of Boolean operations which might be applied to various similar sets and classes of ideas.
If one wanted to go an additional level of abstraction further, then one could apply the ideas of category theory to one's notes to generate new ideas and structures. This may allow using abstractions in one field of academic research to others much further afield.
The user interface then becomes the key differentiator when bringing these ideas to the masses. Developers and designers should be endeavoring to allow the power of complex searches, sorts, and filtering while minimizing the sorts of advanced search queries that an average person would be expected to execute for themselves while also allowing some reasonable flexibility in the sorts of ways that users might (most easily for them) add data and meta data to their ideas.
Jupyter programmable notebooks are of this sort, but do they have the same sort of hierarchical "card" type (or atomic note type) implementation?
Tags
- super tags
- user interface
- Maggie Delano
- Tana
- watch
- CSS
- building blocks
- Roam Research
- Boolean algebra
- Jupyter
- integrated development environment
- category theory
- programmable notes
- cascading idea sheets
- types of notes
- scientific note taking
- integrated thinking environments
- Beatrice Webb
- idea links
- card index as database
Annotators
URL
-
-
sinnbeck.dev sinnbeck.dev
-
protected static function resolveFacadeInstance($name)
This page has a neat effect, first apparent with this example, where a blur effect is used on most of the text in the code block, except for lines 11–13 which are shown in sharp focus. (You can mouse over the code block to eliminate the blur effect.)
.torchlight.has-focus-lines .line:not(.line-focus) { transition: filter 0.35s, opacity 0.35s; filter: blur(.095rem); opacity: .65; }Each line is dumped into a div and the line-focus class set on those which are supposed to be unblurred.
(For ordinary code blocks without any blur/focus effect, the has-focus-class line is simply not used.)
-
-
developer.mozilla.org developer.mozilla.org
- Sep 2022
-
stackoverflow.com stackoverflow.com
-
This is telling the browser that the width of #header should be 100% with a padding of 30px. Since padding is not counted into the width, the actual width ends up to be 100% + 60px. So, in order to make sure this fits into the page, you need to subtract 60px (30px to the left + 30px to the right) from the 100% width and it will fit into the browser. Luckily you are easily able to do this with CSS: #header{ padding: 30px; width: calc(100% - 60px);
-
Thats because you have both width and padding set to one element. And by default padding is added on top of width. (Making it 100% + 2*30px of width). #header{ padding: 30px; width: 100%; } Either remove padding and add it to an inner element with no width set, or use: box-sizing: border-box; Which makes the width calculation include padding. :)
-
- Aug 2022
-
-
```css .body, .wrapper { / Break the flow / position: absolute; top: 0px;
/ Give them all the available space / width: 100%; height: 100%;
/ Remove the margins if any / margin: 0;
/ Allow them to scroll down the document / overflow-y: hidden; } ```
Tags
Annotators
URL
-
-
nikitahl.com nikitahl.com
-
```html
<div class="select-container" data-content=""> <select class="select" id="words"> <option value="lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</option> <option value="lorem">Lorem</option> <option value="ipsum">Ipsum</option> <option value="dolor">Dolor</option> <option value="sit">Sit</option> <option value="amet">Amet</option> </select> </div>css .select { color: transparent; appearance: none; padding: 5px; background: transparent url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png") no-repeat calc(~"100% - 5px") 7px; background-size: 10px 10px; }.select-container { position: relative; display: inline-block; }
.select-container::before { content: attr(data-content); pointer-events: none; position: absolute; top: 0; right: 10px; bottom: 0; left: 0; padding: 7px; font: 11px Arial, sans-serif; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-transform: capitalize; }
js const selectContainer = document.querySelector(".select-container"); const select = selectContainer.querySelector(".select");select.value = "lorem ipsum dolor sit amet"; selectContainer.dataset.content = select.value;
function handleChange(e) { selectContainer.dataset.content = e.currentTarget.value; }
select.addEventListener("change", handleChange); ```
-
-
webkit.org webkit.org
-
```html
<figure>
<figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>
css figure:has(figcaption) { background: white; padding: 0.6rem; } ```
-
-
css-tricks.com css-tricks.com
Tags
Annotators
URL
-
-
www.smashingmagazine.com www.smashingmagazine.com
-
www.w3.org www.w3.org
-
-
developer.mozilla.org developer.mozilla.org
-
code.tutsplus.com code.tutsplus.com
-
developer.mozilla.org developer.mozilla.org
