Gradient border

13. September 2019

border: 10px solid;
  border-image-source: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66));
  border-image-slice: 1;
Stylus – nice to know

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”

To start watch Stylus:
stylus –watch ./stylus/ –out ./css
Remember that Whitespace is significant when writing Stylus.
Some examples in Stylus:
// 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;
}

 

Styling a checkbox

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;
 }
}

 

CSS nice to know

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 }