Accede a propiedades y metodos del navegador web desde JavaScript.
Ejemplos codigo html, css y javascript. Formato web y etiquetas HTML5.
Mostrando entradas con la etiqueta propiedades. Mostrar todas las entradas
Mostrando entradas con la etiqueta propiedades. Mostrar todas las entradas
sábado, 2 de enero de 2021
jueves, 3 de diciembre 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.
sábado, 10 de septiembre de 2016
05. CSS Listas
En este video se ven algunas propiedades que se pueden modificar de las listas HTML con 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/listas.css">
<title>
Listas
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<ol class="listaordenada">
<li>Blanco</li>
<li>Rojo</li>
<li>Verde</li>
</ol>
<ul class="listadesordenada">
<li>Coche</li>
<li>Bicicleta</li>
<li>Patinete</li>
</ul>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>
El codigo CSS es:
/*Comentario de CSS*/
/*selector universal*/
*{
}
.listaordenada{
list-style-type:lower-alpha;
list-style-position:outside;
}
.listadesordenada{
list-style-type:square;
list-style-position:inside;
background-color:BLUE;
}
Espero os sea util, gracias.
domingo, 4 de septiembre de 2016
03. CSS Propiedades Textos
En este video se exponen ejemplos de como dar formato a textos mediante CSS, cambiando color, tamaño y otras propiedades.
El codigo del archivo HTML es:
El codigo del archivo CSS es:
Espero sea util. No olvideis practicar.
El codigo del archivo HTML es:
<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/formatoFuentes.css">
<title>
Formato Fuentes
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p class="nowrap">Parrafo nowrap primero jdlkf<br>jalkdjslakjflkajdkljflkasdjflkjadlkjflkasj<br>dflkjasdlkjflkajdlkfjldsakjfljlfjladsjlkfjladjlfjl</p>
<p class="inherit">Parrafo segundo inherit jhdlkajdkjfsaaa<br>aaaaaaalkdfjdlajflajdlsjfldjslkfjlasdkjflkjsdljflsdjlfjlsdajfljsdlkfjlksdajflkjsdlj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>
El codigo del archivo CSS es:
/*Comentario de CSS*/
/*selector universal*/
*{
background-color:gray;
}
p{
font-family:Helvetica,sans-serif;
font-size:medium;
font-style:italic;
text-transform:lowercase;
letter-spacing:3px;
word-spacing:10px;
}
p .nowrap{
white-space:nowrap;
}
p .inherit{
white-space:inherit;
}
h1{
font-size:1.25em;
font-weight:bold;
color:blue;
text-shadow:4px 3px 5px red;
}
h2{
font-size:1em;
color:white;
text-decoration:underline;
}
Espero sea util. No olvideis practicar.
Suscribirse a:
Entradas (Atom)