5 soluciones de codificación útiles para diseñadores y desarrolladores

 

 

 

  • ¡Registro!
  • SmashingConf Nueva York 2024

  • Índice
    1. 1. Diseñar una elegante línea de tiempo CSS
    2. 2. Estilo de página personalizado, letras mayúsculas CSS y notas al pie
      1. 1. Estilo de página personalizado en WordPress
      2. 2. Crear letras mayúsculas
      3. 3. Notas a pie de página
    3. 3. Flujo de texto
    4. 4. Desglose del carrusel combinado
      1. Degradación agraciada
    5. 5. Hermosas calificaciones tipográficas basadas en CSS
      1. Degradación agraciada
    6. 5. Hermosas calificaciones tipográficas basadas en CSS
      1. Solución alternativa
    7. Pensamientos finales

    Veamos algunas técnicas inteligentes desarrolladas y utilizadas por los mejores profesionales de la industria del diseño web. Podemos utilizar sus ejemplos para desarrollar nuestras propias soluciones alternativas.

     

    Esta publicación es la próxima entrega de publicaciones que presentan " Soluciones de codificación útiles para diseñadores y desarrolladores ", una serie de publicaciones que se centran en técnicas CSS/JavaScript únicas y creativas implementadas por profesionales talentosos de nuestra industria. Un talento clave que cualquier diseñador web debe adquirir es la capacidad de observar, comprender y aprovechar los diseños de otras personas. Esta es una excelente manera de desarrollar las habilidades y técnicas necesarias para producir sitios web efectivos.

    Con eso en mente, veamos algunas técnicas inteligentes desarrolladas y utilizadas por los mejores profesionales de la industria del diseño web . Podemos utilizar sus ejemplos para desarrollar nuestras propias soluciones alternativas.

     

    1. Diseñar una elegante línea de tiempo CSS

    Diseñar una línea de tiempo es una de las tareas que frecuentemente hay que resolver cuando se trata del diseño de portafolios. Algunos diseñadores presentan la línea de tiempo como una imagen, otros usan texto sin formato o usan una buena tabla antigua. Encontramos una interesante solución basada en CSS de una línea de tiempo en 37Signals.com . Si bien las líneas de tiempo generalmente se diseñan horizontalmente, esta es vertical, zigzagueando hacia abajo en cada intervalo de tiempo.

    ¿Cómo se hace esto?
    Para lograr este efecto de zig-zag, flotaremos cada fila. Al asignar una clase "par", podemos especificar un estilo diferente para los intervalos de tiempo alineados a la derecha, controlando sus colores y alineación.
    Vea la demostración .

    Aquí está el HTML:

    div span2009/span pDuis acsi ullamcorper humo decet, incassum validus, appellatio in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut, jugis, delenit. /p /div div span2008/span pDuis acsi ullamcorper humo decet, incassum validus, appellatio in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut, jugis, delenit. /p/div

    Y aquí está el CSS:

    El valor predeterminado timeslotflotará hacia la izquierda y tendrá un relleno de 100 píxeles hacia la derecha. Esto deja espacio para que el año ( span) se ubique a su derecha. También utilicé el posicionamiento absoluto durante el año para poder cambiar fácilmente de izquierda a derecha sin preocuparme por problemas de colisión de flotadores.

    Agregue una clase de evena cada fila par, de modo que quede alineada a la derecha en rojo y el año colocado a la izquierda.

    .timeslot { width: 235px; float: left; margin: 0 0 10px; padding: 10px 100px 0 0; border-top: 3px solid #ddd; position: relative;}.timeslot span { position: absolute; right: 0; top: 27px; font-size: 3em; color: #999;}.even { float: right; padding: 10px 0 0 100px; border-color: #ca0000;}.even span { left: 0; color: #ca0000;}

    2. Estilo de página personalizado, letras mayúsculas CSS y notas al pie

    Un sitio web que es verdaderamente único es el de Jason Santa María . Lo impresionante del sitio web de Jason es que cada artículo y publicación de blog es completamente único, con un diseño adaptado al contenido. Mirando un artículo reciente, " Matemáticas de Tootsie Pop ", repasaremos algunas técnicas que nos destacan.

    1. Estilo de página personalizado en WordPress

    La primera pregunta que me vino a la mente al visitar el blog de Jason fue: "¿Cómo le dio a cada publicación un diseño único?" Puede lograr esto simplemente haciendo referencia a una hoja de estilo personalizada para anular el estilo predeterminado del sitio web. Al utilizar una combinación de campos personalizados en WordPress y comprender la especificidad de CSS , puedes darle libremente a cada publicación un diseño propio. Entonces, ¿ cómo se hace esto?

     

    Paso 1. Personaliza la publicación con una hoja de estilo personalizada
    Comience creando una nueva hoja de estilo y asigne un nombre al archivo que coincida con el título de su publicación. Con una buena comprensión de la especificidad de CSS , puede personalizar la apariencia de la publicación.

    Paso 2. Cree valores de campo personalizados
    Inicie sesión en su área de administración de WordPress y vaya a la página de edición de la publicación. Desplácese hacia abajo hasta el área "Campo personalizado" e ingrese un nuevo nombre de campo personalizado llamado "estilos personalizados". Luego, para el valor de ese campo personalizado, ingrese la URL completa de su hoja de estilo personalizada.

    Paso 3. Llame a la hoja de estilo personalizada.
    Abra el archivo header.php en su tema personalizado y encima de su titleetiqueta, agregue lo siguiente:

    ?php $customStyles = get_post_meta($post-ID, "customStyles", true);if (!empty($customStyles)) { ?link rel="stylesheet" href="?php echo $customStyles; ?" type="text/css" media="screen" /?php } ?

    En este paso, verificamos si existe un campo personalizado de "estilos personalizados". Si es así, inyectará el valor dentro de la hrefreferencia de la hoja de estilo.

    Tutoriales de campos personalizados:

    • Hacks de campos personalizados para WordPress
    • Campos personalizados de WordPress, Parte I: Conceptos básicos
    • Campos personalizados de WordPress, Parte II: consejos y trucos

    Tutoriales de especificidad de CSS:

    • Especificidad de CSS: cosas que debes saber
    • Detalles sobre la especificidad de CSS
    • Comprender la especificidad de CSS

    2. Crear letras mayúsculas

    Las letras mayúsculas se ven comúnmente en el diseño impreso, pero con el reciente aumento de popularidad de la tipografía web, esta técnica parece volverse más común. Disponemos de varias formas de lograr esta técnica.

    Aquí está el HTML que usarías:

    pspanE/spanros decet bis eligo jumentum brevitas vel abigo iusto commoveo ex abigo, euismod ulciscor. Bene enim vulputate enim, nisl illum patria. Enim te, verto euismod in nisl lucidus. Capio incassum quadrum nunc ex proprius praesent et quod. Autem in commoveo similis nostrud turpis paulatim quadrum, tristique. /p

    Letras capitulares de texto sin formato
    Las letras capitulares de texto sin formato se pueden lograr con solo unas pocas líneas de CSS. Hasta que la tipografía web avance y el @font-faceestándar sea más ampliamente compatible, esta es probablemente la forma más fácil de lograr letras mayúsculas. Ver demostración .

    Aquí está el CSS:

    .dropCap { float: left; font-size: 5em; line-height: 0.9em; padding: 0 5px 0 0; font-family: Georgia, "Times New Roman", Times, serif;}

    Para mejorar su texto sin formato, consulte los siguientes tutoriales sobre mejora:

     

    • Crea un efecto tipográfico con CSS Text-Shadow
    • Efecto de texto degradado CSS

    Mayúsculas de reemplazo de texto
    Aquí, simplemente reemplazamos una imagen por una letra, usando una combinación de text-indentuna imagen de fondo. Ver demostración .

    Aquí está el CSS:

    .dropCap { text-indent: -99999px; background: url(drop_cap_e.gif) no-repeat left 5px; height: 50px; width: 55px; float: left; display: block;}

    Si bien esta técnica es perfecta para la publicación de Jason (porque usa solo una letra capitular), si planeas usar varias letras mayúsculas, deberías considerar el uso de sprites CSS . Mark Boulton ofrece un gran ejemplo de esta técnica.

    Letras capitales basadas en jQuery
    Hace unos años, Karl Swedberg de LearningjQuery.com introdujo una forma increíble de incorporar letras mayúsculas usando jQuery. Tenga en cuenta que usar jQuery con fines de presentación puede no ser una buena idea y contradice la estricta separación entre las capas de presentación y comportamiento, pero de todos modos resuelve el problema. Es posible que desee consultar el complemento de mayúsculas de Karl Swedberg que hace un mejor trabajo al mantener separadas las capas de presentación y comportamiento simplemente envolviendo un lapso alrededor de la primera letra (con las clases apropiadas). De esa manera puedes diseñar la letra como quieras con CSS. Consulte también los tutoriales a continuación: Recetas faciles y rápidas

    • Letra mayúscula elegante - Parte 1
    • Letra mayúscula elegante - Parte 2
    • Múltiples mayúsculas elegantes

    3. Notas a pie de página

    Las notas a pie de página son otra parte interesante de la publicación de Jason. La franja roja que sangra a lo largo de la página realmente acentúa bien las notas a pie de página aquí.

    Esa franja roja sangrante se puede lograr anidando dos etiquetas DIV: el DIV principal, que contiene una imagen de fondo repetida (ubicada en la parte inferior), y un segundo DIV, que es el contenedor fijo real donde se encuentra el contenido. De esta manera, la franja roja sigue el final del contenido y se alinea perfectamente con las notas a pie de página.

    3. Flujo de texto

    Al igual que Jason Santa María, Dustin Curtis tiene su propia manera de darle a cada publicación un estilo único. En el siguiente ejemplo, puede ver la forma interesante en la que el texto fluye a lo largo de la página junto a las imágenes de la resonancia magnética. Esta técnica es bastante sencilla de realizar y es un buen uso del posicionamiento relativo.

    ¿Cómo se hace esto? El flujo de texto que se ve en el diseño de Dustin se puede lograr dando a cada bloque de texto una posición relativa, un ancho fijo y coordenadas fijas. Su publicación tiene una combinación de fondos grandes, reemplazo de texto y bloques de texto relativamente posicionados.

    HTML de muestra:

    p strongAt its core, it is the "artful" hemisphere./strong Abstract thinking, intonation and rhythm of language, artistic ability, and the perception of joy from music are centered here. The right hemisphere specializes in thinking about big picture ideas and overarching themes holistically instead of linearly./p

    Aunque normalmente no se recomiendan los estilos en línea, esta sería una rara excepción. Cree un nombre de clase global para el estilo predeterminado de todos los bloques de texto (margen, relleno, tamaño del texto, color, etc.) y utilice estilos en línea para el diseño específico de la página (coordenadas, ancho, etc.). Ver demostración .

     

    CSS:

    .textflow { font-size: 1.2em; color: #2d2d2d; margin: 20px 0; padding: 5px 0; position: relative;}

    HTML:

    div pAd, natu virtus, ut ea, tristique aptent illum iustum abigo ad vulputate gravis melior quae./p /div

    Tutoriales de posicionamiento CSS:

    • Posicionamiento CSS
    • Posicionamiento absoluto, relativo y fijo: ¿en qué se diferencian?
    • Detener el pánico por el posicionamiento CSS (Parte 1)
    • Dominar la codificación CSS: introducción

    4. Desglose del carrusel combinado

    En Technikwürze hemos encontrado un carrusel con una combinación de efectos de animación. Este no es un carrusel cualquiera. Para este ejemplo, en lugar de repasar técnicas específicas, analizaremos la lógica detrás de este carrusel único.

    ¿Cómo se hace esto? Como puede ver, al hacer clic en la miniatura de un miembro, se activan tres animaciones principales:

    1. La biografía del miembro se desliza horizontalmente,
    2. La imagen de perfil se desliza verticalmente,
    3. La cuadrícula de fotos de los miembros se actualiza y la altura del contenedor se ajusta.

    Para comenzar, los perfiles de los miembros completos aparecen flotando para que aparezcan uno al lado del otro. Usamos overflow: hidden;para enmascarar los perfiles no activos. Aquí hay una demostración visual de la lógica de este carrusel:

    1. Animación horizontal
    Cada vez que se hace clic en una miniatura, jQuery calcula cuánto deben deslizarse los perfiles. Este es el clásico efecto de carrusel deslizante horizontal .

    2. Animación vertical
    Una vez que el perfil activo se desliza a su posición, la imagen del perfil se desliza hacia abajo. Para empezar, todas las imágenes de perfil se colocan -190pxencima del marco. Cuando jQuery detecta que se ha activado la animación horizontal, desliza la imagen de perfil hacia abajo.

    3. Animación vertical
    Durante la transición al perfil activo, se calcula su altura y se ajusta el contenedor. De esta forma, el recipiente se mantiene ajustado y no deja ningún exceso de espacio en blanco en el fondo.

    Tutoriales y complementos de carrusel:

    • Carrusel infinito de jQuery
    • Crea un carrusel infinito simple con jQuery
    • Crea un carrusel infinito simple con jQuery
    • Control deslizante de coda

    Degradación agraciada

    El equipo de Technikwürze también implementó una opción alternativa para este carrusel. Con un uso inteligente de CSS, diseñó esta página para que todo lo basado en JavaScript quede oculto. La página resultante es limpia y accesible para todos los usuarios.

    5. Hermosas calificaciones tipográficas basadas en CSS

    En Web Appstorm , tenemos una forma interesante de mostrar calificaciones con CSS. Este sistema basado en CSS se puede lograr utilizando un posicionamiento absoluto y una imagen de máxima calificación.

     

    ¿Cómo se hace esto? Aquí está el HTML y CSS:

    span8/spanimg src="https://web.appstorm.net/wp-content/themes/appstorm_v2/images/ten.gif"
    .tabdiv .the_score { font-family: "Myriad Pro", Helvetica, Arial, sans-serif; font-size: 110px; line-height: 110px; font-weight: bold; position: absolute; top: 30px; right: 100px; color: #262626; text-align: center; letter-spacing: -17px;}.tabdiv .ten { position: absolute; top: 80px; right: 45px;}

    ¿Cómo se hace esto? Como puede ver, al hacer clic en la miniatura de un miembro, se activan tres animaciones principales:

    1. La biografía del miembro se desliza horizontalmente,
    2. La imagen de perfil se desliza verticalmente,
    3. La cuadrícula de fotos de los miembros se actualiza y la altura del contenedor se ajusta.

    Para comenzar, los perfiles de los miembros completos aparecen flotando para que aparezcan uno al lado del otro. Usamos overflow: hidden;para enmascarar los perfiles no activos. Aquí hay una demostración visual de la lógica de este carrusel:

    1. Animación horizontal
    Cada vez que se hace clic en una miniatura, jQuery calcula cuánto deben deslizarse los perfiles. Este es el clásico efecto de carrusel deslizante horizontal .

    2. Animación vertical
    Una vez que el perfil activo se desliza a su posición, la imagen del perfil se desliza hacia abajo. Para empezar, todas las imágenes de perfil se colocan -190pxencima del marco. Cuando jQuery detecta que se ha activado la animación horizontal, desliza la imagen de perfil hacia abajo.

    3. Animación vertical
    Durante la transición al perfil activo, se calcula su altura y se ajusta el contenedor. De esta forma, el recipiente se mantiene ajustado y no deja ningún exceso de espacio en blanco en el fondo.

    Tutoriales y complementos de carrusel:

    • Carrusel infinito de jQuery
    • Crea un carrusel infinito simple con jQuery
    • Crea un carrusel infinito simple con jQuery
    • Control deslizante de coda

    Degradación agraciada

    El equipo de Technikwürze también implementó una opción alternativa para este carrusel. Con un uso inteligente de CSS, diseñó esta página para que todo lo basado en JavaScript quede oculto. La página resultante es limpia y accesible para todos los usuarios.

    5. Hermosas calificaciones tipográficas basadas en CSS

    En Web Appstorm , tenemos una forma interesante de mostrar calificaciones con CSS. Este sistema basado en CSS se puede lograr utilizando un posicionamiento absoluto y una imagen de máxima calificación.

    ¿Cómo se hace esto? Aquí está el HTML y CSS:

    span8/spanimg src="https://web.appstorm.net/wp-content/themes/appstorm_v2/images/ten.gif"
    .tabdiv .the_score { font-family: "Myriad Pro", Helvetica, Arial, sans-serif; font-size: 110px; line-height: 110px; font-weight: bold; position: absolute; top: 30px; right: 100px; color: #262626; text-align: center; letter-spacing: -17px;}.tabdiv .ten { position: absolute; top: 80px; right: 45px;}

    Solución alternativa

    Si desea que la calificación máxima varíe, puede lograr este efecto utilizando el siguiente método alternativo.

    HTML:

    div span8/span span10/span/div

    CSS:

    Como puede ver, .maxestá en posición absoluta, tiene un fondo transparente y está en capas encima .rating. De esa manera, si necesita ajustar la calificación máxima, podrá hacerlo sin modificar ninguna imagen.

    .ratingblock{ position: relative; height: 100px;}.ratingblock .rating { font-size: 8em; padding: 0 5px;}.ratingblock .max{ display: block; background: url(rating_bg.gif) no-repeat; position: absolute; top: 0; left: 0; font-size: 5em; width: 50px; height: 60px; padding: 40px 0 0 50px;}

    Pensamientos finales

    Al examinar las técnicas que otros han utilizado para lograr resultados únicos e inspiradores, ampliamos nuestra base en diseño web. Es una excelente manera de aprender y esforzarnos a niveles cada vez más altos. ¡Quédate con hambre y sigue aprendiendo!

    (Alabama)Explora más en

    • Codificación
    • CSS
    • javascript
    • Técnicas





    Tal vez te puede interesar:

    1. Diez soluciones útiles de codificación CSS/JS para desarrolladores web
    2. Encuentre la solución JavaScript adecuada con una prueba de 7 pasos
    3. Cómo solucionar problemas de cambio de diseño acumulativo (CLS)

    5 soluciones de codificación útiles para diseñadores y desarrolladores

    5 soluciones de codificación útiles para diseñadores y desarrolladores

    ¡Registro! SmashingConf Nueva York 2024 Índice 1. Diseñar una elegante línea de tiempo CSS

    programar

    es

    https://aprendeprogramando.es/static/images/programar-5-soluciones-de-codificacion-utiles-para-disenadores-y-desarrolladores-765-0.jpg

    2024-05-20

     

    5 soluciones de codificación útiles para diseñadores y desarrolladores
    5 soluciones de codificación útiles para diseñadores y desarrolladores

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20