25 titorías para mellorar imaxes con CSS e jQuery

CSS-3-box-shadow-image-hover-effects-image-styling-backgrounds-apparence-inspiration-add-shadow-border-make-images-stand-out

Ao mellorar as imaxes, podemos optar por facelo con Photoshop e despois montalo na páxina web ou tamén podemos escoller a opción B: faino coas técnicas HTML, CSS e Javascript dispoñibles.

Despois do salto hai moitas técnicas para mellorar as imaxes, case todas feitas con jQuery como base principal ou con CSS3 aproveitando os últimos estándares web, aínda que lembro que nese caso perdemos a compatibilidade con algúns navegadores.

Están en inglés pero son collidos ao voo, prometidos :)

Fonte | 1º WD

Imaxe redondeada CSS3 con jQuery

Aprende a axustar unha etiqueta de espazo ao redor do elemento de imaxe para conseguir imaxes redondeadas que se amosarán xusto en todos os navegadores modernos.

CSS-3-imaxe-redondeada-con-jQuery-imaxe-sobre-efectos-de-imaxe-estilo-fondos-aparencia-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

2.

Varios fondos e fronteiras con CSS 2.1

Aprende a usar pseudoelementos CSS 2.1 para proporcionar ata 3 lenzos de fondo, 2 imaxes de presentación de tamaño fixo e varios bordos complexos para un único elemento HTML.

Varios-fondos-bordos-css-2-imaxe-estilo-fondos-aparencia-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

3.

Consello rápido: varios bordos con CSS simple

Screencast rápido que mostra como conseguir varios bordos cun CSS sinxelo dese xeito engadindo máis profundidade aos teus deseños. Versión moito máis sinxela do tutorial anterior.

Consello rápido-múltiples-bordos-con-simples-css-imaxe-estilo-fondos-aparencia-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

4.

Varios bordos en elementos de tamaño dinámico con CSS2

Terceira versión de Nicholas Gallagher amosándolle que facer se non fai o tamaño do elemento.

Varios-bordos-elementos-de-tamaño-dinámicos-con-css-2-imaxe-estilo-fondos-aparencia-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

5.

Divírtete con fronteiras: biseladas, presionadas e moito máis.

Aprende a conseguir un efecto premido con CSS e algúns simples trucos de estilo de bordo para obter varios efectos.

Divírtete-se-con-bordos-biselados-premidos-máis-estilo-de-fondo-de-aspecto-de-inspiración-engade-bordes-de-sombra-fai-imaxes-destacar

6.

Polaroids con CSS3

Aprende a usar algúns incribles CSS2 e CSS3 para converter unha lista de imaxes doutro xeito sen pretensións nun conxunto completo de imaxes Polaroid.

Polaroids-css-3-image-styling-fondos-aspecto-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

7.

Imaxe de fondo de páxina completa perfecta

Aprende a engadir imaxe de fondo con CSS que enche a páxina enteira con imaxe, sen espazo en branco, escala a imaxe segundo sexa necesario, non causa barras de desprazamento e moito máis.

Perfecto-full-page-background-image-hover-effects-image-styling-backgrounds-apparence-inspiration-add-shadow-border-make-images-stand-out

8.

Efectos de sombra e desprazamento de imaxe de caixa CSS3

Explore unha nova forma de engadir efectos de sombra coa edición dunha folla de estilo.

CSS-3-box-shadow-image-hover-effects-image-styling-backgrounds-apparence-inspiration-add-shadow-border-make-images-stand-out

9.

Efecto de desprazamento en miniatura de fantasía con jQuery

Consegue un bo efecto estilo flash con CSS e jQuery.

Fancy-thumbnail-hover-effect-with-jquery-image-styling-backgrounds-apparence-inspiration-add-shadow-border-make-images-stand-out

10.

Como crear un simple efecto de cambio de imaxe CSS

Neste tutorial aprenderás a crear un simple efecto de cambio de imaxe CSS cun estilo básico de HTML e CSS.

Como crear-simple-css-image-rollover-effect-image-hover-effects-image-styling-backgrounds-look-inspiration-add-shadow-border-make-images-stand-out

11.

Flotutorial

Floatutorial lévate a través dos elementos básicos de elementos flotantes como imaxes, maiúsculas, botóns de seguinte e atrás, galerías de imaxes, listas en liña e deseños de varias columnas. Consulte 4 tutoriais dedicados á imaxe flotante.

Floatutorial-imaxe-estilo-fondos-aspecto-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

12.

Snazzy Hover Effects usando CSS

Neste tutorial, revisará a creación de técnicas avanzadas flexibles de desprazamento mediante propiedades CSS2.1.

Snazzy-hover-effect-using-css-image-styling-fondos-aspecto-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

13.

Rollovers rápidos sen

Precarga

Cando se usa o cambio de imaxe CSS, hai que cargar dúas, tres ou máis imaxes (e a miúdo precargarse para obter os mellores resultados). Aprende a colocar todos os estados nunha soa imaxe e fai que os cambios dinámicos sexan máis rápidos e non requiran precarga.

Cambios rápidos sen precarga de imaxe de estilo de fondo-aspecto-inspiración-engadir sombra-bordos-facer-imaxes-destacar

14.

jQuery Cantos redondeados

Moitos efectos jQuery para cantos redondeados e moito máis patróns.

Cantos redondeados-jquery-imaxe-estilo-fondos-aspecto-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

15.

Consello de información máis sinxelo e previsualización de imaxes mediante jQuery

Vexa 3 exemplos de uso do script de vista previa de rollover de jQuery. Este sinxelo guión pódese aplicar con diversos propósitos.

Consello de ferramentas máis sinxelo-previsualización-usando-jQuery-imaxe-estilo-fondos-aparencia-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

16.

Superdimensionado: fondo de pantalla completa /

Presentación

Complemento jQuery

Superzided é un complemento jQuery que redimensiona as imaxes para encher o navegador mantendo a relación de dimensión da imaxe e cicla as imaxes / fondos mediante presentación de diapositivas con transicións e precarga.

Presentación de diapositivas de fondo de pantalla completa de tamaño grande e complementos de complementos-de-imaxe-de-estilo-de-fondos-de-aspecto-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

17.

Superposición PNG

Algunha vez atopou o problema de crear un sitio con imaxes dadas polo cliente, só para atopar despois despois de actualizar a súa fotografía o aspecto orixinal que non se conserva? Esta solución implica a creación dunha superposición PNG transparente que se pode usar como máscara / marco en JPEG ou GIF regulares. Deste xeito, pódese configurar unha instalación CMS típica para que os usuarios poidan cargar fotos sen ter que preocuparse de usar ningún programa gráfico para aplicar filtros.

Png-superposición-de-imaxe-de-estilo-de-fondos-de-aspecto-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

18.

BeZoom

Peso lixeiro

JQuery

Extensión de zoom

BeZoom é unha alternativa sinxela e lixeira para JQZoom. É máis lixeiro e é máis fácil de usar.

Bezoom-light-jquery-zoom-plugin-image-styling-fondos-aspecto-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

19.

Usando jQuery para animacións de imaxe de fondo

Xoga con jQuery e cambia a posición da imaxe de fondo para crear o tipo de efecto que buscas. Hai un novo artigo que responde a "Como manexo os estados activos?" - Manexo do estado activo para fondos animados jQuery.

Usando-jquery-para-animacións-de-imaxe-de-fondo-estilo-de-fondo-de-aspecto-inspirador-engadir-sombra-bordos-facer-imaxes-destacar

20.

5 xeitos de condimentar as túas imaxes con CSS

Aquí tes algúns trucos sinxelos para engadir algo de sabor ás túas imaxes insípidas típicas. Usar Photoshop para estilizar cada imaxe pode ser tedioso e difícil de manter a longo prazo. Estas seguintes técnicas CSS axudarán a aliviar esa dor.

Formas de condimentar as túas imaxes con css-image-styling-background-apparence-inspiration-add-shadow-border-make-images-stand-out

21.

Como:

Redimensionable

Imaxe de fondo

Aprende a configurar unha imaxe de fondo redimensionable con CSS. Tes 3 opcións para escoller.

Como redimensionar-a-imaxe-de-fondo-estilizar-os-fondos-de-aspecto-inspirar-engadir-sombra-bordos-facer-imaxes-destacar

22.

Estila as túas ligazóns de imaxe

Facer que os usuarios saiban que a sección específica do noso sitio web na que se fai clic é mellor conseguila mediante o efecto sobre o rato. Esas seccións "premibles" inclúen certamente imaxes de contido. Image Link é un script que permite aplicar un estilo adicional ás súas ligazóns de imaxe.

Estilo-a-imaxe-ligazóns-imaxe-estilo-fondos-aspecto-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

23.

Múltiples imaxes de fondo con CSS

Ás veces, ten máis sentido usar imaxes de fondo que inserilas directamente na páxina. E aínda que cada elemento, como a etiqueta corporal, pode conter só unha imaxe de fondo, pódense aplicar a varios elementos.

Múltiples-imaxes-de-fondo-con-css-imaxe-de-estilo-de-fondos-aparencia-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

24.

Bordos de imaxe con CSS

Un tutorial moi sinxelo que mostra como engadir un bordo sólido ás imaxes usando CSS.

Imaxes-bordos-con-css-imaxe-estilo-fondos-aparencia-inspiración-engadir-sombra-bordos-facer-imaxes-destacar

25.

Sprites CSS sen usar imaxes de fondo

Aprende a aplicar o efecto de desprazamento sen moito coñecemento sobre os sprites CSS.

Sprites CSS-sen-usar-imaxes-de-fondo-imaxe-estilo-fondos-aparencia-inspiración-engadir-sombra-bordos-facer-imaxes-destacar


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

Sexa o primeiro en opinar sobre

Deixa o teu comentario

Enderezo de correo electrónico non será publicado.

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.

bool (verdadeiro)