Ejemplo de #clases y #objetos con #javascript
Ejemplos codigo html, css y javascript. Formato web y etiquetas HTML5.
Mostrando entradas con la etiqueta atributos. Mostrar todas las entradas
Mostrando entradas con la etiqueta atributos. Mostrar todas las entradas
jueves, 26 de noviembre de 2020
lunes, 26 de septiembre de 2016
11 CSS PseudoElementos, transformacion y rotacion
En el video se indican algunas propiedades para rotar, transformar y trasladar elementos dentro de la web, asi como algunos pseudoelementos CSS.
El codigo HTML es:
El codigo CSS es:
Espero os sea util. Gracias.
El codigo HTML es:
<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/pseudoElementos.css">
<title>
PseudoElementos
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<div id="primero">
<a href="#">Enlace 1</a>
<p>Break word y Linear gradient. Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<a href="#">Enlace 2</a>
<p>Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</div>
<div id="segundo">
<p>Normal word y Radial gradient. Parrafo 1 dkfjkasdjflkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 3 dkfjkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</div>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>
El codigo CSS es:
/*www.ticoticotaa.es*/
/*@2016*/
*{
}
p::first-letter{
font-size:42px;
color:blue;
}
#primero{
background-color:gray;
word-wrap:break-word;
background:-moz-linear-gradient(red,black);
}
#segundo{
background-color:pink;
word-wrap:normal;
background:-moz-radial-gradient(green,pink,blue);
border:20px solid rgba(0,0,0,0.3);
-moz-background-clip:padding-box;
}
div{
width:200px;
height:200px;
}
div:hover{
width:400px;
transform:skew(30deg);
transform:rotate(10deg);
transform-origin:25% 75%;
transform:translate(100px 50px);
}
Espero os sea util. Gracias.
domingo, 11 de septiembre de 2016
06. CSS Tablas
En este video se ven algunas propiedades de las tablas, que se cambiaran mediante CSS.
El codigo html es:
El codigo css es:
Espero os sea util, gracias.
El codigo html es:
<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/tablas.css">
<title>
Tablas
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<h2>Primera tabla</h2>
<table class="uno">
<caption>Tabla de colores</caption>
<tr><th>Colores</th><th>Numeros</th> </tr>
<tr>
<td>Verde</td>
<td>Uno</td>
</tr>
<tr>
<td>Rojo</td>
<td>Dos</td>
</tr>
<tr>
<td>Amarillo</td>
<td>Tres</td>
</tr>
</table>
<h2>Segunda tabla</h2>
<table class="dos">
<caption>Tabla de colores 2</caption>
<tr><th>Colores</th><th>Numeros</th> </tr>
<tr>
<td>Rosa</td>
<td>Cuatro</td>
</tr>
<tr>
<td>Azul</td>
<td>Cinco</td>
</tr>
<tr>
<td>Celeste</td>
<td></td>
</tr>
</table>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>
El codigo css es:
/*Comentario de CSS*/En el video se me paso como ocultar celdas vacias mediante la propiedad empty-cells a la que podemos darle como valor hide para que no se muestren, en el codigo css esta incluido.
/*selector universal*/
*{
}
table{
border-collapse:separate;
border-spacing:5px 4px;
}
caption {
caption-side:top;
}
.uno{
border:1px solid gray;
width:50%;
table-layout:auto;
text-align:center;
}
.dos{
border:2px solid blue;
width:75%;
table-layout:fixed;
background-color:gray;
empty-cells:hide;
}
Espero os sea util, gracias.
Suscribirse a:
Entradas (Atom)