Showing posts with label animespirit. Show all posts
Showing posts with label animespirit. Show all posts
Sunday, February 12, 2017
PARTE 4 COMO FAZER UM CSS STYLE PARA ANIMESPIRIT SOCIALSPIRIT
PARTE 4 COMO FAZER UM CSS STYLE PARA ANIMESPIRIT SOCIALSPIRIT
5° Aula
Oi Brasil. o/
Eu sei, demorei um pouco... Motivo? Estava esperando as aulas terem uma certa quantidade de visualizações. Não adianta eu mandar aula atrás de aula e ninguém ver.
Mas enfim, o importante é que a aula está aqui!!
Só um lembrete; já mostrei/ensinei como conseguimos os códigos de cores no Photoshop, e como pega os da tabela de cores. Caso não saiba, aulas anteriores:
Primeira aula, clique aqui.
Segunda aula, clique aqui.
Terceira aula, clique aqui.
Nesta aula, vou está ensinando a alterar o #baixo, #baixo a, .boxMenuDireito .tituloMenuDireito, .boxMenuDireito .textoMenuDireito, .boxMenuDireito img e .boxMenuDireito img:hover.
Muito confuso? Eu sei, na primeira vez também achei. AUSHAUSHAUH
Vamos a vídeo aula!
Veja:
Vamos lá!
Começarei pelo #baixo e #baixo a.
Alterei do jeito que quis e ficou com essas configurações:
#baixo {
border-top: transparent;
background: transparent;
color: #fefefe;
}
#baixo a {
color: #fefefe;
}
No meu caso, ficou assim:
-----------------------------------------------------------------
Agora vamos para o .boxMenuDireito.
O meu ficou assim:
.boxMenuDireito {
color:#D7575B;
}
.boxMenuDireito .tituloMenuDireito {
color:#fefefe;
font-size: 13px;
}
.boxMenuDireito .textoMenuDireito{
border:1px solid #370000;
background: transparent;
color:#fefefe;
}
Resultado final:
-----------------------------------------------------------------
Iremos para o .boxMenuDireito img.
No meu caso, eu adicionei um formato diferente.
Dei espaço entre o .boxMenuDireito img e .boxMenuDireito img:hover e escrevi .boxUsuario img{ e coloquei o código do tal formato.
.boxMenuDireito img{
border-radius: 0px;
}
.boxUsuario img {
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.boxMenuDireito img:hover{
border-radius: 0px;
}
Caso quiserem escolher formatos diferentes, acesse esse link. Explico mais detalhadamente sobre esse site e como funciona no vídeo. Mas basicamente, é só escolher o formato e copiar o código.
E é isso pessoal! Espero que tenham gostado! Qualquer coisa, é só comentar. Pode ser aqui ou no canal, sem problemas! <3
Go to link Download
Saturday, December 31, 2016
PARTE 2 COMO FAZER UM CSS STYLE PARA ANIMESPIRIT SOCIALSPIRIT
PARTE 2 COMO FAZER UM CSS STYLE PARA ANIMESPIRIT SOCIALSPIRIT
2° Aula
Olá pessoinhas! Tudo bem com vocês? Espero que sim! <3
Essa é a segunda parte da nossa série de Como fazer um CSS/STYLE para o Animespirit/Socialspirit. Se você ainda não viu a primeira parte, clique aqui.
Continuando... na segunda parte talvez seja um pouco mais complicado pois trabalhamos com algumas coisas a mais.
Porém, vou estar escrevendo o que cada um dos #algumacoisa representa, tudo bem? Vai ser uma representação com imagens, prints tirados do próprio vídeo. A explicação por escrita vai ser bem simples. A do vídeo é mais detalhada.
-----------------------------------------------------------
#base {
background: url(img/transparencia.png) no-repeat center top fixed;
border:2px solid #370000;
}
Representa o fundo. Onde está azul.
-----------------------------------------------------------
#fundo {
background:url(img/fundoDegrade.jpg) repeat-X left top;
}
Representa o fundo degradê. Onde está um cinza, puxando para o branco.
-----------------------------------------------------------
#nav {
background: #FAF7F5;
}
É a barrinha que fica em baixo do CimaLogo.
-----------------------------------------------------------
#nav a {
font-family: Arial;
color:#000;
}
Altera a cor e o tipo de fonte das letras que fica escrito Animes & Mangás, Bandas e Músicos, Cartoons... e daí vai com vários nomes.
-----------------------------------------------------------
#nav a:hover {
color: #ccc;
}
Altera a cor das letras quando passamos o mouse em cima.
No meu caso, eu adicionei um background para ficar com um quadradinho. Está tudo no vídeo.
-----------------------------------------------------------
#secaoNav {
background: #FAF7F5;
border:1px solid #EEE8E1;
}
Altera a cor da barra onde fica escrito; Spirit > Membros
-----------------------------------------------------------
#secaoNav, #secaoNav a {
font-size: 12px;
color: #D7575B;
}
Altera a cor e o tamanho das setinhas da mesma barra anterior.
-----------------------------------------------------------
E então? O que acharam? Ainda tem dúvidas? É só comentar! <3
Até a próxima, amores! :3
Go to link Download
Saturday, October 22, 2016
PARTE 3 COMO FAZER UM CSS STYLE PARA ANIMESPIRIT SOCIALSPIRIT
PARTE 3 COMO FAZER UM CSS STYLE PARA ANIMESPIRIT SOCIALSPIRIT
3° Aula
Opa, voltei! haha
Não demorei tanto u_u
Se você ainda não a primeira parte, clique aqui.
Se ainda não viu a segunda parte, clique aqui.
Se você ainda não a primeira parte, clique aqui.
Se ainda não viu a segunda parte, clique aqui.
Okay, nessa aula nós vamos estar alterando o #fundo, #base, #nav e o #secaoNav. Sim, nós já trabalhamos com essas partes porém, vou está ensinado um novo efeito. Se você quiser deixar somente com as cores e tal, tudo bem. Mas que tal um efeito transparente e/ou uma imagem de fundo, hm? Como nesse style [ainda não está pronto]:
Apesar de não estar pronto, as alterações que fiz estão bem bacanas, não é?
Então, nesse vídeo eu ensino a fazer tudo isso!
Veja:
Vamos para uma explicação básica, tudo bem? Como eu disse na vídeo, eu sei que fazer um CSS no começo pode ser complicado mas um dia, você aprende. E talvez essa explicação te ajude a entender melhor.
Primeiro, eu comecei editando o #fundo.
#fundo {
background:url(img/Harley2.jpg) no-repeat center top fixed;
}
Troquei onde está escrito fundoDegrade.jpg por nomedaminhaimgem.png que no caso, no tutorial em vídeo, ficou como Harley2.jpg. Lembrando que depois do . é o formato da imagem. Por exemplo, taylormomsen.jpg. JPG é um formato... assim como png, gif, etc. E claro taylormomsen é o nome da imagem.
A pequena configuração após os parenteses é a posição da foto de fundo. no-repeat é para não repetir. center top fixed é para a imagem ficar em seu estilo, normal, e fixada.
Ficou assim:
----------------------------------------------------------------
Agora, vamos editar o #base.
#base {
background: url(img/transparencia.png);
border:2px solid #370000;
}
Esse transparencia.png é uma imagem TOTALMENTE pintada de preto com a opacidade em 20%, mais ou menos e foi salva em PNG. Esta imagem foi feita do Photohop. Você pode estar fazendo no Photofiltre, editores online, etc. Eu usei o PS porque é o software em que eu sei mexer e com isso, acho mais simples, dá menos trabalho. Você pode está escolhendo o programa de sua preferência. Porém, se quiser aprender a como baixar, instalar e ativar o Photoshop, clique aqui. Lembrando que, a imagem TEM QUE SER SALVA EM PNG, caso contrário não irá funcionar.
Adicionei também uma pequena borda de 2px com a cor #370000 para a base ter um pequeno destaque a mais.
Ficou assim:
----------------------------------------------------------------
Vamos editar o #nav que é a barrinha que fica em baixo do CimaLogo.
#nav {
background: url(img/transparencia.png);
border:1px solid #370000;
}
No #nav eu apenas copiei do #base. Tanto o background quando o border.
Apenas modifiquei o tamanho da borda para 1px.
Fiz a mesma coisa no #nav a:hover.
#nav a:hover {
color: #5b5b5b;
background: url(img/transparencia.png);
}
E no #secaoNav.
#secaoNav {
background: url(img/transparencia.png);
border:1px solid #370000;
}
Veja como ficou:
Demais, não é? Eu adorei! <3
Ah, se não conseguiu entender o que #algumacoisa no CSS que foi feito nesta parte, por favor, vejas as aulas anteriores, lá vai está explicando sobre cada coisinha já editada nessa parte. Não vi necessidade de especificar tanto o que é pois já expliquei anteriormente. Clique aqui, para ver as aulas anteriores.
Se vocês ainda tiver alguma dúvida pode estar comentando aqui, ou no youtube mesmo.
Go to link Download
Monday, October 10, 2016
PARTE 1 COMO FAZER UM CSS STYLE PARA ANIMESPIRIT SOCIALSPIRIT
PARTE 1 COMO FAZER UM CSS STYLE PARA ANIMESPIRIT SOCIALSPIRIT
1° Aula
Essa é o primeiro vídeo aula da série "Como fazer/criar um CSS/Style para AnimeSpirit/SocialSpirit"
O animespirit, para quem não sabe, é uma rede social de fãs de anime, Animes, Mangás, Livros, Filmes, Seriados, etc.
No site, você pode ler, escrever fanfics, seguir, adicionar seus autores preferidos como amigos também. E sim, podemos bater um papo bacana, lá tem um chat bem simples.
Uma das coisas que mais gosto do site é da sua variedade de categorias e suas fanfics. No Animespirit tem autores incríveis! Tipo, incríveis mesmo! Não sei se posso estar citando seus nomes mas... são pessoas com um talento MARAVILHOSO para escrever.
E a outra é a oportunidade - se assim posso dizer - de personalizar o seu perfil como bem entender. Claro que há algumas regras em relação as imagens que serão utilizadas no CSS/Style mas isso não afeta é nada, praticamente.
Com todo esse meu amor pelo site, venho aqui, ensinar a vocês a como fazer um CSS/Style para o seu perfil! <3
Eu sei que tem MUITA gente que quer aprender porém tem suas dúvidas e/ou já assistiu vários tutoriais até mesmo as aulas do Spirit mas ainda está boiando.
Não se preocupem caros colegas, eu também fiquei assim durante um tempo. Até que aprendi.
É difícil? Não. É complicado, temos que ter paciência.
E para facilitar a sua vida, além de estar fazendo essa série, disponibilizo links de TUDO o que eu uso e claro, ensino tudo o que sei.
Resolvi está dividindo em partes pois fica mais fácil pra mim. Já tentei gravar um vídeo só ensinando como altera tudo só que além de ter durado quase duas horas, ficou com chiados/ruídos do microfone.
Vamos a nossa primeira aula!
Neste vídeo mostro a vocês como fazer/criar um CSS/Style pro Animespirit/Socialspirit. Lembrando que essa é a primeira parte, as outras virão em breve! Não se esqueçam de comentar, avaliar, favoritar e se inscrever. <3
Informações + Download:
Eu usei o Photoshop para fazer o CimaLogo.
Se você não o tem e quer aprender a como baixar, instalar e ativar o PS, clique aqui.
Quer aprender a baixar e a instalar o Photoscape? Clique aqui.
Caso você tenha ou não o Photoshop, e não quer usar o seus códigos de cores, clique aqui para acessar a tabela de cores.
Para baixar o CSS/style editável, clique aqui.
Quer ver o meu style? É bem simples, acesse esse link e clique em Aplicar style.
Quer aprender a como fazer uma capa para fanfic? Clique aqui.
Dúvidas? É só comentar! <3
Para ver a segunda parte da série, clique aqui.
Beijo, amores. Até a próxima! <3
Go to link Download
Subscribe to:
Posts (Atom)