Tips Css Html que talvez te puedan interesar para tu sitio web

DEMOSTRACIÓN

Saludos amigos esta vez te traemos algunos Tips css html para tu web, talvez deberías tomar en cuenta estos tips para obtener una mejor visualización de tu web hacia el lector. Aunque parezca mentira hoy en día los lectores se sienten atraídos hacia una web no solo por su contenido sino también por el aspecto.

Los códigos CSS puestos en esta publicación son de uso libre, sientase a gusto de usarlos como mas le convenga en su
sitio web.

Si bién hoy en día está muy de moda usar un framework CSS, esto no quita la posibilidad de meter mano en nuestro
propio css y darle un aspecto mas agradable.

Ya que hoy en día gran cantidad de lectores acceden a la red desde un dispositivo móvil, sería muy conveniente
utilizar responsive design, puedes leer algo sobre esto dando click aquí.

O bien puedes adaptar tu web a cualquier pantalla com media screen de css puedes ver su demostración y sacar tu propia conclusión.

Pues bién empecemos a ver algo que podríamos necesitar en nuestras web´s. Cabe recalcar que no necesariamente necesitariamos colocar tanto codigo css a nuestros sitio ya que no queremos aturdir los usuarios con tanto espectáculo.

Darle formato a tag code

Con este codigo css vamos a darle un mejor aspecto a las etiquetas code de html, puedes variar los colores si así lo deseas.
Cada vez que crees en html una etiqueta code va a resaltar de esta manera.

  code {
  font-size: 0.7em;
  color: #e83e8c;
  word-break: break-word;
  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  background-color: #f9f2f4;
  padding: 2px 4px;
  border-radius: 4px;
  }

Dar estilo a etiqueta p (de tal manera que parezca una etiqueta blockquote)

Vamos a dar una apariencia diferente usando esta clase llamada .blockquote, hay que tener en cuenta que esto
no es una etiqueta blockquote

  .blockquote{
    margin-top: 10px;
    padding: 9px;
    min-height: 20px;
    border-radius: 3px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    color: #777;
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
  }

Dando estilo a los enlaces

Con esta clase vamos a dar un estilo diferente a nuestros enlaces, con una trancisión de colores diferentes

  .enlace-estilo-3{
    font-family: "proxima-nova-soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif;
    font-style: normal;
      font-weight: 700;
      color: #c3c3c3;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 14px;
      font-size: 0.875rem;
      cursor: pointer;
      webkit-transition: all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
      -moz-transition: all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
      -o-transition: all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
      transition: all 0.375s cubic-bezier(0.4, 0, 0.2, 1);

  }
  .enlace-estilo-3:hover{
    text-decoration: none;
    color:#35373a;
  }

  .enlace-estilo-4{
      background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#e52e71));
      background: linear-gradient(90deg,#ff8a00,#e52e71);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      font-weight: 700;
      border-bottom: 1px solid #e52e71!important;
      padding-bottom: .15rem;
  }
  .enlace-estilo-4:hover{
    border-bottom: 1px solid #FF9633!important;
    padding-bottom: .15rem;
  }

Dando estilo a los blockquote con css

Con este estilo podremos mantener el control de los blockquotes y darles un aspecto diferente

blockquote.style1{
  margin: 30px auto;
  padding: 0px;
  border: 0px;
  width: 75%;
  box-shadow: 0 2px 4px rgba(0,0,0,.23);
  border-radius: 2px;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  position: relative;
  padding: 30px 45px 33px;
}
blockquote.style1:before{
  background-color: #73C6B6;
  content: "\f10d";
  font-family: FontAwesome;
  position: absolute;
  left: -25px;
  top: 30px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  text-align: center;
  line-height: 50px;
  font-size: 26px;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,.23);
}
blockquote.style1 p{
  margin: 8px 0 12px;
  color: #73C6B6;
  font-size: 14px;
  line-height: 24px;
}

Cajas de Información

Con estos estilos podremos mostrar cierta información al usuario dando una apariencia geniales , solo es de saber usar la paleta de colores.

Creamos la caja de información y luego formateamos los colores dependiendo el mensaje.

  .bec_info, .bec_success, .bec_warning, .bec_error {
      border: 1px solid;
      margin: 10px 50px;
      padding: 15px 10px 15px 50px;
      background-repeat: no-repeat;
      background-position: 10px center;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      text-align: left;
      width: auto;
  }
  .bec_error {
      color: #D8000C;
      background-color: #FFBABA;
      background-image: url(../images/error.jpg);
  }
  .bec_info {
      color: #00529B;
      background-color: #BDE5F8;
      background-image: url(../images/info.png);
  }
  .bec_warning {
      color: #9F6000;
      background-color: #FEEFB3;
      background-image: url(../images/warning.jpg);
  }
  .bec_success {
      color: #4F8A10;
      background-color: #DFF2BF;
      background-image: url(../images/success.jpg);
  }

También podemos usar las cajas de información de bootstrap.

  .alert.alert-form:after {
      background-color: inherit;
      bottom: -7px;
      content: "";
      display: block;
      height: 14px;
      left: 5%;
      margin-left: -7px;
      position: absolute;
      transform: rotate(45deg);
      width: 14px;
    }
  .alert{
    margin : 30px 60px;
  }

Su código html es el siguiente:

<div class="alert alert-form alert-success">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">X</span><span class="sr-only">Close</span></button>
  <strong>Sastifactorio..!</strong>
  <span>Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles.</span>
</div>

Estilo css para mostrar etiquetas o categorias de webs

Usaremos colores definidos por bec.

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-danger, .label-info, .label-warning, .label-primary, .label-success{
  color: #fff !important;
}

.label-danger{
  background-color: #dd4b39 !important;
}
.label-success{
  background-color: #00a65a !important;
}
.label-info{
  background-color: #00c0ef !important;
}
.label-warning{
  background-color: #f39c12 !important;
}
.label-primary{
  background-color: #3c8dbc !important;
}

Para usar los estilos de bootstrap son:

<span class="badge badge-secondary badge-pill">design web</span>

Para las notificaciones usaremos la siguiente clase.

  .menu li{
    list-style: none;
    display: inline;
  }
  .menu a{
    color: #DCDCDC ;
    text-decoration: none;
  }
  .menu a:hover{
    color: #FF9C33;
  }
  .menu .box-notificacion{
    text-align: center;
    font-size: 45px;
  }
  .menu>li>a>.label{
    position: relative;
    top: -30px;
    left: -32px;
    text-align: center;
    font-size: 12px;
    padding: 2px 3px;
    line-height: .9;
  }

Su codigo html es el siguiente:

  <ul class="menu">
    <li>
      <a class="box-notificacion" href="#">
        <i class="fa fa-bell"></i>
        <span class="label label-warning">10</span>
      </a>
    </li>
    <li>
      <a class="box-notificacion" href="#">
        <i class="fa fa-flag"></i>
        <span class="label label-success">15</span>
      </a>
    </li>
    <li>
      <a class="box-notificacion" href="#">
        <i class="fa fa-envelope-o"></i>
        <span class="label label-danger">19</span>
      </a>
    </li>
    <li>
      <a class="box-notificacion" href="#">
        <i class="fa fa-heart-o"></i>
        <span class="label label-primary">59</span>
      </a>
    </li>
    <li>
      <a class="box-notificacion" href="#">
        <i class="fa fa-download"></i>
        <span class="label label-warning">12</span>
      </a>
    </li>
    <li>
      <a class="box-notificacion" href="#">
        <i class="fa fa-user"></i>
        <span class="label label-info">10</span>
      </a>
    </li>
  </ul>

Loading css: Efectos de carga con css y fontawesome

Para este demo usaremos la librería fontawesome y la alojaremos dentro de nuestro sitio y enlazarla como estilo

Luego usaremos sus iconos de esta forma:

  <button type="button" class="btn btn-default btn-lrg ajax" >
    <i class="fa fa-spin fa-refresh"></i>  Cargando espere...
  </button>

Nótese como se usa un botón de bootstrap y con un i llamamos el icono de carga + Cargando espere

Botones Registrarse en redes sociales con CSS

Para estos estilos crearemos con efecto :hover y sin efecto :hover

  /*reseteamos la clase .btn (por si usamos bootstrap)*/
  .btn {
      display: inline-block;
      padding: 6px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      -ms-touch-action: manipulation;
      touch-action: manipulation;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
  }
  .btn-block {
      display: block;
      width: 100%;
  }
  .btn {
      border-radius: 3px;
      -webkit-box-shadow: none;
      box-shadow: none;
      border: 1px solid transparent;
  }
  .btn-social {
      position: relative;
      padding-left: 44px;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .btn-social>:first-child {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 32px;
      line-height: 34px;
      font-size: 1.6em;
      text-align: center;
      border-right: 1px solid rgba(0,0,0,0.2);
  }

  /*bitbucket*/
  .btn-bitbucket {
      color: #fff !important;
      background-color: #205081;
      border-color: rgba(0,0,0,0.2);
  }
  .btn-bitbucket:hover {
      color: #fff !important;
      background-color: #163758;
      border-color: rgba(0,0,0,0.2);
  }

  /*dropbox*/
  .btn-dropbox {
      color: #fff !important;
      background-color: #1087dd;
      border-color: rgba(0,0,0,0.2);
  }
  .btn-dropbox:hover {
      color: #fff !important;
      background-color: #0d6aad;
      border-color: rgba(0,0,0,0.2);
  }

  /*Facebook*/
  .btn-facebook {
      color: #fff !important;
      background-color: #3b5998;
      border-color: rgba(0,0,0,0.2);
  }
  .btn-facebook:hover {
      color: #fff !important;
      background-color: #2d4373;
      border-color: rgba(0,0,0,0.2);
  }

  /*flickr*/
  .btn-flickr {
      color: #fff !important;
      background-color: #ff0084;
      border-color: rgba(0,0,0,0.2);
  }
  .btn-flickr:hover {
      color: #fff !important;
      background-color: #cc006a;
      border-color: rgba(0,0,0,0.2);
  }

  /*foursquare*/
  .btn-foursquare {
      color: #fff !important;
      background-color: #f94877;
      border-color: rgba(0,0,0,0.2);
  }
  .btn-foursquare:hover{
    color:#fff !important;
    background-color:#f71752;
    border-color:rgba(0,0,0,0.2);
  }

  /*github*/
  .btn-github {
      color: #fff !important;
      background-color: #444;
      border-color: rgba(0,0,0,0.2);
  }
  .btn-github:hover{
    color:#fff !important;
    background-color:#2b2b2b;
    border-color:rgba(0,0,0,0.2);
  }

  /*instagram*/
  .btn-instagram {
      color: #fff !important;
      background-color: #3f729b;
      border-color: rgba(0,0,0,0.2);
  }

  /*linkedin*/
  .btn-linkedin {
      color: #fff !important;
      background-color: #007bb6;
      border-color: rgba(0,0,0,0.2);
  }

  /*tumblr*/
  .btn-tumblr {
      color: #fff !important;
      background-color: #2c4762;
      border-color: rgba(0,0,0,0.2);
  }


  /*twitter*/
  .btn-twitter {
      color: #fff !important;
      background-color: #55acee;
      border-color: rgba(0,0,0,0.2);
  }


  /*vk*/
  .btn-vk {
      color: #fff !important;
      background-color: #587ea3;
      border-color: rgba(0,0,0,0.2);
  }


Hasta la próxima , espero estos tips css html les sirva para algún futuro proyecto, no se olviden compartir
y seguirnos en redes sociales para saber mas sobre Bloguero-ec.

Relacionado