CSS примеры

1

Price is what you pay. Value is what you get.

<h2>1</h2>
<style>
 .box {
  background-color: gold;
  font-size: 5vw;
  padding: 10vw;
  margin: 5vw;
  border: solid;
 }
</style>

<div class="box">Price is what you pay. Value is what you get.</div>

2

Price is what you pay. Value is what you get.

<style>
 .textbox {
  color: black;
  font-size: 5vw;
  padding: 2vw;
  margin: 5vw;
  border-style: solid;
 }
</style>

<div class="textbox">Price is what you pay. Value is what you get.</div>

3

<style>
 input {
  caret-color: orange;
  color: white;
  background: black;
  font-size: 2vw;
  padding: 2vw;
}
</style>

<input autofocus placeholder="Name">

4

This has a linear gradient.

<style>
 .gbox {
  font-size: 3vw;
  padding: 2vw;
  border: solid;
  background: linear-gradient(yellow, red);
 }
</style>

<div class="gbox">This has a linear gradient.</div>

5

ID

Привет

<style>
 #unique {
  background-image: url('/pix/samples/bg2.png');
 }
 h5 {
  width: 20vw;
  margin: 2vw;
  padding: 3vw;
  border: solid;  
 }
</style>

<h5 id="unique">ID</h5>
<h5>Привет</h5>