Publicado el Deja un comentario

10 CSS Bordes y Sombras

En el video se indica como dar bordes redondeados y sombras a las cajas mediante CSS.

El codigo HTML es:

<!doctype html>
<html lang=”ES”>
<head>
<link rel=”stylesheet” type=”text/css” href=”css/bordesSombras.css”>
<title>
Bordes y Sombras
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<div id=”primero”>
<p>Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</div>
<div id=”segundo”>
<p>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*/
*{
   
}
#primero{
    border-radius:20px;
    background-color:orange;
    color:white;
    padding:15px;
    margin:10px;
    box-shadow:-15px -15px 5px 5px yellow;
}
#segundo{
    width:200px;
    height:200px;   
    border-radius:100px;
    background-color:blue;
    color:white;
    padding:30px;
    margin:20px;
    box-shadow:inset 10px 10px 5px yellow,
        inset -10px -10px 5px yellow;
}

Espero os sea util, no olvideis practicar. Gracias.

Please follow and like us:
Publicado el Deja un comentario

08 CSS Display

Atributos de la propiedad Display y como ocultar con la propiedad Visibility.

El codigo HTML es:


<!doctype html>
<html lang=”ES”>
<head>
<link rel=”stylesheet” type=”text/css” href=”css/display.css”>
<title>
Display
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p id=”parrafo1″>Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id=”parrafo2″>Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id=”parrafo3″>Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id=”parrafo4″>Parrafo 4 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsaljkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkfjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:

/*www.ticoticotaa.es*/
/*@2016*/
*{
   
}
#parrafo1{
    width:150px;
    background-color:blue;
    display:block;
}
#parrafo2{
    width:150px;
    background-color:red;
    display:inline;
}
#parrafo3{
    width:150px;
    height:100px;
    background-color:pink;
        visibility:hidden;
}
#parrafo4{
    width:150px;
    background-color:yellow;
    display:block;
}

Espero os sea util, gracias.

Please follow and like us:
Publicado el Deja un comentario

07. CSS Enlaces

Modificamos propiedades de enlaces y puntero de raton mediante CSS.

El codigo HTML es:

<!doctype html>
<html lang=”ES”>
<head>
<link rel=”stylesheet” type=”text/css” href=”css/enlaces.css”>
<title>
Enlaces y cursor
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p>Enlace sin subrayado <a class=”sinsubrayado” href=”#”>Enlace sin</a></p>
<p>Enlace normal <a class=”normal” href=”#”>Enlace normal</a></p>
<p>Enlace normal 2 <a class=”normal” href=”#”>Enlace normal 2</a></p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:


/*www.ticoticotaa.es*/
/*@2016*/
*{
   
}
.sinsubrayado{
    text-decoration:none;
    border:none;
   
}
.normal{
    cursor:pointer; /*default  pointer*/
}
a:hover{
    color:red;
}
a:visited{
    color:yellow;
}
p:hover{
    color:pink;
}

Espero 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

04. CSS Modelo de Cajas

Como preparar el diseño web, introduccion al modelo de cajas.

El archivo html es:

<!doctype html>
<html lang=”ES”>
<head>
<link rel=”stylesheet” type=”text/css” href=”css/modeloCajas.css”>
<title>
Modelo Cajas
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<div id=”principal”>
<p>PRINCIPAL  ldkjflajdslkfjladksjflksdjflkjasdkljlkf</p>
</div>
<div id=”secundario”><p>SECUNDARIO jdlajfldksjflksjdaflkjdslkjflksdjdflkjdsakljfkl</p></div>
<p>Parrafo jkljkdjfskjfk             primero jdlkf<br>jalkdjslakjflkajdkljflkasdjflkjadlkjflkasj<br>dflkjasdlkjflkajdlkfjldsakjfljlfjladsjlkfjladjlfjl</p>
<p>Parrafo segundo kjdkfjkldj                    jhdlkajdkjfsaaa<br>aaaaaaalkdfjdlajflajdlsjfldjslkfjlasdkjflkjsdljflsdjlfjlsdajfljsdlkfjlksdajflkjsdlj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El 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;
   
}
div {
    padding:10px;
    border: 5px solid red;
    height:90px;
    width:90px;
    min-height:100px;
    max-width:200px;
}
#secundario {
    background-color:green;
    border-style: outset;
    border-width: 10px;
    border-color: rgb(0,153,23);
    float:right;
   
}
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;
}

No dejeis de practicar, hasta pronto.

Please follow and like us: