Mostrando entradas con la etiqueta CSS3. Mostrar todas las entradas
Mostrando entradas con la etiqueta CSS3. Mostrar todas las entradas

sábado, 6 de junio de 2020

Framework Bootstrap 4

Desarrollado por la empresa Twitter como un proyecto interno para evitar el uso de múltiples fuentes de desarrollo, en determinado momento, año 2011, fue liberado y puesto a disposición de la comunidad conviertiendose rápidamente, año 2012, en uno de los marcos de trabajo (Framework) más empleados desde GitHub. Cuenta con 4 versiones siendo la 3ra considerada por muchos la más estable, pero es cada vez mayor el uso que se le da a la 4ta versión.


Versión 3 vs versión 4

  • Bootstrap 4 es la versión más nueva de Bootstrap; con nuevos componentes, hoja de estilo más rápida y más capacidad de respuesta.
  • Bootstrap 4 admite las últimas versiones estables de todos los principales navegadores y plataformas. Sin embargo, Internet Explorer 9 y versiones anteriores no son compatibles.
  • Si es necesario soporte para Internet Explorer 8 o 9, se debe emplear Bootstrap 3. Es la versión más estable de Bootstrap, y aún es compatible con el equipo para correcciones de errores críticos y cambios de documentación. Sin embargo, no se le agregan nuevas funciones.

Formas de agregar Bootstrap a un proyecto

Tenemos 2, la primera es hacer la llamada remota al Framework (entre los proveedores tenemos a MaxCDN) y la segunda es descargarlo y tenerlo como una biblioteca interna.

Mediante MaxCDN

Tendríamos el siguiente código:

<!DOCTYPE html>
<html>
    <head>
        <title>Título de la página</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> 
    </head>
    <body>
        <!--Cuerpo de la página-->
    </body>
</html>


Mediante descarga

Se procede a la página oficial de Bootstrap y en la sección de descargas se sigue las instrucciones: https://getbootstrap.com/docs/4.1/getting-started/download/


Grid Classes

Tiene 5 clases que se pueden emplear para el diseño ppor columnas:
  • .col- (extra small devices - pantalla menor que 576px)
  • .col-sm- (small devices - pantalla mayor o igual que 576px)
  • .col-md- (medium devices - pantalla mayor o igual que 768px)
  • .col-lg- (large devices - pantalla mayor o igual que 992px)
  • .col-xl- (xlarge devices - pantalla mayor o igual que 1200px)

Estas se pueden combinar para obtener diferentes disposiciones y estructuras más flexibles. Además, se puede emplear la clase .col que se autodimensiona como en el siguiente ejemplo.


<!DOCTYPE html>
<html>
    <head>
        <title>Título de la página</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> 
    </head>
    <body>
        <div class="container-fluid">
            <h1>La clase columna</h1>
            <p>Nota: Se autodimensionan automáticamente en una fila de manera que tienen el mismo tamaño</p>
            <div class="row">
                <div class="col" style="background-color:lavender;">.col</div>
                <div class="col" style="background-color:orange;">.col</div>
                <div class="col" style="background-color:lavender;">.col</div>
                <div class="col" style="background-color:orange;">.col</div>
                <div class="col" style="background-color:lavender;">.col</div>
                <div class="col" style="background-color:orange;">.col</div>
            </div>
        </div>
    </body>
</html>
Publicado por en No hay comentarios:
Etiquetas: , , , , ,

jueves, 26 de marzo de 2020

Agrupación de selectores CSS

Mediante CSS se permite aplicar una serie de propiedades a varios elementos que pueden cumplir diferentes condiciones, la más usual es la de ser un elemento "hijo" de otro, tenemos:

  • Combinación simple de selectores
  • Selector descendente
  • Selector de etiqueta de clase
  • Selector de hijos
  • Selectores adyacentes
  • Pseudoclases

Aplicación y ejemplo


Combinación simple de selectores

En este caso se aplica las mismas propiedades a diversos elementos, pueden ser cualquier tipo de selector. Se separan con comas ',' y luego se definen las propiedades y sus valores.

 
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
        p,a,span{
	   color: #139349;
	   font-family: 'Tahoma'
	}		 
      </style>
   </head>
   <body>        
      <!-- Elementos HTML -->
      <a>Soy una oración</a><br/><br/>
      <span>Palabra</span>
      <p>Soy un parrafo</p>
   </body>
</html>
Soy una oración

Palabra

Soy un parrafo



Combinación de selectores descendente

En este caso se aplica las propiedades al último elemento si cumple con la condición de estar anidado dentro del selector anterior. En el ejemplo, se tiene una etiqueta <div> que contiene una etiqueta <p> y dentro una <span>. Además, dos etiquetas <span>. El código CSS indica que solo se aplique la propiedad si hay un <span> dentro de un <div>.

Los elementos descendentes solo se separan mediante espacios.

 
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
        div span{
	   color: #F00041;			
	}		 
      </style>
   </head>
   <body>        
      <!-- Elementos HTML -->
      <div> 
	<p>Soy una <span>palabra</span> especial</p>
      </div>      
      <span>Amigo</span><br/><br/>
      <span>Enemigo</span>
   </body>
</html>
Soy una palabra especial

Amigo

Enemigo


Combinación de etiqueta con clase

En este caso se aplica las mismas propiedades las etiquetas o elementos HTML que tienen como clase la especificada en el código CSS. En el ejemplo el color solo cambiará si la etiqueta es de tipo <p> y además el nombre de la clase es 'texto'

 
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
        p.texto{
	   color:#F000F0;
	}		 
      </style>
   </head>
   <body>        
      <!-- Elementos HTML -->
      <span class='texto'>Span con clase</span>
      <p>Párrafo sin clase</p>
      <p class='texto'>Párrafo con clase</p>
   </body>
</html>
Span con clase

Párrafo sin clase

Párrafo con clase

Combinación de selectores hijos

En este caso se aplica las propiedades al último elemento si cumple con la jerarquía establecida, para el ejemplo, se aplicará solo si <span> está contenido en <p>, que a la vez debe estar contenido en <div>. Solo en ese caso cambia de color el contenido de <span>

 
<!DOCTYPE html>
<html>
   <head>
     <title>Prueba</title>
     <!-- Código CSS -->
     <style>
	div > p > span{
	   color:#0007D8;
	}		 
     </style>
   </head>
   <body>        
     <!-- Elementos HTML -->
     <div>
	<p>Div <span>que contiene</span> un párrafo y un span</p>
     </div>
     <p>Párrafo que <span>contiene</span> un span</p>
   </body>
</html>

Div que contiene un párrafo y un span

Párrafo que contiene un span

Combinación de selectores adyacentes

En este caso se aplica las mismas propiedades al segundo elemento luego del signo + siempre y cuando este se encuentre luego del elemento señalado previamente. Para el ejemplo, se aplica el efecto de color y negrita al elemento <span> solo si está después de un elemento <label>

 
<!DOCTYPE html>
<html>
   <head>
	<title>Prueba</title>
	<!-- Código CSS -->
	<style>
		label + span{
		   color: #FC943E;
		   font-weight: bold;
		}		 
	</style>
   </head>
   <body>        
	<!-- Elementos HTML -->
	<label>Nombres: </label>
	<span>Argos</span>
	<br/>
	<span>Nombres: </span>
	<label>Garfield</label>
   </body>
</html>
Nombres: Argos

Nombres: Garfield

Combinación de etiquetas con atributos especiales

En este caso se aplica las propiedades al elemento al cambiar su estado según lo especificado. En este ejemplo se emplea 'hover' que significa que cuando pasemos el cursor encima del elemento, este debe cambiar de color.

 
<!DOCTYPE html>
<html>
   <head>
	<title>Prueba</title>
	<!-- Código CSS -->
	<style>
	  span:hover{
		color: red;
	  }	 
	</style>
   </head>
   <body>        
	<!-- Elementos HTML -->
	<span>Argos</span>
   </body>
</html>
Argos (Si no pasa el cursor)

Argos (Si pasa el cursor)



Publicado por en No hay comentarios:
Etiquetas: , ,

Selectores en CSS

Los selectores básicos en CSS son:
  • De tipo
  • De clase
  • De ID
  • Universales
  • De atributo

Nota: Una clase se asigna en HTML mediante la propiedad "class"; un ID con "id", el atributo depende de las propiedades del elemento. 

/*De tipo (un elemento HTML)*/
div {propiedad: valor;}

/*De clase (asignado a un elemento HTML con el atributo class)*/
.fondo {propiedad: valor;}

/*De ID (asignado a un elemento HTML con el atributo id)*/
#cuadro {propiedad: valor;}

/*Universales (se aplican a todas las etiquetas, * significa todos)*/
* {propiedad: valor;}

/*De atributo (se aplica si se cumple con determinado valor en un atributo)*/
input [type=submit] {propiedad: valor;}


Ejemplos

Selector de tipo
 
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         p{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <p>Buenas tardes mundo</p>
      <p class='unaClase'>Buenas noches mundo</p>
      <p id='unId'>Adiós mundo</p>
   </body>
</html>
Resultado: Todas las etiquetas <p> se ven afectado por el código CSS

Buenas tardes mundo
Buenas noches mundo
Adiós mundo
Selector de clase
 
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         p.texto{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <p>Buenas tardes mundo</p>
      <p class='texto'>Buenas noches mundo</p>
      <span class='texto'>Adiós mundo</span>
   </body>
</html>
Resultado: Solo las etiquetas <p> que tienen como clase 'texte' se ven afectado por el código CSS, si hubiéramos puesto ".text" en lugar de "p.texto" se modificaría el estilo de la etiqueta <span>

Buenas tardes mundo
Buenas noches mundo
Adiós mundo
Selector de id
 
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         #elegido{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <p>Buenas tardes mundo</p>
      <p class='elegido'>Buenas noches mundo</p>
      <p id='elegido'>Adiós mundo</p>
   </body>
</html>
Resultado: Solo las etiquetas <p> que tienen como id 'elegido' se ven afectado por el código CSS

Buenas tardes mundo
Buenas noches mundo
Adiós mundo
Selector universal
 
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         *{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <p>Buenas tardes mundo</p>
      <div>Buenas noches mundo</div>
      <h1>Adiós mundo</h1>
   </body>
</html>
Resultado: Todas las etiquetas se ven afectado por el código CSS

Buenas tardes mundo
Buenas noches mundo
Adiós mundo
Selector de atributo
 
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         a[href='#']{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <a>Buenas tardes mundo</a><br/>
      <a href='#'>Buenas noches mundo</a><br/>
      <a href='www.google.com'>Adiós mundo</a>
   </body>
</html>
Resultado: Solo las etiquetas <a> cuyo atributo 'href' tiene valor '#' se ven afectado por el código CSS

Buenas tardes mundo
Buenas noches mundo
Adiós mundo




Publicado por en No hay comentarios:
Etiquetas: , ,

Código CSS - Sintaxis

¿Qué es el código CSS?

El código CSS es un lenguaje de diseño gráfico que permite definir las propiedades, comportamientos y demás atribuciones de diseño de los elementos de un documento escrito en lenguaje de marcado, especialmente HTML, estas propiedades pueden ser almacenadas en archivos .css y de esta forma reutilizar en diferentes documentos HTML. Actualmente se encuentra en la versión 3, llamada CSS3.

Formas de acoplamiento del CSS con HTML

Existen tres formas (niveles), y cada una de ellas tiene más preponderancia que la anterior:


Primera: En un archivo externo llamado hoja de estilo. Este se debe incluir en el documento HTML con la etiqueta <link> en la sección <head> del HTML. Ejemplo: 

<link rel="stylesheet" href="file.css"/>

Donde "file.css" es el archivo externo u hoja de estilos.


Segunda: A nivel de página. Se da cuando se incluye código CSS en el documento HTML con la etiqueta <style> en la sección <head> del HTML. Ejemplo:

<style>/*Código CSS*/</style>

Este código servirá exclusivamente para el archivo HTML donde se escribe, si tuviera una archivo externo que asigna determinada propiedad y esta propiedad se repite dentro de la etiqueta "<style>", el valor asignado en "<style>" será el que se mantenga.


Tercera: A nivel de marca. Se produce cuando el código CSS se declara dentro de un elemento HTML con la propiedad "style". Ejemplo:

<div style="color: green;">Hola</div>


Sintaxis

Se coloca primero el nombre del elemento HTML (etiqueta), nombre de la clase (class) o identificador (id), luego entre llaves irán las propiedades, dos puntos y sus valores de la siguiente manera:


Como se escribe Ejemplo práctico 
[nombre del elemento] {
    propiedad1: valor1;
    propiedad2: valor2;
    /* Comentario de linea*/
    propiedad3: valor3;
    /* 
    *Comentario de bloque
    propiedad4: valor4;
    propiedad5: valor5;
    */
}
 
div{
    width: 100px;
    height: 100px;
    background-color: #FEE;
    margin: 10px;
    border: 1px solid red;
    color: brown;
    font-family: "calibri";
    font-size: 20px;
    text-align: center;
}




Publicado por en No hay comentarios:
Etiquetas: ,

lunes, 23 de marzo de 2020

Diseño responsivo con CSS

La estructura básica de una página web con HTML5 es:

<!DOCTYPE html>
<html>
   <head>
      <title>Título de la página</title>
      <!-- METATAGS, archivos externos, etc. -->
   </head>
   <body>
      Contenido de la página
   </body>
</html>

Para implementar un diseño responsivo debemos agregar un archivo CSS, que llamaremos estructura.css, se ubicará dentro de una carpeta css y su código es:

* {box-sizing: border-box;}
body {
 margin: 0;
 padding: 0;
 width: 100%;
}
.fila {margin: 0 auto;}
.fila::after {
 content: "";
 clear: both;
 display: table;
}
[class*="col-"] {
 width: 100%;
 float: left;
}
html {font-size: 16px;}
.fila {width: 80%;}
[class*="col-"] {padding: 1rem;}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

El archivo para probar si nuestra página funciona sería el archivo index.html:

<!DOCTYPE html>
<html>
   <head>
      <title>Inlearning Code - Responsive</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- Archivo CSS -->
      <link href="css/estructura.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
      <header class="fila">
         <div class="col-10" style="background-color: #b4e3cc;">COL 10</div>
         <div class="col-2" style="background-color: #ff5733;">COL 2</div>
      </header>
      <div class="fila">
         <div class="col-4" style="background-color: #decd3e;">COL 4</div>
         <div class="col-4" style="background-color: #a4e57c;">COL 4</div>
         <div class="col-4" style="background-color: #dfc80c;">COL 4</div>
      </div>
      <footer class="fila">
         <div class="col-12" style="background-color: #ffa200;">COL 12</div>
      </footer>
   </body>
</html>

El resultado sería:
Publicado por en No hay comentarios:
Etiquetas: , , ,

domingo, 14 de abril de 2019

Creando una lista desplegable con imágenes - Dropdown



Para crear una lista desplegable como esta:



Debemos tener crear primera una serie de clases en CSS

.dropdown {
    position: relative;
    display: inline-block;
    font-size: 1.3rem;
}
.dropdown .flag{
    display: inline-block;
    height: 35px;
    padding: 0 0.5rem 0 0;
}
.dropdown .text{
    display: inline-block; height: 35px;
}
.dropdown-content{
    display: none;
    position: absolute;min-width: 200px;
    background-color: #f9f9f9; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1001;
}
.dropdown-content a{
    color: black;
    padding: 1rem 1.2rem;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover{
    background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
    display: block;
}

Y luego la estructura en el HTML

<div class="dropdown">
   <div class="flag"><img src="imagen1.png" alt="" /></div>
   <div class="text">Texto 1</div>
   <div class="dropdown-content">
      <a>
         <div class="flag"><img src="imagen2.png"/></div>
         <div class="text">Texto 2</div>
      </a> 
      <a>
         <div class="flag"><img src="imagen3.png"/></div>
         <div class="text">Texto 3</div>
      </a>  
      <a>
         <div class="flag"><img src="imagen4.png"/></div>
         <div class="text">Texto 4</div>
      </a>                          
   </div>
</div>







Publicado por en No hay comentarios:
Etiquetas: , , ,
Suscribirse a: Entradas (Atom)