Programando PHP: CSS

Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas

CSS: Mostrar un texto sobre una imagen al hacer hover sobre ella


 <html>

<head>

<style>

  .hover-img {

    background-color: #000;

    color: #fff;

    display: inline-block;

    margin: 8px;

    max-width: 320px;

    min-width: 240px;

    overflow: hidden;

    position: relative;

    text-align: center;
    width: 100%;

  }


  
  .hover-img figcaption {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    align-items: center;

    z-index: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    line-height: 1.1em;

    opacity: 0;

    z-index: 2;

    transition-delay: 0.1s;

    font-size: 20px;

    font-family: sans-serif;

    font-weight: 400;

    letter-spacing: 1px;

    text-transform: uppercase;

  }


  
  .hover-img:hover img { /* oscurecer la imagen */

   opacity:0.6;

  }
  


  .hover-img:hover figcaption { /* Mostrar el texto de invisible a visible */

    opacity: 1;

  }
  


  .hover-img h2 {

    font-size: 1.3em;

    opacity: 0;

    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

    transition: opacity 0.35s, transform 0.35s;

    -webkit-transform: scale(1.5);

    transform: scale(1.5);

    .hover-img:hover h2 {

    opacity: 1;

    -webkit-transform: scale3d(1,1,1);

    transform: scale3d(1,1,1);

  }

  </style>

  </head>

  <body>

  <figure class="hover-img">

  <img src="https://picsum.photos/id/200/440/320.jpg">

    <figcaption>

      <h2>En un lugar de la mancha</h2>

    </figcaption>
</figure>

  </body>

  </html>

Más información en: https://www.30secondsofcode.org/css/s/image-overlay-hover/

CSS Aplicando condiciones


  [class*="fa-"] { ... }

  [href$=".com"] { ... }

CSS: Ajustar un height de un div al tamaño que tenga el contenido de ese div


  style="height:100px;overflow:'hidden';"

CSS que a partir de lo que ocurre en un elemento provoque otro efecto en otro


/* Al pasar el rató por encima se mostrará la capa con clase navigation-submenu */

.navigation-link:hover + .navigation-submenu { display: block !important; }

CSS: Forzar una imagen a tamaño de 16 a 9


  <div class="image-wrapper">

        <img src="xxx" alt="">

  </div>
  


  <style>

  .image-wrapper {

            position:relative;

            padding-bottom: 56.25%;

        }

        .image-wrapper img {

            position:absolute;

            object-fit: cover;

            width:100%;

            height:100%;

        }

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>

CSS: Efectos de animación

https://www.creativosonline.org/blog/efectos-css-texto.html

Impedir por CSS que un texto pueda seleccionarse


<style>

.unselectable {

  user-select: none;

}

</style>



<p>Puedes seleccionarme</p>

<p class="unselectable">No puedes seleccionarme</p>

CSS: Truncar un texto mediante CSS


<p class="truncate-text">En un lugar de la mancha de cuyo nombre no quiero</p>

Y en el CSS:


.truncate-text {

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  width: 300px;

}

CSS: Recargar un CSS dinámicamente con JQuery

$("head").append($("<link id="miCSS" rel='stylesheet' href='style.css' type='text/css' media='screen' />"));

Si queremos modificar el SRC de un CSS ya cargado con anterioridad:

$("#miCSS").attr("href", "otroestilo.css");

También se puede hacer de esta otra manera:

$("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "/styles/yourcss.css"
}).appendTo("head");

CSS: Centrar un div horizontalmente

<head>
<style>
body {
background-color:#FFF;
}
.divCentrado {
   width:1000px;
   margin:0 auto;
   background-color:#FF0000;
}
</style>
</head>

<body>
    <div class="divCentrado">Esto va centrado para todos los monitores</div>
</body>

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

Para centrar horizontalmente DIV dentro de otros DIV sería:

<head>
<style>
.boxCentrado {
display: inline-block;
background-color:#eee;
width: 200px;
margin: 5px;
}
</style>
</head>

<div align="center">
<div class="boxCentrado">1</div>
<div class="boxCentrado">2</div>
<div class="boxCentrado">3</div>
<div class="boxCentrado">4</div>
</div>

CSS: Mantener fijo el pie (footer de la página)

<head>
<style>
html,body {
height:100%;
}
.estructura {
   margin:0;
   padding:0;
   top:0;
   min-height:100%;
   position:relative;
}
.headerMain {
    position:absolute;
    top:0;
    width:100%;
    color:#000;
}
.bodyMain {
   padding-top:85px;
   padding-bottom:235px;    /* altura del footer */
}
.footerMain {
   position:absolute;
   bottom:0;
   width:100%;
   height:235px; /* altura del footer */
   background-color:#000;
}
</style>
</head>

<div class="estructura">
    <div class="headerMain">
        CABECERA
    </div>

    <div class="bodyMain">
        CUERPO
    </div>

    <div class="footerMain">
        PIE
    </div>
</div>

CSS: Hacer un elemento responsive

img-responsive{width:100%;display:block;height:auto; }

CSS: Centrar verticalmente una imagen

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
#imagen_centrada {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 168px;
margin-left: -150px;
margin-top: -82px;
}
</style>
</head>
<body>
<div id="portatil">
<img id="imagen_centrada" src="images/foto1.jpg">
</div>

</body>
</html>

Programando PHP

ccc