CSS Walk Vars, Pseudoelements
html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Pseudoelements</title>
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>
<body>
<div class="container">
<div class="logo">
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="lightblue" />
<circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
<polygon points="120,0 240,225 0,225" fill="navy" />
<text
x="50"
y="100"
font-family="Verdana"
font-size="55"
fill="white"
stroke="black"
stroke-width="2"
>
CSS pseudoelements
</text>
</svg>
</div>
<div class="dialog">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
nulla repellendus eius distinctio. Reprehenderit minus similique fuga
officiis, inventore pariatur labore sunt ex voluptates doloremque quos
itaque quia eius? Quis dignissimos enim nam reprehenderit. Sint
</p>
</div>
<br />
<button class="boton">Enter</button>
</div>
</body>
</html>
css file
The vars are defined in :root with names like --varname: value
:root {
--firstbackcolor: rgb(4, 4, 90);
--secondbackcolor: rgb(31, 31, 173);
--botoncolor: rgb(3, 68, 3);
--botonovercolor: rgb(51, 139, 51);
}
body {
background: var(--firstbackcolor);
}
.container {
background: var(--secondbackcolor);
max-width: 700px;
padding: 20px;
border-radius: 20px;
}
.logo {
width: 100%;
margin: 20px 0;
}
.dialog {
background: var(--firstbackcolor);
color: lightgray;
padding: 10px;
border-radius: 15px;
line-height: 30px;
}
.boton {
display: inline-block;
width: 100%;
background: var(--botoncolor);
padding: 25px;
border: none;
cursor: pointer;
text-transform: uppercase;
border-radius: 5px;
transition: 0.1s ease all;
}
.boton:hover {
background: var(--botonovercolor);
}
browser output
::before
.dialog::before {
content: "Inserted with pseudoelement ::before";
}
::after
.dialog::after {
content: "Inserted with pseudoelement ::after";
}
::selection
.dialog p::selection {
background: crimson;
}
::first-line
.dialog::first-line {
background-color: red;
}
eot
No hay comentarios:
Publicar un comentario