avox
Nome: Rubs [ Hiatus 4eva ]
Status: Usuário
Sexo: Feminino
Localização: Belem - PA
Aniversário: 23 de Maio
Cadastro:
Status: Usuário
Sexo: Feminino
Localização: Belem - PA
Aniversário: 23 de Maio
Cadastro:
avox
[centro]
[img]https://i.imgur.com/KOQgF9i.gif[/img]
[url=https://spiritfanfics.com/personalizar/betas][img]http://i.imgur.com/L5vbWx3.gif[/img][/url] [url=https://spiritfanfics.com/personalizar/aulas][img]http://i.imgur.com/aOxv8LG.gif[/img][/url] [img]http://i.imgur.com/eOIjWu5.png[/img]
[url=https://avox-edits.tumblr.com/][img]http://i.imgur.com/4LYJJNM.png[/img][/url]
[/centro]
[img]http://i.imgur.com/rLcdKft.png[/img]
MÓDULO 2: UTILIZANDO O FONT-FACE Como (não) dar aulas de Style
Postado
Oi, bolinhos,
É bem óbvio que não sou mais Beta Style, realmente pensei em parar com as minhas aulas, para não atrapalhar os novos betas (eles são incríveis, já disse isso? Todos eles), mas recebi apoio de muitas pessoas e acabei decidindo continuar, por ser algo que amo e algo que fiz por mim, como Rúbia e não como Beta.
Então, eu fiquei muito surpresa com o sucesso da primeira aula, muita gente comentou e eu tentei ao máximo respondendo quando via, acho que respondi todas.
Recebi alguns pedidos sobre futuras aulas, eu optei pelo "Font-face", que é algo que todo mundo pensa que é um bicho de sete cabeças, mas depois que você aprende é um amorzinho.
Hoje eu vou ensinar uma coisinha que vem chamando atenção da galera dos Styles, o famoso “font-face”.
Nesta aula eu ensinarei como exportar esse link necessário e colocar ela no modelo para você poder utilizar-se do font-face.
Primeiro você precisa se familiarizar com o Google Fonts . É de lá que retiro as fontes que desejo usar, há um grande catálogo, você pode explorar, vai ver que tem como buscar por nome e tudo mais, a fonte que eu vou usar é do meu style Let me in , o nome dela é Homemade Apple.
Com a URL copiada, você vai no seu navegador e cola ela na barra de pesquisa, então vai gerar um resultado. Como esses códigos que colocamos no bloco de notas.
E aí está nosso pote de ouro. Você copia ele e pode colar no topo do seu modelo.css, alguns são mais extensos que outros, não se assustem. Eu uso um editor diferente, mas é o mesmo efeito de vocês colocarem no bloco de notas ou no próprio site:
Vamos para algumas considerações que eu fiz no processo.
Eu troquei algumas configurações de como era esse meu título do menu direito para exemplificar para vocês, pois achei que no menudireito ficaria mais fácil de entender. É o seguinte, vocês notaram que eu tirei propriedades que deixavam tudo em caixa alta, pois com essas letras cursivas elas realmente não combinam, normalmente eu também preciso aumentar o tamanho delas já que elas não ficam bem definidas pequeninas.
E não esqueçam que mesmo eu tendo colocado ela no menudireito, vocês podem colocá-las em qualquer lugar, recomendo o uso do "!important", e cuidado para não quebrarem nenhuma regra de legibilidade do canal.
O resultado final foi este aqui:
Os códigos usados foram estes aqui:
@font-face {
font-family: 'Homemade Apple';
font-style: normal;
font-weight: 400;
src: local('Homemade Apple Regular'), local('HomemadeApple-Regular'),
url(https://fonts.gstatic.com/s/homemadeapple/v8/yg3UMEsefgZ8IHz_ryz86IpVThvdH1ZERIrfWb3R7t4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
.boxMenuDireito .tituloMenuDireito {
background:#d6ebc5;
color:#000;
border-bottom: 1px solid #c6e0b2;
font-size: 16px!important;
font-family:Homemade Apple!important;
letter-spacing: 2px;
border-radius: 0px;
TEXT-shadow: 1px 1px #fff;
font-weight: bolder;
padding: 3px;
letter-spacing: 1px;
border-radius: 0px;
width: 230px;
border-top: 10px solid #f7f7f7;
border-bottom: 10px solid #f7f7f7;
text-align: left;
}
Permalink Comentários (13)
Oi, bolinhos,
Mostrar Spoiler: Esclarecimentos
É bem óbvio que não sou mais Beta Style, realmente pensei em parar com as minhas aulas, para não atrapalhar os novos betas (eles são incríveis, já disse isso? Todos eles), mas recebi apoio de muitas pessoas e acabei decidindo continuar, por ser algo que amo e algo que fiz por mim, como Rúbia e não como Beta.
Então, eu fiquei muito surpresa com o sucesso da primeira aula, muita gente comentou e eu tentei ao máximo respondendo quando via, acho que respondi todas.
Recebi alguns pedidos sobre futuras aulas, eu optei pelo "Font-face", que é algo que todo mundo pensa que é um bicho de sete cabeças, mas depois que você aprende é um amorzinho.
CONTINUEM MANDANDO SUGESTÕES DE AULAS
~ Estarei novamente respondendo os comentários de quaisquer dúvidas
~ Estarei novamente respondendo os comentários de quaisquer dúvidas
Mostrar Spoiler: MÓDULO 2: utilizando o font-face
Hoje eu vou ensinar uma coisinha que vem chamando atenção da galera dos Styles, o famoso “font-face”.
Bom, antes de mais nada, nós sabemos que dá para mudar a propriedade das fontes dos Styles no spirit. Isso é bem facinho e estamos acostumados a fazer usando o “font-family”.
O grande “X” da questão, é que o font-family recorre à suas fontes já instaladas no computador, por isso recomendamos sempre que vocês usem fontes próprias do Windows. Dessa forma, é muito comum vermos “font-family: Arial!important;” ou então “font-family: calibri!important”.
Como exemplo o título do menu direito deste meu style (Spring Day), dá para visualizar o usual para modificar a fonte, onde está selecionado:
O grande “X” da questão, é que o font-family recorre à suas fontes já instaladas no computador, por isso recomendamos sempre que vocês usem fontes próprias do Windows. Dessa forma, é muito comum vermos “font-family: Arial!important;” ou então “font-family: calibri!important”.
Como exemplo o título do menu direito deste meu style (Spring Day), dá para visualizar o usual para modificar a fonte, onde está selecionado:
Muita gente acredita piamente que só se pode usar fontes do Windows, já que se o seu computador não reconhecer a fonte ele adapta ela para a que ele considera mais familiar, logo: não fica a fonte que você deseja.
Porém, com o “font-face” podemos usar fontes diferentes destas, desde que nós tenhamos os códigos da url dela. O Google Fonts hospeda uma boa quantidade de fontes diferenciadas que você pode estar usando.
Vemos aqui alguns exemplos (basta clicar na imagem que você é redirecionado ao style):
Porém, com o “font-face” podemos usar fontes diferentes destas, desde que nós tenhamos os códigos da url dela. O Google Fonts hospeda uma boa quantidade de fontes diferenciadas que você pode estar usando.
Vemos aqui alguns exemplos (basta clicar na imagem que você é redirecionado ao style):
Nesta aula eu ensinarei como exportar esse link necessário e colocar ela no modelo para você poder utilizar-se do font-face.
Vamos Praticar:
Primeiro você precisa se familiarizar com o Google Fonts . É de lá que retiro as fontes que desejo usar, há um grande catálogo, você pode explorar, vai ver que tem como buscar por nome e tudo mais, a fonte que eu vou usar é do meu style Let me in , o nome dela é Homemade Apple.
Você aperta nesse botãozinho de (+), daí irá abrir um pop-up no inferior da tela, nele você pode verificar os detalhes da fonte, aliás, pode adicionar várias fontes ao mesmo tempo, como um “carrinho de compras” e depois selecionar a que mais lhe interessa.
Você vai ver isso aqui:
Você vai ver isso aqui:
A partir daí você tem que clicar no @IMPORT para poder ter acesso ao url da fonte, ignore todos esses outros elementos, até dá para usar quando se edita html, porém não nos interessa no Spirit.
Entenderam? Apenas o link destacado, sem nem mesmo as aspas.
Cuidado, Se você estiver no “Standard” também aparecerá códigos que podem lhe confundir, NÃO É DELE QUE VOCÊS PRECISAM. Por isso vocês NECESSITAM ir para o @import, é ali que está a url da fonte.
Entenderam? Apenas o link destacado, sem nem mesmo as aspas.
Cuidado, Se você estiver no “Standard” também aparecerá códigos que podem lhe confundir, NÃO É DELE QUE VOCÊS PRECISAM. Por isso vocês NECESSITAM ir para o @import, é ali que está a url da fonte.
Com a URL copiada, você vai no seu navegador e cola ela na barra de pesquisa, então vai gerar um resultado. Como esses códigos que colocamos no bloco de notas.
CLIQUE NA IMAGEM PARA AMPLIAR
E aí está nosso pote de ouro. Você copia ele e pode colar no topo do seu modelo.css, alguns são mais extensos que outros, não se assustem. Eu uso um editor diferente, mas é o mesmo efeito de vocês colocarem no bloco de notas ou no próprio site:
CLIQUE NA IMAGEM PARA AMPLIAR
Vamos para algumas considerações que eu fiz no processo.
Eu troquei algumas configurações de como era esse meu título do menu direito para exemplificar para vocês, pois achei que no menudireito ficaria mais fácil de entender. É o seguinte, vocês notaram que eu tirei propriedades que deixavam tudo em caixa alta, pois com essas letras cursivas elas realmente não combinam, normalmente eu também preciso aumentar o tamanho delas já que elas não ficam bem definidas pequeninas.
E não esqueçam que mesmo eu tendo colocado ela no menudireito, vocês podem colocá-las em qualquer lugar, recomendo o uso do "!important", e cuidado para não quebrarem nenhuma regra de legibilidade do canal.
O resultado final foi este aqui:
Os códigos usados foram estes aqui:
@font-face {
font-family: 'Homemade Apple';
font-style: normal;
font-weight: 400;
src: local('Homemade Apple Regular'), local('HomemadeApple-Regular'),
url(https://fonts.gstatic.com/s/homemadeapple/v8/yg3UMEsefgZ8IHz_ryz86IpVThvdH1ZERIrfWb3R7t4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
.boxMenuDireito .tituloMenuDireito {
background:#d6ebc5;
color:#000;
border-bottom: 1px solid #c6e0b2;
font-size: 16px!important;
font-family:Homemade Apple!important;
letter-spacing: 2px;
border-radius: 0px;
TEXT-shadow: 1px 1px #fff;
font-weight: bolder;
padding: 3px;
letter-spacing: 1px;
border-radius: 0px;
width: 230px;
border-top: 10px solid #f7f7f7;
border-bottom: 10px solid #f7f7f7;
text-align: left;
}
Qualquer dúvida e/ou sugestões, estou por aqui.
com amor, Avoxynha <3
com amor, Avoxynha <3
Permalink Comentários (13)
[01/12/2017] Daqui até o céu e mais uns 4 metros e meio.
[19/11/2017] [MÓDULO 1: ESTILOS DE NAV] Como (não) dar aulas de style
[14/11/2017] Como (não) dar aulas de Style
[28/09/2017] Senta aqui e vamos conversar
Atualizações do Usuário
@bubblegguk vou voltar lá depois de anos então, poxa adoro as histórias dela. Vc sabe algo sobre o drawmuky?
Assinatura
Darth Rubs on League of Legends
나는 민용용을 사랑한다.
icon. ladyvic
