¡Hola, amigos de YCLAS! Esta semana te compartimos algunos consejos y buenas ideas para que tu web luzca mejor usando código CSS.
Debes saber que la apariencia de tu web determinará si los usuarios y clientes se quedan o se marchan en busca de una web con mejor aspecto.
Primero tienes que activar el uso de CSS en el panel de tu web; haz clic aquí para ver cómo activar y añadir CSS personalizado en YCLAS.
¡Empecemos!
Fondo
Hoy en día, las mejores webs usan fondos degradados: un cambio de color sencillo y suave que, si eliges bien los colores, le dará a tu web un estilo moderno. Aquí tienes 3 fondos modernos diferentes:
Degradado n.º 1 (colores del Pacífico)
#grad
{background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
Degradado n.º 2 (colores intensos)
#grad
{background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
Degradado n.º 3 (colores suaves)
#grad
{background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
Fuentes
La fuente de tu web desempeña un papel fundamental. Te recomendamos usar fuentes Sans-Serif, como:
Arial
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
Tahoma
p.sansserif {
font-family: Tahoma, Geneva, sans-serif;
}
Trebuchet MS
p.sansserif {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
Son fuentes cómodas para la vista.
Bordes de los elementos
Otro consejo es usar bordes redondeados en los elementos: así tu web tendrá un aspecto sencillo y moderno. Para conseguirlo, usa este código:
p.round {
border: 2px solid black;
border-radius: 8px;
}
Puedes ajustar el color (solid black) y el radio (8px) del borde.
Barra de navegación
La barra de navegación es uno de los elementos más importantes de una web. Una barra de navegación bien hecha ayudará a los usuarios a moverse correctamente por tu web. Aquí tienes una barra de navegación fija con enlace activo/actual; hará que tu barra de navegación se mueva y se quede fija arriba según la posición del scroll:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4682B4;
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4169E1;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#search">Search</a></li>
<li><a href="#YCLAS">YCLAS</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
Puedes cambiar los colores (fondo, texto y enlace activo/actual), y el tamaño (padding) de la barra de navegación.
Imágenes responsive
¡Imágenes! Hoy en día las imágenes son imprescindibles en cualquier web y estamos acostumbrados a verlas por todas partes; pero no basta con poner una imagen en tu web: tienes que hacerla responsive para que se vea mejor en cualquier dispositivo. Para conseguirlo, usa este código en todas las imágenes que quieras que sean responsive:
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="X" width="IMG width" height="IMG height">
La X representa la URL de la imagen; en IMG Width e IMG Height tienes que escribir el tamaño original de la imagen.
Estructura de la web
Se trata de la distribución de los elementos principales de tu web, por ejemplo la cabecera. La cabecera es lo primero que ve cualquier usuario al entrar en la web, así que tiene que ser sencilla y fácil de entender. Aquí tienes un código CSS para una cabecera con imagen y texto:
body {
margin: 0;
}
.header {
background:url(X) no-repeat;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>HEADER TEXT</h1>
</div>
La X representa la URL de la imagen; en padding puedes definir el tamaño de la cabecera con imagen, y en Header Text puedes escribir lo que quieras mostrar sobre la imagen de cabecera.
Otro elemento principal de tu web es el pie de página, situado en la parte inferior y tan importante como la cabecera. Puedes usar este código para conseguir un pie de página atractivo:
.footer {
background-color: #00FFFF;
padding: 25px;
text-align: center;
}
Puedes cambiar el color y el tamaño (padding) del pie de página.
¡Prueba estos consejos y cuéntanos si te funcionan!
Nota: usar código CSS requiere ciertos conocimientos y experiencia. Si nunca has usado CSS, te recomendamos apoyarte en algunos tutoriales de CSS y guías de CSS para conseguir lo que buscas. Si no quieres usar CSS, puedes usar nuestros temas: te ofrecemos una gran variedad de plantillas web personalizadas. Haz clic aquí para verlas.
Un saludo,
el equipo de YCLAS.
