Uso de las propiedades Float y Clear
- “float”: La propiedad “float” se utiliza para especificar si un elemento debe moverse hacia la izquierda o hacia la derecha de otros elementos en una página web.
- “clear”: La propiedad “clear” se utiliza para controlar cómo los elementos deben comportarse en relación con los elementos que flotan. Puedes indicar si un elemento debe colocarse debajo de los elementos que flotan a la izquierda, a la derecha o a ambos lados.
div {
background-color: lavender;
margin: 5px;
padding: 3px 15px;
width: 300px;
}
img {
width: 50px;
border-radius: 50%;
margin: 5px;
}
.credit {
background-color: lime;
}
.creditImage {
float: left;
}
.creditText {
clear: left;
}
.debit {
text-align: right;
background-color: lightsalmon;
}
.debitImage {
float: right;
}
.debitText {
clear: right;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Recent Transfers</h1>
<div class="credit">
<img decoding="async" class="creditImage" src="https://mimo.app/i/elijah.png">
<h5>Received $50</h5>
<p class="creditText">For Phone Bill</p>
</div>
<div class="debit">
<img decoding="async" class="debitImage" src="https://mimo.app/i/portrait-cv.png">
<h5>Sent $1500</h5>
<p class="debitText">For Macbook</p>
</div>
</body>
</html>
Uso de la propiedad Position
La propiedad “position” se utiliza para controlar la posición de un elemento dentro de un documento HTML. Esta propiedad tiene varios valores posibles:
“static”: Es el valor predeterminado y significa que el elemento se posiciona según el flujo normal del documento. No se ve afectado por las propiedades “top”, “bottom”, “left” o “right”.
“relative”: Permite ajustar la posición de un elemento con respecto a su posición normal. Puedes utilizar las propiedades “top”, “bottom”, “left” y “right” para desplazar el elemento desde su posición original.
“absolute”: Hace que el elemento se posicione con respecto a su primer elemento padre posicionado o al elemento raíz del documento si no hay ningún elemento padre posicionado. Puedes utilizar las propiedades “top”, “bottom”, “left” y “right” para controlar su posición.
“fixed”: Fija la posición del elemento con respecto a la ventana del navegador, lo que significa que permanecerá en la misma posición incluso si la página se desplaza. También se puede utilizar “top”, “bottom”, “left” y “right” para ajustar su posición.
“sticky”: Permite que un elemento se comporte como “relative” hasta que alcance una posición específica en la ventana del navegador, donde se comportará como “fixed”. Puedes utilizar las propiedades “top”, “bottom”, “left” y “right” para definir el punto en el que se vuelve fijo.
Estos son los valores más comunes para la propiedad “position” en CSS. Dependiendo de tus necesidades, puedes elegir el valor que mejor se adapte al diseño que estás creando.
body {
font-family: "Courier New";
}
em {
position: relative;
bottom: 5px;
font-size: 10px;
}
span {
position: relative;
top: 20px;
right: 10px;
border-top: 2px solid gray;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>x<em>2</em> + y<em>2</em> = 25</p>
<p>1<span>2</span>+ 1<span>3</span>= 5<span>6</span></p>
</body>
</html>
Uso de la propiedad z-index
La propiedad “z-index” en CSS se utiliza para controlar el apilamiento de elementos posicionados en un eje tridimensional, es decir, su profundidad visual. Esta propiedad afecta a elementos que tienen una posición distinta a “static” (por ejemplo, “relative”, “absolute” o “fixed”).
El valor de “z-index” determina la prioridad de visualización de un elemento en relación con otros elementos. Un valor más alto de “z-index” coloca el elemento por encima de otros con valores más bajos.
Aquí hay algunos puntos clave sobre “z-index”:
El valor predeterminado de “z-index” es “auto”, lo que significa que el apilamiento se determina por el orden de los elementos en el árbol del documento y en el flujo normal del mismo.
Los valores de “z-index” pueden ser números enteros positivos o negativos, donde los números más altos tienen mayor prioridad. Por ejemplo, un elemento con “z-index: 2” se superpondrá a uno con “z-index: 1”.
Si dos elementos tienen el mismo valor de “z-index”, su orden de apilamiento se determina por su posición en el árbol del documento y en el flujo normal. El elemento que aparece después en el código HTML estará más cerca del observador.
La propiedad “z-index” solo tiene efecto en elementos que tienen una posición distinta de “static”. Si no se especifica una posición, como “relative” o “absolute”, “z-index” no tendrá ningún efecto.
Es importante tener en cuenta que “z-index” solo afecta a los elementos que están en el mismo contexto de apilamiento. Es decir, no puede hacer que un elemento en un contexto de apilamiento anidado se superponga a un elemento en un contexto de apilamiento superior.
Al utilizar adecuadamente la propiedad “z-index”, puedes controlar la superposición de elementos en tu diseño y crear capas visuales con diferentes niveles de profundidad.
body {
height: 250px;
}
div {
position: absolute;
border-radius: 50%;
}
.large {
background-color: black;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
z-index: 1;
}
.medium {
background-color: white;
width: 120px;
height: 120px;
z-index: 2;
top: 50px;
left: 50px;
}
.small {
background-color: crimson;
width: 50px;
height: 50px;
z-index: 3;
top: 85px;
left: 85px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="small"></div>
<div class="medium"></div>
<div class="large"></div>
</body>
</html>
Uso de la propiedad Display
La propiedad “display” en CSS se utiliza para controlar cómo se muestra un elemento en la página. Define el tipo de caja que se utiliza para representar un elemento y cómo interactúa con otros elementos en el flujo del documento. Aquí tienes algunos valores comunes para la propiedad “display”:
“block”: Hace que el elemento se comporte como un bloque y ocupe todo el ancho disponible. Los elementos “block” comienzan en una nueva línea y se apilan verticalmente. Puedes establecer dimensiones (alto y ancho) en elementos “block” y agregar márgenes, rellenos y bordes.
“inline”: Hace que el elemento se comporte como una caja en línea y solo ocupe el espacio necesario dentro del flujo del texto. Los elementos “inline” no comienzan en una nueva línea y no admiten dimensiones (alto y ancho). Sin embargo, puedes establecer márgenes horizontales y verticales, relleno y bordes.
“inline-block”: Combina las características de los elementos “block” e “inline”. Permite que el elemento ocupe solo el espacio necesario dentro del flujo del texto, pero también admite dimensiones, márgenes, relleno y bordes.
“none”: Oculta el elemento por completo, sin ocupar ningún espacio en el flujo del documento. Es como si el elemento no existiera. Puedes usar esto para controlar visualmente la visibilidad de elementos mediante JavaScript o CSS.
“flex”: Establece un contexto de diseño flexible utilizando el modelo de caja flexible (Flexbox). Permite un diseño flexible y adaptable, donde los elementos pueden cambiar su tamaño y orden automáticamente.
“grid”: Establece un contexto de diseño basado en una cuadrícula utilizando el modelo de cuadrícula (CSS Grid). Permite crear diseños complejos y controlar la posición y el tamaño de los elementos en una cuadrícula bidimensional.
Estos son solo algunos de los valores más comunes para la propiedad “display”. La elección del valor adecuado depende del diseño y la estructura que desees lograr. Cada valor tiene sus propias características y comportamiento en el flujo del documento.
body {
font-family: Verdana;
}
#logo {
width: 40%;
margin-top: 10px;
}
ul,
li {
display: inline;
float: right;
margin: 10px;
}
a {
color: black;
}
.navbar {
border-bottom: solid 1px thick black;
padding: 10px;
}
.rating {
color: gold;
font-size: 200%;
}
.def {
color: black;
font-size: 50%;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
#location {
width: 100%;
}
.landscapeImage {
position: relative;
}
#arrow {
position: absolute;
font-size: 30px;
color: white;
top: 10px;
right: 30px;
z-index: 1;
}
.about,
.comments {
padding: 10px;
margin-top: 10px;
border: solid 1px black;
}
.userDP {
width: 10%;
float: left;
}
.name {
display: inline;
}
.userRating {
color: gold;
}
.userComment {
color: black;
margin-top: 5px;
display: block;
}
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
<img decoding="async" id="logo" src="https://mimo.app/i/touradvisor.png">
<ul>
<li><a href="#reviews">Reviews</a></li>
<li><a href="#trips">Trips</a></li>
</ul>
</div>
<div>
<h1>Kluane National Park and Reserve</h1>
<p class="rating">●●●●●<span class="def">(Based
on 200+ ratings)</span></p>
</div>
<div class="landscapeImage">
<p id="arrow">→</p>
<img decoding="async" id="location" src="https://mimo.app/i/kluane.png">
</div>
<div class="about">
<h2>About</h2>
<p>This huge park is well-known for its fantastic scenic landscape and its
excellent opportunities for recreational activities.</p>
</div>
<div class="comments">
<h2>Comments</h2>
<div>
<img decoding="async" class="userDP" src="https://mimo.app/i/tom.png">
<p class="name">Jack Hill</p>
<p class="userRating">★★★★★ <span class="userComment">Awesome place!</span>
</p>
</div>
<div>
<img decoding="async" class="userDP" src="https://mimo.app/i/alexander.png">
<p class="name">Rebel Jones</p>
<p class="userRating">★★★★★ <span class="userComment">Great place for a
vacation!</span>
</p>
</div>
</div>
</body>
</html>
Uso de las propiedades Cursor, Opacity y Letter-spacing
Las propiedades “cursor”, “opacity” y “letter-spacing” en CSS:
“cursor”: Se utiliza para cambiar la apariencia del cursor del mouse cuando se coloca sobre un elemento interactivo. Puedes especificar diferentes valores para indicar diferentes tipos de cursores, como “pointer” (mano señalando), “default” (flecha predeterminada), “crosshair” (cruz), “text” (cursor de texto) y muchos otros. Esto permite proporcionar retroalimentación visual a los usuarios sobre la interactividad de un elemento.
“opacity”: Se utiliza para ajustar la opacidad de un elemento, es decir, su nivel de transparencia. Puedes establecer un valor entre 0 y 1, donde 0 representa la completa transparencia (elemento no visible) y 1 representa la opacidad completa (elemento completamente visible). Al ajustar la opacidad de un elemento, también se aplica a su contenido. Esto puede ser útil para crear efectos de superposición, transiciones suaves o para mostrar elementos de forma gradual.
“letter-spacing”: Se utiliza para ajustar el espaciado entre los caracteres de un texto. Puedes establecer un valor positivo para aumentar el espaciado entre los caracteres o un valor negativo para reducirlo. Esto puede ser útil para ajustar la legibilidad o para lograr efectos de diseño específicos. Ten en cuenta que “letter-spacing” afecta a todos los caracteres dentro del elemento, incluyendo espacios en blanco y caracteres especiales.
Recuerda que puedes aplicar estas propiedades a elementos HTML específicos utilizando selectores CSS o a través de clases y IDs. Cada una de estas propiedades tiene su propio propósito y puede utilizarse para controlar aspectos visuales y de interacción en tu diseño web.
body {
background-color: #FFF9F5;
color: #36454F;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 600px;
margin: auto;
}
img {
width: 200px;
border: 2px solid black;
position: relative;
}
.groupOne,
.groupTwo {
width: 80%;
text-align: justify;
}
.groupTwo {
float: right;
}
#imageTwo {
top: 30px;
right: 175px;
}
#imageThree {
top: 30px;
float: right;
}
#imageFour {
left: 250px;
}
#pTwo {
clear: right;
float: right;
}
.buttonTwo {
clear: right;
float: right;
}
.footerLinks {
display: block;
}
nav {
margin: 12px;
}
a {
margin: 20px;
color: #36454F;
text-decoration: none;
}
.firstLink {
margin-left: 0;
}
h1 {
text-align: center;
font-size: 60px;
letter-spacing: 1px;
}
img:hover {
cursor: pointer;
}
.showing {
opacity: 100%;
z-index: 2;
}
.obscured {
opacity: 50%;
z-index: 1;
}
p {
margin-top: 35px;
width: 90%;
}
button {
height: 30px;
width: 100px;
display: inline-block;
}
button:hover {
cursor: pointer;
}
footer {
padding-top: 50px;
text-align: center;
clear: right;
}
<!doctype html>
<html>
<head>
<title>Charitable NFTs</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav>
<a class="firstLink" href="">Home</a>
<a href="">About</a>
<a href="#">Buy</a>
</nav>
<header>
<h1>Select Your NFT</h1>
</header>
<main>
<div class="groupOne">
<img decoding="async" id="imageOne" class="showing"
src="https://mimo.app/i/hydroplane.png">
<img decoding="async" id="imageTwo" class="obscured"
src="https://mimo.app/i/aircraft.png">
<p><strong>Click the hidden image to display. </strong>Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Cras quam sapien,
tempus non est a, scelerisque egestas ipsum. Cras ac tempus orci,
eget egestas enim. Aliquam non turpis ante. Proin sed posuere
lectus, ac convallis ex.</p>
<button>BUY</button>
</div>
<div class="groupTwo">
<img decoding="async" id="imageThree" class="obscured"
src="https://mimo.app/i/stationary-bikes.png">
<img decoding="async" id="imageFour" class="showing"
src="https://mimo.app/i/power-rack.png">
<p id="pTwo"><strong>Click the hidden image to display. </strong>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Cras quam sapien,
tempus non est a, scelerisque egestas ipsum. Cras ac tempus orci,
eget egestas enim. Aliquam non turpis ante. Proin sed posuere
lectus, ac convallis ex.</p>
<button class="buttonTwo">BUY</button>
</div>
</main>
<footer>
<nav>
<a class="footerLinks" href="">Home</a>
<a class="footerLinks" href="">About</a>
<a class="footerLinks" href="#">Buy</a>
</nav>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
const one = document.getElementById("imageOne");
const two = document.getElementById("imageTwo");
const three = document.getElementById("imageThree");
const four = document.getElementById("imageFour");
one.onclick = function() {
one.classList.remove("obscured");
one.classList.add("showing");
two.classList.remove("showing");
two.classList.add("obscured");
};
two.onclick = function() {
two.classList.remove("obscured");
two.classList.add("showing");
one.classList.remove("showing");
one.classList.add("obscured");
};
three.onclick = function() {
three.classList.remove("obscured");
three.classList.add("showing");
four.classList.remove("showing");
four.classList.add("obscured");
};
four.onclick = function() {
four.classList.remove("obscured");
four.classList.add("showing");
three.classList.remove("showing");
three.classList.add("obscured");
};
Un ejemplo extra:
img {
border-radius: 8px 8px 8px 8px;
position: relative;
right: 120px;
top: 30px;
}
#more {
position: absolute;
top: 8px;
right: 10px;
background-color: indianred;
color: white;
border-radius: 10px;
padding: 10px;
border: none;
}
h2 {
margin-top: 50px;
text-align: center;
}
#text {
text-align: justify;
padding-left: 10%;
padding-right: 10%;
}
body {
font-family: Cambria;
}
#banner {
height: 250px;
}
h2 {
font-size: 30px;
width: 300px;
}
#text {
font-size: 20px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./index.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="main">
<div id="banner">
<img decoding="async" src="https://mimo.app/i/holiday.png" />
<button id="more">Know more</button>
<h2>The Caribbean</h2>
</div>
<div id="text">
<p class="blurb">The Caribbean is a region of the Americas that consists
of the Caribbean Sea, its islands and the surrounding coasts. The
region is southeast of the Gulf of Mexico and the North American
mainland, east of Central America, and north of South America.</p>
<p class="blurb">The climate of the area is tropical, varying from
tropical rainforest in some areas to tropical monsoon and tropical
savanna in others. There are also some locations that are arid
climates with considerable drought in some years, and the peaks of
mountains tend to have cooler temperate climates.</p>
</div>
</div>
</body>
</html>
