Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
35
respostas

"Rotação e cisalhamento"

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Transformações e atividade Rotação e cisalhamento

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Por que, quando eu aplico o display: inline-block, e também aplico a rotação e o skew, no meu código, ele toma uma distância das outras palavras?

Tem como botar foto por aqui? Seria mais fácil demonstrar.. Botarei o código, assim esperam que entendam melhor!

código como é:

.saudacao em {
    color: #851944;
    font-style:italic;
    font-size:2.6em;
    font-family:"Lobster", cursive;
}

código como deveria ficar!

.saudacao em {
    color: #851944;
    font-style: italic;
    font-size: 2.6em;
    font-family: "Lobster", cursive;
    transform: rotate(-10deg) skew(-5deg);
    display: inline-block;

Só que quando executo o código acima, ele da um espaçamento muito grande das palavras, por que?! Como concerto?

35 respostas
por André Chaves
| 1967.1k xp | 2579 posts
Instrutor Lider técnico

E aí Allan de boas?

Você pode adicionar a imagem para eu dar uma olhada. Dá para adicionar ela utilizando o https://www.image-share.com/

Caso seu problema seja o display: inline-block, tem um post muito bom de um instrutor da caelum que explica de forma bem didatica como lidar com ele:

https://blog.frontux.com/pare-de-chutar-e-aprenda-como-funciona-o-display-inline-block-4e6cba2f19d4#.vtiz2ancu

[]'s

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Olha, eu fiz o upload. Só não se se deu certo kk Mas, o nome da imagem está "exercicioAlura"

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Você pode usar word-spacing, esta propriedade especifica o comportamento de espaçamento entre as tags e palavras.

Exemplo de uso:

word-spacing: normal; word-spacing: 3px; word-spacing: 0.3em; word-spacing: 50%; word-spacing: 200%; word-spacing: inherit; word-spacing: initial; word-spacing: unset;

Adicione em seu codigo .saudacao em { color: #851944; font-style: italic; font-size: 2.6em; font-family: "Lobster", cursive; transform: rotate(-10deg) skew(-5deg); display: inline-block; word-spacing: -2px;

Ajuste o valor para negativo, assim você reduz o espaço entre as palavras. Outra propriedade parecida é o letter-spacing que faz o mesmo porem com letras.
por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Ericsson, agradeço pela nova tag haha! Mas o problema está assim, vou tentar ilustrar para você!

"e eu construo ------------------------ SITES MARAVILHOSOS" (-- são os espaços)

E quando aplico essa tag que você me mostrou, ele só reduz a letra e não o espaço :/.

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Allan mais está errado alguma coisa ai, pois testei aqui com esta mesma estilização e funciona perfeito. Pois essa PROPRIEDADE não deveria mudar tamanho de fonte.

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

O que poderia ser? já tentei de toda maneira jogar ele pro lado!

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

entendi agora, você esta criando um menu ou algo parecido? Ela vai mudar o espaçamento entre elementos em um paragrafo e não uma lista .

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Por que não trabalhar com FLEX-BOX? Você usa?

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Eu nem sei o que é FLEX-BOX, haha, poderia explicar?

Exato! É meio que um menu, e quando adicionei a rotação nele, os espaçamentos mudaram!

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Eu aprendi recentemente trabalhar com flex-box, nele você pode esquecer, float, padding, margim etc. Tudo se ajeita sem problemas com espaçamento ou responsividade, veja este vídeo

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

é um pouco complicado no começo e você quase não encontrará conteúdo em português. Só que te garanto uma coisa: Elimina muito código em sua pagina e é muito fluido depois que você intende a lógica da coisa

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Estou assistindo aqui, e já te passo um feedback!

Mas, já agradeco Ericsson, está sendo de grande ajuda!

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Este aqui é bem mais detalhado eu localizei no meu histórico do YouTube:

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Ericsson, acabei de ver o primeiro vídeo e achei muito bacana mesmo! Mas, ainda não conseguir solucionar o espaço das letra, mesmo utilizando o display: flex;

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Você enviar seu a parte de seu html? Pode alterar o que quiser.

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Vou mandar o HTML e CSS, ok?

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

HTML

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <title>João da Silva - Desenvolvedor Web</title>
    <link rel="icon" href="../img/favicon.png">
    <link rel="stylesheet" href="../CSS/reset.css">
    <link rel="stylesheet" href="../CSS/sobreMim.css">
    <link rel="stylesheet" href="../CSS/index.css">
    <link rel="stylesheet" href="../CSS/portifolio.css">
    <link rel="stylesheet" href="../CSS/blog.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Shadows+Into+Light">


</head>
<body>
    <header class="tituloPrincipalIndex">
      <div id="palavrasTitulo">
        <ul>
          <li class="palavra-home eficiencia">Eficiência</li>
          <li class="palavra-home boas-praticas">Boas práticas</li>
          <li class="palavra-home codigo-limpo">Código limpo</li>
          <li class="palavra-home css3">CSS3</li>
          <li class="palavra-home html5">HTML5</li>
          <li class="palavra-home javascript">JavaScript</li>
          <li class="palavra-home acessibilidade">Acessibilidade</li>
          <li class="palavra-home responsivo">Responsivo</li>
          <li class="palavra-home otimizacoes">Otimizações</li>
          <li class="palavra-home agilidade">Agilidade</li>
          <li class="palavra-home design">Design</li>
        </ul>
      </div>
        <img class="foto-home" src="../img/eu.jpg" alt="Foto de João da Silva">
        <h1>João da Silva</h1>
        <p class="subtitulo-principal">Desenvolvedor web</p>
    </header>
    <main>
        <section class="secao-inicio saudacao">
            <p class="saudacao"><span class="saudacao-inicio">Olá,</span> meu nome é <strong>João da Silva</strong> <span class="saudacao-ultima-linha">e eu construo <em>sites maravilhosos</em></span></p>
            <a class="botao-index" href="bio.html">Conheça mais um pouco sobre mim</a>
        </section>
        <section class="secao-inicio trabalhos">
            <h2>Trabalhos</h2>
            <ul>
                <li><img src="../portifolio/bmw.png" alt="Site da BMW"></li>
                <li><img src="../portifolio/ibm.png" alt="Site da IBM"></li>
                <li><img src="../portifolio/uol.png" alt="Site da UOL"></li>
            </ul>
            <a class="botao-index" href="portfolio.html">Veja mais</a>
        </section>
        <section class="secao-inicio blog">
            <h2>Blog</h2>
            <small class="posts-blog">Últimos posts</small>
            <ol>
                <li class="mais-recente">
                    <a href="oBlog.html">O essencial de design responsivo</a>
                    <p class="textoDoBlog">Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>
                </li>
                <li>
                    <a href="oBlog.html">Por que fazer páginas acessíveis?</a>
                </li>
                <li>
                    <a href="oBlog.html">JavaScript não obstrusivo</a>
                </li>
            </ol>
            <a class="botao-index" href="oBlog.html">Veja mais</a>
        </section>
    </main>
    <footer>
        <h2 class="subtitulo-footer">Vamos conversar?</h2>
        <p class="texto-footer">Você pode entrar em contato comigo <a href="contato.html">por e-mail</a> ou pelo telefone <a href="tel:+551234567890">(12) 3456-7890</a></p>
    </footer>
</body>
</html>
por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

CSS

html{
  font-size:100%;
}
.tituloPrincipalIndex{
  text-align:center;
  background-color:#851944;
  border-bottom:0.625em solid black;
}
header{
  position:relative;
}
.palavra-home{
  font-family:"Shadows Into Light", cursive;
  font-weight:bold;
  color:#D5447E;
  position: absolute;
}
.eficiencia {
  top: 20%;
  left: 75%;
  transform: rotate(8deg);
}
.boas-praticas{
  bottom:15%;
  left:19%;
  transform: rotate(-10deg);
}
.codigo-limpo{
  top:50%;
  left:10%;
  transform:rotate(7deg);
}
.css3{
  top:45%;
  left:30%;
  transform:rotate(-10deg);
}
.html5{
  top:50%;
  right:10%;
  transform:rotate(10deg);
}
.javascript{
  top:10%;
  right:33%;
  transform:rotate(-11deg);
}
.acessibilidade{
  top:25%;
  left:23%;
  transform:rotate(10deg);
}
.responsivo{
  top:10%;
  left:10%;
}
.otimizacoes{
  bottom: 20%;
  left:70%;
}
.agilidade{
  top:10%;
  left:33%;
}
.design{
  top:50%;
  right:30%;
  transform:rotate(-15deg);
}
.subtitulo-principal{
  text-align:center;
  color:#FFFAFA;
}
.tituloPrincipalIndex h1{
  font-size:3em;
  color:#FFFAFA;
  text-transform:uppercase;
  font-family:"Open Sans Condensed", "Arial", sans-serif;
}
.foto-home {
    height:12.5rem;
    margin-top:1.5em;
    border-radius:50%;

}
.saudacao p {
    font-size:1.25em;
    color: #99A;
    line-height: 1;
    text-indent:11rem;
    padding:2rem;
}
.saudacao-inicio {
    color: #889;
    font-size:3em;

}
.saudacao-ultima-linha {
    text-align:center;
    display: block;

}
.saudacao strong {
    font-size:2.5em;
    color: #000;
    font-family:"Crimison Text","Times New Roman", serif;
}
.saudacao em {
    color: #851944;
    font-style:italic;
    font-size:2.6em;
    font-family:"Lobster", cursive;
    transform: rotate(-10deg) skew(-5deg);
    display: inline-block;
}
.botao-index {
    background-color: #851944;
    color: #FFF;
    border: .2em solid black;
    width: 25rem;
    display: block;
    text-align: center;
    margin:1.5em auto;
    padding:.7em;
}
.secao-inicio{
  padding:.0625rem;
}
.secao-inicio h2 {
    text-transform: uppercase;
    font-family:"Open Sans Condensed", "Arial", sans-serif;
    font-size:2em;
    margin:.8em;
}
.subtitulo-footer{
  text-transform: uppercase;
  font-family:"Open Sans Condensed", "Arial", sans-serif;
  font-size:2em;
  padding:.8em;
  padding-bottom:.3em;
}
.texto-footer{
  padding:1.25em;
  padding-top:0;
  margin-bottom:0;
}
.posts-blog{
  position: relative;
  top: -1.5em;
  left: 1em;
}
.trabalhos {
    background-color: #3C1D3D;
    border-top:.625em solid #000;
    border-bottom:.625em solid #000;
}
.trabalhos h2 {
    color: #FFF;
}
.trabalhos ul {
    overflow: hidden;
    border:.525em solid black;
    padding-left:0;
    margin:3rem;
    margin-top:2rem;
}
.trabalhos li {
    float: left;
    width:33.333%;
}
.trabalhos img {
    width: 100%;
    display: block;
}
.blog {
    background-color: #999;
    color: #FFF;
    border-bottom: .625em solid #851944;
    position:relative;
}
.textoDoBlog{
  background-color:#FFF;
  font-size:1rem;
  color:black;
  position:absolute;
  top:3.5em;
  right:12em;
  width:40em;
  padding:2em;
}
.blog .mais-recente {
    background-color: #FFF;
}
.blog .mais-recente a {
    color: #F26;
}
.blog li a {
    color: #FCF;
}
.blog li{
  padding:.625em;
  padding-bottom:0.1em;
  text-decoration: underline;
  width:32%;
}
footer {
    background-color: #000;
    color: #FFF;
}
footer a {
    color: #F99;
}
main {
    width: 100%;
    padding-bottom: 0;
    float: none;
}
por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Tá vamos por parte: Você já pensou como isso aparece no MOBILE?

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Não kk, ainda to no começo do front-end... Mas, aposto que iria aparecer tudo fora dos lugares kk!

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Certo Allan, Outra coisa é UX, seu site tem uma ideia bacana, porém, logo acima terá uma foto do João da Silva , nome abaixo João da Silva e mais abaixo novamente João da Silva. Quando você desenvolve pra Web o foco é o produto, usar tag h1 em João da Silva, diz aos buscadores (Google, Bing etc) que João da Silva é o foco do seu conteúdo.

O problema é quantas pessoas querem encontrar João da Silva?

A pagina é de um Desenvolvedor Web, logo o ideal é pesquisar as palavras chave mais pesquisadas pra este termo e trabalhar estas primeiro. Você tem acesso a todos os cursos???

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Nos sites em que participo da manutenção e criação os acessos a partir de Mobile ja ultrapassa 70%. Logo vemos que em breve as pessoas tendem a deixar de usar Desktop, Notebook etc. Acho que seria melhor iniciar pensando nos dois tipos de dispositivos, pois depois terá que reaprender a fazer o código .

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Tenho acesso sim!

Mas o site eu estou fazendo conforme o exercício progride sabe?

Fui em carreiras e estou fazendo "Desenvolvedor front-end". Até agora ele está do jeito que você viu no exercício. Mas, entendi o que você quis dizer, creio que no final terá alguns ajustes... Não sei te dizer certeza!

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

E quais mudanças ocorreriam para o mobile?

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Ericsson, quando você perguntou se eu tinha acesso a todos os cursos, você me indicaria um?

Só fiz os básicos de HTML e CSS

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Eu indicaria você fazer a carreira SEO e UX antes de aprender código. Pois neles você vai entender algumas coisas que vai te ajudar muito definir o que fazer no HTML. Seria mais ou menos como aprender a cair direito pra não se machucar na hora de andar de Skate.

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Hmm, então você indicaria que eu parasse aqui, e começasse a carreira SEO e UX?

Ericsson, mas, além disso você conseguiu achar o erro? Porque ainda estou intrigado! Mesmo que eu comece a carreira SEO e UX, eu queria pelo menos solucionar esse problema!

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Em UX você aprende sobre cores, que fonte usar, espaçamento, layout, responsividade etc. Com este conhecimento, você vai criar páginas cativantes, atrativas no estilo que ar pessoas gostam. Depois aprenda SEO, nele você aprende sobre títulos bem feitos, imagens e como melhorar sua posição nas buscas. Você vai ficar fera!

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Achei interessante! Farei como você sugeriu!

Só queria que você me ajudasse nessa questão agora, se não for pedir demais, já que você ajudou tanto. Obrigado, desde já!

solução!
por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Sobre o erro quando você assistir Ux você desiste de fazer isso aí RSRSRS. Não fique chateado, salve está página e daqui 3 semanas olhe ela novamente que você vai pensar: foi eu que fiz isso ? RSRSRS

Isso acontece comigo sempre. Vou te enviar uma solução depois, neste momento estou te respondendo no mobile assim que eu tiver em Casa te ajudo. Opinião, eu faria um banner em PNG com compreensão pra não pesar no carregamento da página e deixaria com display: none; no Mobile, visto que este efeito aí não fica legal numa tela pequena.

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Ok, vou começar o curso UX então. Deixarei aberto aqui, não marcarei como solucionado.

Estarei aguardando! Obrigado, Ericsson!

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Você viu meu comentário acima né. O que você acha desta ideia?

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Acabei de ver. Posso até fazer sim!

Mas, como você está no mobile, acho que não tem como ver o resultado que está dando no meu desktop. Será que quando você tiver um tempo, da uma olhada pelo computador? Não sei, se o mobile, está aparecendo o mesmo erro que no meu pc!

por Allan Bontempo
| 233.8k xp | 83 posts
Desenvolvedor

Achei!!!!!! OBRIGADO mesmo Ericsson! Ajudou demais!

Mesmo assim vou seguir seu conselho! Abraços!

por ERICSSON AUGUSTO DE SOUZA LIMA
| 192k xp | 23 posts
BANCÁRIO

Boa sorte em tudo!