Edição de imagem em puro CSS! [Naruto]

    Compartilhe

    LukasCelli
    Designer - Avançado
    Designer - Avançado

    Título : Web Designer fodinha
    Plataforma : PC
    Mensagens : 777
    Reputação : 42
    Idade : 20
    Localização : Na frente do PC
    Link : http://lucascelli.deviantart.com/

    Edição de imagem em puro CSS! [Naruto]

    Mensagem por LukasCelli em Dom 22 Jun 2014, 23:44


    Mas que exatamente é isso?

    Com apenas 3 imagens e muito CSS, pode-se fazer coisas incríveis, inclusive editar uma imagem por camadas, como é feito no Photoshop. Claro, é trabalhoso, mas dá pra fazer sim.

    O que eu fiz foi adicionar efeitos nas imagens com códigos em CSS, e posiciona-las também com CSS!

    Como comprovar que o efeito já não está na imagem.

    Arraste alguma imagem em outra aba do navegador e compare os efeitos.
    Aperte CTRL+U na página e veja o source.

    Qual a utilidade disso?

    Aqui, nenhuma, só estou postando na Showroom, mas em sites, usar efeitos assim pode trazer grandes melhorias e efeitos para o site, só por questão de beleza e design, aliás esse é o objetivo da coisa toda.


    Edições:
    29/06/2014 - Adicionado um pageLoader na página.


    Última edição por Junior_Djjr em Dom 29 Jun 2014, 16:45, editado 2 vez(es) (Razão : tava bugado)


    ____________________

    DAFacebookSteam



    Junior_Djjr
    Scripter CLEO - Avançado
    Scripter CLEO - Avançado

    Título : Junior, o periquito.
    Plataforma : PC
    Mensagens : 20422
    Reputação : 571
    Idade : 21
    Localização : Ibitinga - SP
    Link : www.MixMods.com.br

    Re: Edição de imagem em puro CSS! [Naruto]

    Mensagem por Junior_Djjr em Dom 22 Jun 2014, 23:57

    kkkkkkkkkkkkk q massa


    ____________________
    Evite o pensamento binário do verdadeiro ou falso; do certo ou errado. O mundo é muito mais complexo do que 1 bit.

    Fabio
    Programador - Avançado
    Programador - Avançado

    Título : CEO da Fabio's Gambiarra Industries
    Mensagens : 18287
    Reputação : 306
    Idade : 19
    Localização : Reserva, Paraná, Brasil, América Latina, America do Sul, América, Planeta Terra, Sistema Solar, Via láctea, Universo
    Link : gtamodvicio.blogspot.com

    Re: Edição de imagem em puro CSS! [Naruto]

    Mensagem por Fabio em Seg 23 Jun 2014, 00:04

    @Junior_Djjr escreveu:kkkkkkkkkkkkk q massa


    ____________________

    Modifico quase qualquer coisa.   :)
    ------------------>>>http://gtamodvicio.blogspot.com/<<<------------------

    Meu PC:
    Spoiler:

    Configurações PC:
    *Processador: Intel Core i7 4790K 4.00GHz LGA1150
    *Placa Mãe: GIGABYTE GA-H97M-D3H Intel (LGA1150)
    *HD: 1TB Seagate Barracuda 64MB Sata III 7200RPM (2x - RAID 0)
    *HD²: SAMSUNG M3 Externo USB 5400RPM 1TB
    *Placa de vídeo: Nvidia GTX660 2GB DDR5 192bit EVGA
    *RAM: 8GB DDR3 1600MHZ Kingston HYPER X BEAST (2x4GB)
    *Fonte: Corsair 600W Reais CX600M Modular - CP-9020060-WW (80 Plus Bronze)
    *Gabinete: Gabinete Raidmax Super Hurricane Branco - 248WB
    *Monitor: LG 23MP55HQ Full HD HDMI 23'

    Gabriel
    Veterano
    Veterano

    Título : Terrariano
    Plataforma : MALAKOI
    Mensagens : 7244
    Reputação : 64
    Idade : 16
    Localização : Cidade - Estado
    Link : /2012

    Re: Edição de imagem em puro CSS! [Naruto]

    Mensagem por Gabriel em Seg 23 Jun 2014, 00:42

    Como a inter net aqui é ruimzinha deu pra ver as 3 camadas carregando e deu de notar certinho :) 

    Dahora :)


    ____________________
    Assinatura por Jacobi


    Fabio
    Programador - Avançado
    Programador - Avançado

    Título : CEO da Fabio's Gambiarra Industries
    Mensagens : 18287
    Reputação : 306
    Idade : 19
    Localização : Reserva, Paraná, Brasil, América Latina, America do Sul, América, Planeta Terra, Sistema Solar, Via láctea, Universo
    Link : gtamodvicio.blogspot.com

    Re: Edição de imagem em puro CSS! [Naruto]

    Mensagem por Fabio em Seg 23 Jun 2014, 00:49

    Dá pra deixar a div da página hidden por padrão e colocar no body onload um call pra uma função JS que mostre a div da página quando for carregado :)


    ____________________

    Modifico quase qualquer coisa.   :)
    ------------------>>>http://gtamodvicio.blogspot.com/<<<------------------

    Meu PC:
    Spoiler:

    Configurações PC:
    *Processador: Intel Core i7 4790K 4.00GHz LGA1150
    *Placa Mãe: GIGABYTE GA-H97M-D3H Intel (LGA1150)
    *HD: 1TB Seagate Barracuda 64MB Sata III 7200RPM (2x - RAID 0)
    *HD²: SAMSUNG M3 Externo USB 5400RPM 1TB
    *Placa de vídeo: Nvidia GTX660 2GB DDR5 192bit EVGA
    *RAM: 8GB DDR3 1600MHZ Kingston HYPER X BEAST (2x4GB)
    *Fonte: Corsair 600W Reais CX600M Modular - CP-9020060-WW (80 Plus Bronze)
    *Gabinete: Gabinete Raidmax Super Hurricane Branco - 248WB
    *Monitor: LG 23MP55HQ Full HD HDMI 23'

    Junior_Djjr
    Scripter CLEO - Avançado
    Scripter CLEO - Avançado

    Título : Junior, o periquito.
    Plataforma : PC
    Mensagens : 20422
    Reputação : 571
    Idade : 21
    Localização : Ibitinga - SP
    Link : www.MixMods.com.br

    Re: Edição de imagem em puro CSS! [Naruto]

    Mensagem por Junior_Djjr em Seg 23 Jun 2014, 01:34

    ↑ sim


    ____________________
    Evite o pensamento binário do verdadeiro ou falso; do certo ou errado. O mundo é muito mais complexo do que 1 bit.

    LukasCelli
    Designer - Avançado
    Designer - Avançado

    Título : Web Designer fodinha
    Plataforma : PC
    Mensagens : 777
    Reputação : 42
    Idade : 20
    Localização : Na frente do PC
    Link : http://lucascelli.deviantart.com/

    Re: Edição de imagem em puro CSS! [Naruto]

    Mensagem por LukasCelli em Dom 29 Jun 2014, 14:17

    Coloquei um loader bem simples com jquery e css  LOL dps de 1 semana quase que eu venho a editar, pqp


    ____________________

    DAFacebookSteam



    Conteúdo patrocinado

    Re: Edição de imagem em puro CSS! [Naruto]

    Mensagem por Conteúdo patrocinado Hoje à(s) 11:06


      Data/hora atual: Ter 24 Jan 2017, 11:06