Border Images
Here is some text, in a fancy border.
.page-id-162 .p1 {
border: 10px solid transparent;
padding: 5px;
border-image: url(https://www.w3schools.com/css/border.png) 30 round;
}
Backgrounds
Look at the nice background on this!
.page-id-162 .p2 {
background-image: url(https://images1.pixlis.com/background-image-checkers-chequered-checkered-squares-seamless-tileable-very-light-grey-saltpan-236nwb.png);
background-position: left top;
background-repeat: repeat;
padding: 5px;}
Gradients
Look at the cool gradient behind this.
.page-id-162 .p3 {
background-image: linear-gradient(to right,rgb(230,151,151),rgb(151,230,151),rgb(151,151,230), white);}
Shadows
This text has a sick shadow.
.page-id-162 .p4 {
color: white;
text-shadow: 0 0 1px black, 0 0 2px black, 0 0 4px black;}
Text Effects
Look at this verylongword
It wraps out of this box with a hyphen
.page-id-162 .p5 {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;}
Transitions
This is an on-hover transition.
.page-id-162 .p6 {
border: 1px solid #000000;
transition: border 2s;
transition-timing-function: ease-in-out;}
.page-id-162 .p6:hover {
border: 20px inset rgb(81,81,81);}
Animations
This is an animation.
.page-id-162 .p7 {
background-color: rgb(230,151,151);
animation: p7 8s linear 0s infinite alternate}
@keyframes p7 {
from {transform: rotateY(0deg)}
to {transform: rotateY(180deg)}}
Tool-tips
Look at the tool-tip that appears above this text when you hover over it.
I am the tooltip.
.page-id-162 .p8 {
position: relative;
display: inline-block;}
.page-id-162 .p8 .tooltiptext {
width: 200px;
bottom: 100%;
left: 50%;
margin-left: -100px;
background-image: linear-gradient(black,rgb(81,81,81),black);
color: #fff;
text-align: center;
padding: 10px 0;
border-radius: 8px;
opacity: 0.0;
transition: opacity 1s;
transition-timing-function: ease-in;
position: absolute;
z-index: 1;}
.page-id-162 .p8:hover .tooltiptext {
opacity: 1.0}
Buttons
Check out this sick styled button!
.page-id-162 button {
background-color: red;
width: 80%;
height: 200%;
animation: button 1s linear 0s infinite alternate}
@keyframes button {
from {background-color: red}
to {background-color: yellow}}
Resizing
.page-id-162 .p10 {
border: 1px solid black;
resize: both;
overflow: auto;}