The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

  • Twitter Updates

  • My Flickr Stream

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 2,351 other followers

Archive for the ‘CSS’ Category

HTML table border styles

Posted by jpluimers on 2021/01/20

I always get confused when I see this kind of HTML:

<td style="border: 1px black; border-style: none solid solid;">

This raises questions like:

  • When less than 4 borders are mentioned, which borders are solid, and which borders are none?
  • What is the order of 0…4 borders?

Luckily these links helped me:

  1. [WayBack] w3schools: CSS border-style property
  2. [WayBack] w3schools: CSS Borders
  3. [WayBack] border-style – CSS: Cascading Style Sheets | MDNThe border-style¬†CSS property is a shorthand property that sets the line style for all four sides of an element’s border.

The first two made me find the last one, which is best as it has a CSS demo button (that also works on the WayBack link), a list of examples, and even better, answers the above questions with the “border-style” list below.

I rephrased their list into a table emphasising the clock-wise order:

The number of values determine the sides affected; thinking clock-wise is easiest to get it:

# values affected sides example top right bottom left
1 all: top, right, bottom, left solid solid solid solid solid
2 top & bottom, right & left none solid none solid none solid
3 top, right & left, bttom dotted none solid dotted none solid none
4 top, right, bottom, left double dotted solid none double dotted solid none

Their list:

The border-style property may be specified using one, two, three, or four values.

  • When¬†one¬†value is specified, it applies the same style to¬†all four sides.
  • When¬†two¬†values are specified, the first style applies to the¬†top and bottom, the second to the¬†left and right.
  • When¬†three¬†values are specified, the first style applies to the¬†top, the second to the¬†left and right, the third to the¬†bottom.
  • When¬†four¬†values are specified, the styles apply to the¬†top,¬†right,¬†bottom, and¬†left¬†in that order (clockwise).

Each value is a keyword chosen from the list below.

then it continues with a table showing the outcome of the various line style values you can put in:

<line-style>
Describes the style of the border. It can have the following values:

none
Like the hidden keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
hidden
Like the¬†none¬†keyword, displays no border. Unless a¬†background-image¬†is set, the calculated value of¬†border-top-width¬†will be¬†0, even if the specified value is something else. In the case of table cell and border collapsing, the¬†hidden¬†value has the¬†highestpriority: if any other conflicting border is set, it won’t be displayed.
dotted
Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated border-top-width.
dashed
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
solid
Displays a single, straight, solid line.
double
Displays two straight lines that add up to the pixel size defined by border-width or border-top-width.
groove
Displays a border with a carved appearance. It is the opposite of ridge.
ridge
Displays a border with an extruded appearance. It is the opposite of groove.
inset
Displays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove.
outset
Displays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.

–jeroen

Posted in CSS, Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

Peeking under the hood of redesigned Gmail ‚Äď Boris ‚Äď Medium

Posted by jpluimers on 2020/06/25

From a while back, but still relevant as the speed of the GMail web-UI still has not improved.

[WayBack/Archive.is] Peeking under the hood of redesigned Gmail ‚Äď Boris ‚Äď Medium

Via:

–jeroen

Read the rest of this entry »

Posted in CSS, Development, GMail, Google, HTML, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Development | Leave a Comment »

108 byte CSS Layout Debugger ¬∑ GitHub

Posted by jpluimers on 2020/05/13

A cool [WayBack] 108 byte CSS Layout Debugger · GitHub (and sligtly different versions) that makes your page look like this:

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

 

–jeroen

Posted in CSS, Development, JavaScript/ECMAScript, Scripting, Software Development, Web Development | Leave a Comment »

CSS Animation How To Tutorial – Dev Tuts

Posted by jpluimers on 2020/01/22

So as the author of CSS3 Animate It I have a good background in CSS animation. Before CSS3 was released you would have to resort to using JS for animation…

Even after CSS3 got introduced, I’m still not sure I’d use animation: [WayBack] CSS Animation How To Tutorial – Dev Tuts

Via:

–jeroen

Posted in CSS, Development, Software Development, Web Development | Leave a Comment »

CSS flex-box layout – Wikipedia

Posted by jpluimers on 2019/09/02

Being a back-end and library person by heart, I am always late in the web-UI game, so this is on my list of things to try: CSS flex-box layout – Wikipedia.

I saw it being used by [WayBack] markdownlint demo: Demo for markdownlint, a Node.js style checker and lint tool for Markdown/CommonMark files.

Some links that should me help further:

–jeroen

Read the rest of this entry »

Posted in CSS, Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

 
%d bloggers like this: