devwiki:css

Differences

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

Link to this comparison view

Next revision		 Previous revision
devwiki:css [2021/08/22 19:51] – created yingdevwiki:css [2023/06/22 08:23] (current) – [flex layout for elements] ying
Line 25: Line 25:
 Learn css property by demo: Learn css property by demo:
   * [[http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=none|display: inline; block; list-item; none;]]   * [[http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=none|display: inline; block; list-item; none;]]
 +  * display: none/inline/block/inline-block example: https://stackoverflow.com/questions/3099030/displayinline-vs-displayblock
 +    * examples of block level elements include: div, h1, p, and hr 
 +    * (takes the entire row(100%)of the screen ,it is always 100%of the screen size)
 +    * examples of inline level elements include: a, span, strong, em, b, and i, canvas
 ====== The Selectors ====== ====== The Selectors ======
   - Class   - Class
Line 128: 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 230: 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.1629661876.txt.gz
  • Last modified: 2021/08/22 19:51
  • by ying