Mis Snippets CSS

En esta entrada os hablo de las hojas de estilo CSS y de los Snippets CSS más utilizados en diferentes proyectos. Como muchos sabréis, cada desarrollo web es totalmente diferente, diseño Web, contenido, criterio del cliente…..e incluso el lanzamiento.

Según he visto en cada proyecto, el criterio del cliente es lo más importante (sin duda), pero también nos encontramos con la realidad de que nos son profesionales y por eso nos necesitan. Ellos buscan profesionales donde invertir el dinero de la manera mas eficaz posible, obtener beneficios para su producto/servicio y por ello contactan con uno, para que les asesoremos de la mejora manera posible, para que que día a día puedan demostrar el servicio que realizan.

Ahora voy a mostrar “algunos” de muchos trucos que tengo para ofrecer a nivel técnico.

Espero que puedan ser útiles en tu proximo proyecto como lo han sido para mi. De igual manera espero aprender de tus experiencias, por eso, espero tu comentario, te lo agradeceré mucho!

Que son los Snippets CSS?

Como sabéis las hojas de estilo CSS son la imagen, junto a la imagen para mostrar una experiencia visual diferente en cada proyecto.

El lenguaje CSS es utilizado para describir la presentación de documentos HTML, XML, entre otros para describir como debe ser renderizado el elemento estructurado en pantalla, en papel entre otros. En otras palabras el diseño mostrado, ya  sea en pantalla/papel entre muchos.

Los Snippets CSS son utilizados en programación para referirse a partes de código fuente definidos como unidades o métodos funcionales que pueden integrar fácilmente aportando funcionalidad.

En otras palabras, códigos desarrollados por otras personas. Facilitando situaciones que quieres utilizar para que tu desarrollo web cumpla con todas las expectativas de manera que ahorres mucho tiempo.

En cada proyecto es muy importante los tiempos incurridos.

Dependiendo de cada proyecto, la lista de mis Snippets CSS puede crecer, pero aquí os muestro algunos de los mas utilizados que espero que os sea de ayuda.

Espero tu mensaje/comentario con tu problema o situación, a lo mejor podemos ayudarnos 🙂

Mis Top Snippets CSS

Reset CSS

 

El restablecer estilos de algunos fragmentos sera lo mas común en la mayoría de situaciones. En el siguiente fragmento esta basado en mantener los elementos básicos (bordes, márgenes, relleno alineados, etc..) correctamente.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

p { font-size: 1.2em; line-height: 1.0em; color: #333; }

Cross-Browser Transparency

 

En algunas de las propiedades CSS nos podemos encontrar ciertos problemas en la opacidad de una clase. Con este Snippets podremos controlar en diferentes navegadores, código interesante a tener en cuenta entre navegadores.

.transparent {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}

Media Queries

 

Eres desarrollador y como objetivo principal es que tu proyecto Web sea visualizado de manera correcta en todas los dispositivos. Para cada dispositivo tendrás que tener una serie de criterios en cuenta, como el mas importante, la pantalla en la que es visualizada la web/app. Por lo que tendrás que tener en cuenta los siguientes Snippets CSS para preparar la visualización en cada tipo de dispositivo.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}

Tipografía Web

 

GRACIAS a Extrasoftware (desarrollo técnico) y Thankium (Agencia de publicidad) que me permiten formar parte de importantes proyectos (Mil Gracias!), me encontrado con el proyecto de Bauertypes (fabricantes, distribuidores y asesores tipográficos, con la misión de conectar a los tipógrafos con los usuarios finales y aconsejar a ambas partes en aspectos comerciales, funcionales y técnicos).

De este proyecto como de muchos otros, he podido profundizar mucho en tipografías.

La tipografía en un proyecto WEB, sin duda es uno de los puntos más importante igual que imágenes utilizadas o el diseño.

Aquí te dejo un listado de las tipografías mas utilizadas, donde recomiendo incluso experimentar con nuevas tipografías del mercado que ofrece Adobe typekit o Google Fonts

/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* A modern Georgia-based serif */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/*A more traditional Garamond-based serif */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/*The Helvetica/Arial-based sans serif */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

/*The Verdana-based sans serif */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

/*The Trebuchet-based sans serif */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

/*The heavier "Impact" sans serif */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

/*The monospace */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

@Font face Template

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff') format('woff'), /* Modern Browsers */
    url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
    font-family: 'MyWebFont', Arial, sans-serif;
}

Selección del Texto CSS

 

Personaliza el texto que es selecionado en tus proyectos Web.

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

Personaliza Fullscreen Backgrounds

 

Me encontrado que este código no funciona bien en los navegadores antiguos, pero creo que hay que mirar adelante por lo que también lo destacado. Sirve para añadir fotografías grandes de fondo mientras las mantienes redimensionadas y fijas mientras que el usuario hace Scroll.

html { 
    background: url('images/imagendefondo.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Fijar Footer con CSS

 

Código para fijar el footer incluso con IE 6.

#footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 30px;
    width: 100%;
    background: #444;
}

/* IE 6 */
* html #footer {
    position: absolute;
    top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Establecer los títulos de tu proyecto con CSS

 

Uno de los puntos muy importantes para el correcto posicionamiento Web, son los títulos. Y con el siguiente Snippets CSS, puedes establecer un estilo para cada uno de ellos. Si hablamos de #marketingdigital, tendremos que tener en encuenta para los títulos el uso de las etiquetas <h1> hasta la <h5>

h1,h2,h3,h4,h5{
  color: #005a9c;
}
h1{
  font-size: 2.6em;
  line-height: 2.45em;
}
h2{
  font-size: 2.1em;
  line-height: 1.9em;
}
h3{
  font-size: 1.8em;
  line-height: 1.65em;
}
h4{
  font-size: 1.65em;
  line-height: 1.4em;
}
h5{
  font-size: 1.4em;
  line-height: 1.25em;
}

Puedes encontrar muchos mas Snippets CSS por Google dependiendo la finalidad de cada proyecto, por lo que te sugiero los principales enlace donde puedes encontrar muchos más que encontrado interesantes y 100% imprescindibles.

Posiblemente mi preferida:

http://littlesnippets.net/

Pero también te recomiendo:

https://css-tricks.com/snippets/

http://css-snippets.com/

 

Te a gustado este Post? Tienes dudas? Califica o resuelve tus dudas mediante los comentarios o un privado utilizando el formulario de contacto. Siempre agradeceré tu visita ????

 

0 estrella1 estrellas (+7 puntuación, 2 votos)
Cargando…

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  Acepto la política de privacidad

Información sobre protección de datos

  • Responsable: Julian Mariscal
  • Fin del tratamiento: Controlar el spam, gestión de comentarios
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  • Derechos: Acceso, rectificación, portabilidad, olvido.
  • Contacto: rgpd@julianmp.info.
  • Información adicional: Más información en mi política de privacidad.

Chatbot (En pruebas)
Desarrollado por Julian Mariscal