devwiki:css

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
devwiki:css [2021/09/15 07:57] – [CSS language structure] yingdevwiki:css [2023/06/22 08:23] (current) – [flex layout for elements] ying
Line 132: Line 132:
 } }
 </code> </code>
 +
 +===== flex layout for elements =====
 +
 +  * https://css-tricks.com/almanac/properties/j/justify-content/
 +  * https://www.w3docs.com/learn-css/the-ultimate-guide-to-flexbox.html
 +  * https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row
 +  * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox
 +  * https://stackoverflow.com/questions/33192745/center-align-container-and-left-align-child-elements?noredirect=1&lq=1
 +  * https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items
 +
 ===== Page Layout ===== ===== Page Layout =====
  
Line 234: Line 244:
  
 TD{font-family: Arial; font-size: 8pt;} TD{font-family: Arial; font-size: 8pt;}
 +</code>
 +
 +===== text background color bar strike through =====
 +
 +  * gradient method
 +    * gradient tool: https://cssgradient.io/
 +    * <code>
 +// gradient with half transparent way to half BG
 +<p><span='colorHalfBG'>Text</span></p>
 +span.colorHalfBG{
 +  padding-left: 5px;
 +  padding-right: 5px;
 +  background: linear-gradient(0deg, rgba(241,90,34,1) 0%, rgba(241,90,34,1) 50%, rgba(241,90,34,0) 50%);
 +}
 +</code>
 +  * :before in absolute position to draw a block behind method
 +    * ref: https://codepen.io/OxyDesign/pen/eHAac
 +    * <code>
 +.colorHalfBG:before {
 +  display: block;
 +  content:'';
 +  position:absolute;
 +  width:100%;
 +  bottom:0;
 +  left:0;
 +  background:#f66;
 +  z-index:-1;
 +  height:50%;
 +}
 </code> </code>
 ===== Real CSS tricks ===== ===== Real CSS tricks =====
  • devwiki/css.1631692636.txt.gz
  • Last modified: 2021/09/15 07:57
  • by ying