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