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
Last revisionBoth sides next revision
devwiki:css [2021/09/15 07:57] – [CSS language structure] yingdevwiki:css [2023/06/22 08:23] – [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://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 243:
  
 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.txt
  • Last modified: 2023/06/22 08:23
  • by ying