22. April 2020
If the SVG is being stretched.
Then try use it like a background-image: url(‘image.png’);
(had this problem on a :before selector when using the SVG as a content: url(‘image.png’);
22. April 2020
If the SVG is being stretched.
Then try use it like a background-image: url(‘image.png’);
(had this problem on a :before selector when using the SVG as a content: url(‘image.png’);
25. March 2020
height: 38px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
13. September 2019
border: 10px solid;
border-image-source: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66));
border-image-slice: 1;
9. August 2019
Try set ‘min-height: 1px’ on the container of the element.
12. October 2018
For example:
<div style="background: url('/wp-content/uploads/2018/01/loading.gif') no-repeat center 55px; min-height: 100%;"> <element> </div>
13. September 2018
@mixin screen($px) { @media only screen and (max-width: $px px) { @content; } } .div { @include screen(375) { width: 100%; } }
3. September 2018
@media print { .header{ display: none; } }
21. August 2018
Stylus supports interpolation by using the {}
characters to surround an expression, which then becomes part of the identifier. For example, -webkit-{'border' + '-radius'}
evaluates to -webkit-border-radius
.
You need node.js first, so you can install stylus package. Run: “sudo npm install stylus -g”
// Declaring of variables: tkablue = #5caae6 size = 20px // Stylus syntaxes .header color tkablue padding size background #ffffff font-size size textarea, input border 1px solid #eee
Becomes in CSS:
.header { color: #5caae6; padding: 20px; background: #fff; font-size: 20px; } textarea, input { border: 1px solid #eee; }
24. July 2018
Must have:
display: block; //or display: inline-block;
24. July 2018
HTML:
<div class="outer"> <div class="inner"> <img src="" alt="" /> </div> </div>
CSS:
.outer { width: 400px; overflow: hidden; } .inner { display: inline-block; position: relative; right: -50%; } img { position: relative; left: -50%; }
6. July 2018
For example..
input { margin: 0; appearance: none; background-color: transparent; border: 1px solid #BCB4B0; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 0; display: inline-block; position: relative; &:checked:after { content: '\2714'; font-size: 14px; position: absolute; top: 0px; left: 3px; color: #99a1a7; } }
12. June 2018
Change direction of text and content direction: ltr; // normal direction: rtl; // arabic
white-space: initial; //if you having problems with the text not 'wrapping' to next line
div { user-select: none; //Prevent text selection of a <div> element }
5. June 2018
CSS:
direction: ltr; // normal
direction: rtl; // arabic