En este artículo, veremos cómo agregar líneas además de texto vertical usando SASS .
Enfoque: El código HTML se utiliza para representar la estructura básica del cuerpo. Aquí, definimos un elemento de división con una clase de envoltorio para contener elementos de división subsiguientes. Se define otro elemento de división con una clase de texto vertical y se gira 90 grados usando la propiedad de transformación en SASS. Para el resto del texto, se definen otros dos elementos de división con las clases item-top y item-bottom respectivamente para representar algún otro texto además del texto vertical y estos elementos de división se envuelven dentro de otro elemento de división con una clase de elementos.
Pasando a SASS, para agregar una línea al lado del texto vertical, usamos la propiedad border-bottom ya que la sección inferior del elemento rotado en realidad se muestra como un borde vertical. Los márgenes y los rellenos de los otros elementos de división se ajustan en consecuencia ya que la operación de transformación saca el texto vertical del flujo normal del documento.
Ejemplo 1: aquí, el texto vertical es una fecha aleatoria (en este caso, 27 de febrero de 2022) y hay una línea al lado definida con la propiedad border-bottom (como se explicó anteriormente).
style.scss
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
.wrapper {
display: flex;
align-items: flex-start;
justify-content: flex-start;
max-width: 600px;
min-width: 600px;
margin: 6rem auto 0 auto;
}
.vertical-text {
display: flex;
transform: rotate(-90deg);
border-bottom: 2px solid black;
padding-left: 5.5rem;
p {
padding-bottom: 0.1rem;
}
}
.items {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-left: -3.8rem;
margin-top: -3rem;
p {
padding-left: 1rem;
}
}
.item-top {
p {
padding-bottom: 1rem;
}
}
.item-bottom {
border-top: 2px solid black;
p {
padding-top: 1rem;
}
}
Salida: La salida CSS generada será como se muestra a continuación.
style.css
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
max-width: 600px;
min-width: 600px;
margin: 6rem auto 0 auto;
}
.vertical-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
border-bottom: 2px solid black;
padding-left: 5.5rem;
}
.vertical-text p {
padding-bottom: 0.1rem;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-left: -3.8rem;
margin-top: -3rem;
}
.items p {
padding-left: 1rem;
}
.item-top p {
padding-bottom: 1rem;
}
.item-bottom {
border-top: 2px solid black;
}
.item-bottom p {
padding-top: 1rem;
}
index.html
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Compiled CSS from SASS file -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
max-width: 600px;
min-width: 600px;
margin: 6rem auto 0 auto;
}
.vertical-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
border-bottom: 2px solid black;
padding-left: 5.5rem;
}
.vertical-text p {
padding-bottom: 0.1rem;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-left: -3.8rem;
margin-top: -3rem;
}
.items p {
padding-left: 1rem;
}
.item-top p {
padding-bottom: 1rem;
}
.item-bottom {
border-top: 2px solid black;
}
.item-bottom p {
padding-top: 1rem;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="wrapper">
<div class="vertical-text">
<p>27 Feb 2022</p>
</div>
<div class="items">
<div class="item item-top">
<p>GeeksforGeeks</p>
</div>
<div class="item item-bottom">
<p>GeeksforGeeks is a computer
science portal for geeks.</p>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo es bastante similar al ejemplo anterior, pero la única diferencia es que solo hay un elemento de división de elementos además del texto girado verticalmente. Además, el texto vertical se gira al revés 90 grados en lugar de 90 grados negativos.
style.scss
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
.wrapper {
display: flex;
align-items: flex-start;
justify-content: flex-start;
max-width: 600px;
min-width: 600px;
margin: 6rem auto 0 auto;
}
.vertical-text {
display: flex;
transform: rotate(90deg);
border-top: 2px solid black;
padding-right: 3rem;
color: green;
font-weight: bold;
}
.items {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-left: -5.8rem;
margin-top: -3rem;
p {
padding-left: 5rem;
}
}
Salida: La salida CSS generada será:
style.css
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
max-width: 600px;
min-width: 600px;
margin: 6rem auto 0 auto;
}
.vertical-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
border-top: 2px solid black;
padding-right: 3rem;
color: green;
font-weight: bold;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-left: -5.8rem;
margin-top: -3rem;
}
.items p {
padding-left: 5rem;
}
index.html
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Compiled CSS from SASS file -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
max-width: 600px;
min-width: 600px;
margin: 6rem auto 0 auto;
}
.vertical-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
border-top: 2px solid black;
padding-right: 3rem;
color: green;
font-weight: bold;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-left: -5.8rem;
margin-top: -3rem;
}
.items p {
padding-left: 5rem;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="wrapper">
<div class="vertical-text">
<p>GeeksforGeeks</p>
</div>
<div class="items">
<div class="item">
<p>
GeeksforGeeks is a Computer Science
portal for geeks. It contains
well written, well thought
and well explained computer
science and programming articles.
</p>
</div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA