-Una de las formas más llamativas de decorar nuestros botones, cajas o cuadros de texto en CSS en incluirle una sombra a los bordes. Estableciendo unos parámetros en nuestra código de estilo podremos poner una sombra en los bordes y variar su color y tamaño. Podemos hacer que estas sombras se encuentren en el interior o exterior con los siguientes códigos CSS: Bordes con Sombras […]
-Con un div flotante conseguiremos que ese elemento aparezca en nuestra pantalla aunque nos desplacemos por una web, de esta forma conseguiremos que un div esté siempre visible. Para hacer que un div sea flotante añadimos los siguientes parámetros a la hoja de estilos CSS.
|
1 2 3 4 5 6 |
#id_del_div{ position: fixed; z-index: 100; /*Crea una capa nueva por encima, si tenemos una con valor 2 estará a una altura o por encima de una con valor 1*/ margin-left:65%; /*Con este margen posicionamos el div donde queramos*/ } |
POST RELACIONADOS
-Cuando creamos los inputs de un formulario pueden quedarnos muy juntos si los ponemos unos al lado de otros. En el caso de querer separarlos verticalmente simplemente tenemos que usar la etiqueta HTML <br/>, pero para separarlos horizontalmente podemos hacerlo desde la hoja de estilo CSS dándole un margen a la izquierda de la siguiente forma:
|
1 2 3 |
input{ margin-left: 50px; } |
POST RELACIONADOS
-Los atributos visibility:hidden y display:none sirven para ocultar o quitar un elemento respectivamente desde CSS. Si lo que queremos es que un elemento permanezca oculto pero que mantenga el espacio que ocupaba usaremos este atributo en nuestro CSS:
|
1 |
visibility:hidden !important; |
En el caso de lo que queramos sea que el elemento desaparezca y también el espacio que ocupa utilizaremos este atributo en nuestro CSS:
|
1 |
display:none !important; |
[…]
-Ejemplo de un estilo CSS para aplicar sobre una lista.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.menu-primary a{ width: 80%; border: 3px solid #27292b !important; background-color: #212024; list-style: none !important; margin: 0 !important; margin-left: 10% !important; padding-top: 2px !important; font-size: 15px; font-weight: bold; text-align: center; } .menu-primary a:hover{ width: 80%; border: 3px solid #27292b !important; background-color: #5b5b5b; list-style: none !important; margin: 0 !important; margin-left: 10% !important; padding-top: 2px !important; font-size: 15px; font-weight: bold; text-align: center; } |
POST RELACIONADOS
-Para eliminar el subrayado de los enlaces al pulsar sobre ellos,visitados o activos podemos añadir el siguiente código a nuestro CSS.
|
1 2 3 |
a:link, a:visited, a:hover{ text-decoration:none !important; } |
El atributo !important forzará a usar este estilo sobre otro que pudiera estar ya definido. POST RELACIONADOS
Descargamos la fuente de internet y la guardamos.Con este código podemos utilizarla.
|
1 2 3 4 |
@font-face{ font-family: "Fira Sans Regular"; src: url("./firasans.otf"); } |
Ahora ya podemos hacer referencia a ella en por ejemplo un parrágrafo.
|
1 2 3 |
p { font-family: Fira Sans Regular; } |
POST RELACIONADOS