Programando PHP: CSS3

Mostrando entradas con la etiqueta CSS3. Mostrar todas las entradas

CSS: Hacer un div que pueda ser resizable


<!DOCTYPE html>

<html>

<head>

<style>

.div1 {

  width: 200px;

  height: 100px;

  border: 1px solid blue;

  resize: both;

  overflow: auto;

}

</style>

</head>

<body>



<div class="div1">En un lugar de la Mancha de cuyo nombre</div>



</body>

</html>

CSS: Imagen con texto al lado de varias líneas


<style>

div.bloque {

  width: 50%;

  margin: 20px auto;

  padding: 15px;

}



div.bloque img.izquierda {

  float: left;

  margin-right: 15px;

}



div.reset {

  clear: both;

}

</style>



<div class="bloque">

  <img class="izquierda" src="https://www.eldespotricadorcinefilo.com/images/imgOscars/robert_de_niro.jpg">

  <aside>En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas con sus pantuflos de lo mismo, los días de entre semana se honraba con su vellori de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera.</aside>

  <div class="reset"></div>

</div>

CSS: Efecto texto que se desvanece


<!DOCTYPE html>

<html>

  <head>

    <style rel="stylesheet" type="text/css">

        .container .post:after, #excesivo .post:after {

          content: "";

          display: block;

          position: absolute;

          bottom: 0;

          left: 0;

          width: 100%;

          height: 50%;

          background-size: 100%;

          background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#FFFFFF));

          background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,#FFFFFF 100%);

          background: -moz-linear-gradient(top,rgba(231,231,226,0) 0,#FFFFFF 100%);

          background: -o-linear-gradient(top,rgba(255,255,255,0) 0,#FFFFFF 100%);

          background: linear-gradient(top,rgba(255,255,255,0) 0,#FFFFFF 100%);

        }

        .post{

          position: relative;

        }

        .box{

          width: 380px;

        }

        p {

          display: block;

          -webkit-margin-before: 1em;

          -webkit-margin-after: 1em;

          -webkit-margin-start: 0px;

          -webkit-margin-end: 0px;

        }

        .excerpt {

          font-size: 15px;

          line-height: 21px;

          margin: 10px 0 0 0;

        }

    </style>

  </head>

  <body>

    <div>

      <div class="container">

        <div class="box post">

       <h1>Un gangster para un milagro (1961) de Frank Capra</h1>

       <p class="excerpt">

     Pues sí, tarde o temprano tenía que acabar metiendo en El Despotricador Cinéfilo la película “Un gángster para un milagro”. ¿Y qué tiene de especial esta película para significar tanto para mí? Pues que fue, nada más y nada menos, la primera película que vi en mi vida. Casi nada. Después de casi 7000 películas vistas ella fue el origen de todo. Recuerdo perfectamente tener unos 4 años y estar enredando con mis juguetes delante de la pantalla de la televisión cuando empezó la película y como poco fui dejando de hacer caso a mis juguetes y me enfrasque en la película mirándola al principio de reojo y luego totalmente absorto tragándomela de principio a fin a mis 4 años. Fue la primera película que recuerdo conscientemente haber visto. Y lo cierto es que vuelta a ver no podía haber elegido mejor el inicio de mi cinefilia pues sigue siendo una película magnífica, muy entretenida, divertida y, sobre todo, con el encanto infantil que le aporta nuestro querido Capra a sus mejores obras.

    </p>

      </div>

      </div>

    </div>

  </body>

</html>

CSS3: Capa de efecto lock

Tienes que tener previamente incluido el:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">




.lock:after {

    content: "\f023";

    font-family: FontAwesome;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    color: rgba(255, 255, 255, 0.85);

    z-index: 99;

    font-size: 5em;

    margin-top: 115%;

    text-align: center;

}

.lock:before {

    content: "";

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.67);

    position: absolute;

    top: 0;

    left: 0;

    z-index: 10;

}



Para bloquearlo:

$(".miCapa").addClass("lock"); // Al elemento q se añada debe tener position:relative

Transform: Scale
div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}
div:Hover {
transform: scale(2,2); // el doble tanto de ancho como de alto
}

Transform: rotate
div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}
div:Hover {
transform: rotate(25deg); // si pones -25 sera en el otro sentido la rotación
}

Se puede especificar rotateX y rotateY

Para cambiar la simetría (incliniación) de un elemento: transform: skew(30deg);
También permite especificar skewX y skewY

Transform: translate
transform: translate(50px,40px); // Lo desplaza horizontal y verticalmente
También permite translateX y translateY

Para hacer una transform combinando varios:
transform: translateY(250px) rotate(45deg) scale(2,3);

TRANSITION:
Para que las transformaciones no sean bruscas y rapidas se establece el tiempo para que así sea más elegante la transición:

div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    transition: transform ease-in-out 1.5s;
    /* el primer parametro indica que la transición solo afectará a aquellos elementos a los que se aplique un transform, si quisieramos que se aplicara a todos habría que poner all */
}
div:Hover {
   transform: translateY(250px) rotate(45deg) scale(2,3);
}

Ḿás información en:
http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

CSS3: Sombreados, bordes, degradados y fuentes externas

#principal {
    ...
    border-radius:20px;
    box-shadow: #2C2961 5px 5px 10px;
    background: linear-gradient(30deg,red, blue); /* degradado lineal */
background: radial-gradient(circle, red, yellow, green); /* degradado radial */
}

Importar fuente externa
- http://www.fontsquirrel.com/
- Descargar la fuente que se quiera y descomprimirla en una carpeta.
- En la web darle a "Generator" y en "Upload fonts" indicar la carpeta descomprima.
- Descargar las fuentes de esa letra para ser usadas en nuestra web.

#titulo {
    font: bold 36px "1942_report1942_report", verdana, sans-serif;
    text-shadow: #2C2961 3px 3px 5px;
}

@font-face {
    font-family: '1942_report1942_report';
    src: url('../fonts/1942-webfont.eot');
    src: url('../fonts/1942-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/1942-webfont.woff2') format('woff2'),
         url('../fonts/1942-webfont.woff') format('woff'),
         url('../fonts/1942-webfont.ttf') format('truetype'),
         url('../fonts/1942-webfont.svg#1942_report1942_report') format('svg');
    font-weight: normal;
    font-style: normal;
}

Crear bordes externos
outline: 2px dashed #000999;
outline-offset: 15px;

Crear borde con una imagen
border: 10px solid transparent;
padding:5px;
border-image: url(border.png) 30 round;

CSS3: Referencias

p[name="principal"]
Afecta solo aquel párrafo cuyo name sea "principal"

p[name^="pri"]
Afecta a todos aquellos párrafos cuyo name empiece por "pri"

p[name$="pri"]
Afecta a todos aquellos párrafos cuyo name terminen en "pri"

p[name*="pri"]
Afecta a todos aquellos párrafos cuyo name contenga "pri"

-----------------------------------------------------------------------------
PSEUDOCLASES

p:nth-child(3) {
    background-color:#ff0000;
}
Afecta solo al tercer <p> que haya en el documento

p:nth-child(odd) { // Afecta a todos los <p> impares
    background-color:#FF0000;
}
p:nth-child(even) { // Afecta a todos los <p> pares
    background-color:#2C2961;
}

p:first-child { // Afecta solo al primer <p>
    background-color:#000;
}
p:last-child { // Afecta solo al último <p>
    background-color:#FFF;
}
p:only-child { // Afecta solo a aquellos <p> que estén solos (no tengan hermanos)
    background-color:blue;
}

----------------------------------------------------------------------------

Uso de >, +, ~

div> p.estilo1 { ... } // Solo afectará a aquellos <p> que tengan un <div> como padre

p.estilo1 + p { ... } // Solo el <p> que sea hijo de p.estilo1 será afectado

p.estilo1 ~ p { ... } // Afectará a todos aquellos <p> que sean hermanos de ese p.estilo1

CSS3: Etiquetas según los navegadores

nav a {
    -webkit-border-radius: 0.25em; /* Safari, Chrome */
    -moz-border-radius: 0.25em; /* Firefox */
    -ms-border-radius: 0.25em; /* IE */
    -o-border-radius: 0.25em; /* Opera */
    border-radius: 0.25em; /* para todos los demas navegadores */

      -webkit-transition: all, .5s, ease-in;
   -moz-transition: all, .5s, ease-in;
   -ms-transition: all, .5s, ease-in;
   -o-transition: all, .5s, ease-in;
   transition: all, .5s, ease-in; /* elementos, duracion, efecto, Tiempo inicio */
}

CSS: Ejemplos útiles

Div que te siga con el scroll
http://www.jose-aguilar.com/blog/position-fixed/

CSS3: Media querys

@media (max-width: 480px) {
#pepe { .. }
.clase1{ ... }
}

CSS3: Listas: ul, ol, li, list-style-type, añadir imagen a la lista

Diferentes tipos de listas:
http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_all
Añadir imagen:
http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-image

CSS3: Alinear verticalmente una imagen con el texto

CSS3: Operaciones con textos

text-decoration: none; // quitar subrayados de los links
text-indent: 50px; // indentar el texto los píxeles que quieras
text-transform: uppercase; // mayusculas
text-transform: lowercase; // minúsculas
text-transform: capitalize; // capitalizar
letter-spacing: 3px; // Espacio entra las letras
line-height: 15px; // espacio entre las líneas
word-spacing: 30px; // espacio entre las palabras
direction: rtl; unicode-bidi: bidi-override; // escribir el texto al revés

CSS3: Posicionar una imagen y texto

EJEMPLO1:
body {
margin-left: 200px; /* ancho de la imagen */
background: #5d9ab2 url("img_tree.png") no-repeat top left;
}

EJEMPLO2:
body {
margin-right: 200px; /* ancho de la imagen */
background: #5d9ab2 url("img_tree.png") no-repeat top right;
}

Todo el texto que se escriba en el body no se mezclará nunca con la imagen gracias al margin.

CSS3: Fixed, Fijar una imagen aunque se mueva el scroll

#divLSG {
background-image: url("foto1.jpg");
background-repeat: no-repeat; /* repeat-x, repeat-y */
background-attachment: fixed;
}

CSS3: Poner dos bordes a un div

div {
margin: 20px;
width: 150px;
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
}

CSS3: Crear columnas para textos

.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}

Más información en http://www.w3schools.com/css/css3_multiple_columns.asp

CSS3: Animaciones

<html>
<head>
<style>
div {
width: 224px;
height: 189px;
background: url('unoWilder.jpg');
position: relative;
-webkit-animation: animaWilder 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
animation: animaWilder 5s linear 2s infinite alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animaWilder {
0% { left:0px; top:0px; width:100px;height:100px;}
25% { left:300px; top:0px; width:120px;height:110px;}
50% { left:300px; top:300px;width:140px;height:120px;}
75% { left:0px; top:300px;width:160px;height:130px;}
100% { left:0px; top:0px;width:190px;height:140px;}
}

/* Standard syntax */
@keyframes animaWilder {
0% { left:0px; top:0px; width:100px;height:100px;}
25% { left:300px; top:0px; width:120px;height:110px;}
50% { left:300px; top:300px;width:140px;height:120px;}
75% { left:0px; top:300px;width:160px;height:130px;}
100% { left:0px; top:0px;width:190px;height:140px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

CSS3: Transform

Se pueden aplicar con Transform cinco métodos: translate, rotate, scale, skew y matrix.
---------------------------------------------------
translate: /* desplaza el div el top y el left que le indiques */
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */
transform: translate(50px,100px);
}
---------------------------------------------------
rotate: /* rota el div los grados que le indiques */
div {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
Si queremos girar verticalmente (efecto espejo) es con rotateY
---------------------------------------------------
scale: /*escala el div la proporción que le indiques */
div {
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Chrome, Safari, Opera */
transform: scale(2,4);
}
---------------------------------------------------
Skew: /* gira el div el ángulo que le indiques */
div {
    -ms-transform: skew(30deg,20deg); /* IE 9 */
    -webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */
    transform: skew(30deg,20deg);
}
---------------------------------------------------
Matrix: /* Combiba los 4 anteriores en un solo método (se le pasan 8 parámetros) */
div {
    -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Chrome, Safari, Opera */
    transform: matrix(0.866,0.5,-0.5,0.866,0,0);
}
---------------------------------------------------
Más información en: http://www.w3schools.com/css/css3_2dtransforms.asp
Más información sobre transitions: http://www.w3schools.com/css/css3_transitions.asp

---------------------

EJEMPLO:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" type="text/css" href="giroLSG.css">
</head>
<body>
 <div id="container">
  <div class="giro1"><img src="fondo/rm.png"></div>
  <div class="giro2"><img src="fondo/rm.png"></div>

  <div class="giro3"><img src="fondo/rm.png"></div>
 </div>
</body>
</html>

giroLSG.css:

#container {
width: 800px;
margin: 0 auto;
}
img {
margin: 20px;
/* transition: tiempo q tarda en realizar toda la transformación, en segundos */
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
.giro1 img:hover {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.giro2 img:hover {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY (-180deg);
}

.giro3 img:hover { /* aumentar el tamaño */
width: 300px;
height: 300px;
}

CSS3: Cargar fuentes

@font-face {
font-family: fuenteLSG;
src: url(sansation_light.woff);
}

div {
font-family: fuenteLSG;
}

Parámetros a aplicar en una fuente: font-family, font-stretch, font-weight, font-style, etc.

Más información en: http://www.w3schools.com/css/css3_fonts.asp

Programando PHP

ccc