css texttransform All In One

css text-transform All In One

uppercase / 字母大小写

/* Keyword values */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: unset;

demo

/*
影响因素，
font-family
font-weight
font-size
width
height
字间距,行高等等属性

*/

https://codepen.io/xgqfrms/pen/ExvJmqp

// $font: 'Poppins', sans-serif;
$font: sans-serif;

// ::selection { background-color: #C3CFE2; }

body {
	 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	
	// background: linear-gradient(to right, #FDFBFB, #EBEDEE 70%);
}

.text {
	text-transform: uppercase;
	// background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
	// background: linear-gradient(135deg, #fe9eff, #99fffc 33%, #eaffa7 66%);
	background: linear-gradient(to right bottom, #fe9eff, #99fffc 50%, #eaffa7 70%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font: {
		size: 20vw;
		family: $font;
		font-weight: 800;
	};
}

refs

https://www.cnblogs.com/xgqfrms/p/13560134.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 ️，侵权必究⚠️！

---