Publicado el Deja un comentario

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:


<!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.

Please follow and like us:
Publicado el Deja un comentario

06. CSS Tablas

En este video se ven algunas propiedades de las tablas, que se cambiaran mediante CSS.

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*/
/*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;
}

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.
Espero os sea util, gracias.

Please follow and like us:
Publicado el Deja un comentario

05. CSS Listas

En este video se ven algunas propiedades que se pueden modificar de las listas HTML con CSS.

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.

Please follow and like us:
Publicado el Deja un comentario

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:

<!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.

Please follow and like us: