Boa noite,
Fiquei com uma dúvida, além da forma apresentada, com esses calculos para transladar o banner do twitter, existe alguma outra forma de obter o mesmo resultado?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Boa noite,
Fiquei com uma dúvida, além da forma apresentada, com esses calculos para transladar o banner do twitter, existe alguma outra forma de obter o mesmo resultado?
Oi Eduardo, tudo bem?
Pessoalmente eu usaria um humilde position: absolute junto com o transform: rotate().
Abcs!
Olá Natan,
Tentei usar a forma como disse acima, porem nao consigo acertar o banner no topo direito, utilizei o position absolute, mas o top e right , mas nao consigo , está faltando alguma coisa?
.etiqueta {
width:9em;
line-height:1;
padding:.2em;
box-sizing: border-box;
text-align: center;
text-decoration:none;
background-color:#3C1D3D;
color: white;
border:.1em solid black;
font-size:.8em;
font-family: "Open Sans Condensed", sans-serif;
position:absolute;
top:0;
right: 0;
transform:rotate(45deg);
}
Desenvolvedor web
Oi Eduardo,
Pelo que consegui ver pelo menos no CSS, só diminuir mais o right.
Fiz esse Jsbin aqui de exemplo.
Repare que mudando apenas o font-size, tudo muda proporcionalmente pois foi usado a medida EM nas outras propriedades.
Abcs!
Consegui, vlw Natan.
Só mais uma dúvida (acho que a ultima kk), é normal ficar a barra de rolagem na horizontal?
Eduardo,
Boa, que bom que conseguiu!
Relaxa! Olha... não é muito comum não.
O que você pode ir fazendo ou é analisar seu código e ver se tem algum CSS largura 3000px por exemplo, ou ir deletando parte por parte pra identificar o problema quando ele sumir no navegador.
Abcs!
Cara,
Vi meu código e não tem nenhuma largura com este tamanho, porem percebi q este problema aconteceu depois que coloquei esse banner do twitter. Mas mesmo retirando a largura, continua acontecendo.
header {
position: relative;
}
.palavra-home {
color: #D5447E;
font-family:Shadows Into Light, cursive;
font-weight: bold;
color: #D5447E;
font-size:.4em;
}
.palavras-home{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
perspective: 6px;
}
.eficiencia {
position: absolute;
top: 30%;
left: 70%;
-webkit-transform: rotate(-5deg);
transform:translate(-50%,-50%) translateZ(2px) rotate(-5deg);
}
.responsivo {
position: absolute;
top:17%;
left:10%;
-webkit-transform: rotate(-10deg);
transform: rotate(10deg);
transform: translate(-50%,-50%);
}
.agilidade {
position: absolute;
top:12%;
left:30%;
-webkit-transform: rotate(5deg);
transform:rotate(5deg);
}
.acessibilidade {
position: absolute;
top:30%;
left: 23%;
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg);
}
.codigo-limpo {
position: absolute;
top:40%;
left: 7%;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.css3 {
position: absolute;
top:44%;
left: 24%;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
.boas-praticas {
position: absolute;
top: 55%;
left:17%;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.javascript {
position: absolute;
top:12%;
right:27%;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.design {
position: absolute;
top:32%;
right:27%;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.html5 {
position: absolute;
top:35%;
right:12%;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.otimizacoes{
position: absolute;
top:45%;
right:20%;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.etiqueta {
width:11em;
line-height:1;
padding:.4em;
box-sizing: border-box;
text-align: center;
text-decoration:none;
background-color:#3C1D3D;
color: white;
border:.1em solid black;
font-size:.6em;
font-family: "Open Sans Condensed", sans-serif;
position:absolute;
top:2em;
right:-2.5em;
transform:rotate(45deg);
}
.foto-home {
height:4.588em;
-webkit-border-radius:50%;
-moz-border-radius:120px;
border-radius: 120px;
}
html {
font-size:16px;
}
.titulo-nome {
font-size:3.750rem;
}
.saudacao p {
color: #99A;
line-height:1;
font-size:3.750rem;
}
.saudacao-inicio {
color: #889;
}
.saudacao-ultima-linha {
text-align: right;
display: block;
}
.saudacao strong {
color: #000;
}
.saudacao em {
color: #851944;
display: inline-block;
transform:rotate(-5deg) skew(-10deg);
}
.botao-index {
font-size: 1.25em;
background-color: #851944;
color: #FFF;
padding: .5em;
border: .2em solid black;
width: 40ch;
margin: 2em auto;
display: block;
text-align: center;
}
.secao-inicio h2 {
text-transform: uppercase;
}
.trabalhos {
background-color: #3C1D3D;
border-top: 0.625em solid #000;
border-bottom: 0.625em solid #000;
padding: 4.375em;
}
.trabalhos h2 {
color: #FFF;
font-size: 300%;
padding-bottom: 30px;
}
.trabalhos ul {
overflow: hidden;
border: 0.500em solid black;
}
.trabalhos li {
float:left;
width: 33.333%;
}
.trabalhos img {
width:100%;
height:12em;
display: block;
}
.blog {
background-color: #999;
color: #FFF;
border-bottom: .5em solid #851944;
position: relative;
}
.blog li {
width: 30%;
}
.blog h2{
font-size: 300%;
}
.blog li a {
color: #FCF;
padding:10px;
}
.blog small {
position: relative;
top: -1em;
}
.blog li a {
color:#EE82EE;
padding: .5em;
display: block;
text-decoration: underline;
}
.inicio-post {
color: black;
background-color:#F2FFFC;
position:absolute;
top:.5em;
right:7em;
height:8em;
padding:1em;
width: 70%;
padding: 1.5em;
}
.mais-recente {
background-color: #F2FFFC;
}
footer {
background-color: #000;
color: #FFF;
padding:5em;
}
footer a {
color: #F99;
}
footer h2 {
font-size:3em;
}
main {
width: 100%;
padding-bottom: 0;
float: none;
}Oi Eduardo,
Faz assim, cria um Jsbin com seu codigo mas abre outra duvida? Ah, e marca esse topico como solucao.
Ai ajuda outros alunos a acharem essa mesma duvida.
Abcs!