Small Widget Spot

Produção de Suportes Midiáticos

Small Widget Spot
13 de junho de 2015

Fontes em CSS

Por meio de códigos de CSS é possível configurar uma série de efeitos num texto. A estilização de fontes é uma forma para dar destaque a um elemento, como o nome do site que pode se transformar numa espécie de logotipo. É conveniente não abusar destes efeitos, porém, numa medida adequada, podem valorizar uma página. As codificações mostradas abaixo devem ser colocadas na área de inserção de CSS do site (alguns dos templates possuem zonas para isso ou há a possibilidade de usar plugin). No caso de elementos “internos” do site (cabeçalho, título de postagem, etc.), é necessário alterar o código da página para inserir o efeito (posso ensinar quem quiser fazer isso). Porém, no caso de um texto em uma página ou postagem, basta marcar o efeito, a partir das codificações <div class=”EFEITO“>elemento marcado</div>.

Sombra

Sombra com CSS
Fonte: Line25
text-shadow
Para entender os valores da codificação vale a pena ver a figura ao lado, que mostra os valores de deslocamento nos eixos x e y, assim como o do desfoque (sombra), em pixels, e a cor deste (qualquer formato).
.sombra {
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
font: 4em Fjalla One
}

3D

Texto em 3d

.trez {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
font: 4.5em Fjalla One;
}

Prof

Texto com profundidade
.enjoy-css {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
font: normal normal 900 70px/normal "Fjalla One", Helvetica, sans-serif;
color: rgb(32, 44, 45);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: 0 1px 0 rgb(128,141,147) , -1px 0 0 rgb(205,210,213) , -1px 2px 0 rgb(128,141,147) , -2px 1px 0 rgb(205,210,213) , -2px 3px 0 rgb(128,141,147) , -3px 2px 0 rgb(205,210,213) , -3px 4px 0 rgb(128,141,147) , -4px 3px 0 rgb(205,210,213) , -4px 5px 0 rgb(128,141,147) , -5px 4px 0 rgb(205,210,213) , -5px 6px 0 rgb(128,141,147) , -6px 5px 0 rgb(205,210,213) , -6px 7px 0 rgb(128,141,147) , -7px 6px 0 rgb(205,210,213) , -7px 8px 0 rgb(128,141,147) , -8px 7px 0 rgb(205,210,213) ;
}

Inset

Inset

.inset {
text-shadow: 0px 2px 3px #666;
font: 6em Fjalla One;
background: #505050;
padding: 50px 50px;
}

An

Anaglyph

.anaglyph {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
font: normal 60px/normal "Fjalla One", Helvetica, sans-serif;
color: rgb(51, 51, 51);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
letter-spacing: 3px;
text-shadow: -3px 0 1px rgb(30,242,241) , 3px 0 1px rgb(246,5,10) ;
}

Transp


janaina_editada_hor

Texto com transparência
.textblur {
z-index: 5;
font: 5em Fjalla One;
color: transparent;
-webkit-text-stroke: 6px rgba(255,255,255,0.05);
text-shadow: rgba(245,245,255,0.35) 0 0px 0px,
rgba(0,0,30,0.1) 0px 0.04em 0.02em;
background: -webkit-linear-gradient(-90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.3) 50%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,.3) 100%,
),
-webkit-background-clip: textblur;
}

Rot

Texto com rotação
.rot {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 20px;
overflow: hidden;
border: none;
font: normal 52px/1 "Fjalla One", Helvetica, sans-serif;
color: rgba(255,0,0,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-transform: rotateX(-5.729577951308233deg) rotateY(9.167324722093172deg) rotateZ(-5.156620156177409deg) ;
transform: rotateX(-5.729577951308233deg) rotateY(9.167324722093172deg) rotateZ(-5.156620156177409deg) ;
}

Neon

Texto com efeito Neon

.neon {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 80px;
margin-top: 30px;
border: none;
font: normal 48px/normal "Fjalla One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-decoration: normal;
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
white-space: pre;
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
background: #000000
}
.neon:hover {
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
margin-top: 30px;
background: #000000
}

Stroke

Stroke com transição
.stroke {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
float: none;
z-index: auto;
width: auto;
height: auto;
position: static;
cursor: pointer;
opacity: 1;
margin: 0;
padding: 0;
overflow: visible;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
font: normal normal bold 80px/normal "Fjalla One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: 1px 1px 0 #2ecc71 , -1px -1px 0 #2ecc71 , 1px -1px 0 #2ecc71 , -1px 1px 0 #2ecc71 ;
-webkit-transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);
transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transform: none;
transform: none;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}
.stroke:hover {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
float: none;
z-index: auto;
width: auto;
height: auto;
position: static;
cursor: pointer;
opacity: 1;
margin: 0;
padding: 0;
overflow: visible;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
font: normal normal bold 80px/normal "Fjalla One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: 1px 1px 8px rgba(46,204,113,0.5) , -1px -1px 8px rgba(46,204,113,0.5) , 1px -1px 8px rgba(46,204,113,0.5) , -1px 1px 8px rgba(46,204,113,0.5) ;
-webkit-transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);
transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transform: none;
transform: none;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}

3D-T

Efeito 3D com transição

.novotres {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
border: none;
font: normal 72px/normal "Fjalla One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
.novotres:hover {
color: rgba(169,214,169,1);
text-shadow: 0 1px 0 rgba(255,255,255,1) , 0 2px 0 rgba(255,255,255,1) , 0 3px 0 rgba(255,255,255,1) , 0 4px 0 rgba(255,255,255,1) , 0 5px 0 rgba(255,255,255,1) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 -5px 10px rgba(0,0,0,0.247059) , 0 -7px 10px rgba(0,0,0,0.2) , 0 -15px 20px rgba(0,0,0,0.14902) ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

Ref


Muitos sites possuem tutoriais para a feitura de efeitos. Recomenda-se que sejam estudadas instruções deste tipo de anos mais recentes, já que os desenvolvimentos nos códigos e navegadores geralmente simplifica a sintaxe do estilo. Os materiais de referência para a montagem desta compilação foram:

Porém, talvez o melhor site para o desenvolvedor iniciante seja o EnjoyCSS que, a partir de uma série de modelos, permite que se elaborem muitos elementos com estilo CSS. A criação de conta é opcional, neste serviço. É necessário copiar o código e depois colocá-lo no WP, como estilo CSS, para o seu uso.
É interessante notar ainda que alguns dos efeitos possuem “estados”, quer dizer, alteram-se se o usuário coloca o mouse sobre o texto. É muito melhor usar texto estilizado — que continua a ser um texto e por isso é lido pelos buscadores e pode ser selecionado pelo leitor — do que utilizar imagens de textos.
Posted in: Artigo
Tags: , ,
12 de abril de 2015

CMS e links para estudo de HTML/CSS

O site CMS Lab possui um texto bastante explicativo sobre o que é um CMS. Também possui postagens falando de características e novidades dos mais populares CMS: WordPress, Joomla, Drupal e Imagento. Dicas sobre o aprendizado específico de WordPress (lugares para aprender mais) são dadas neste site.

Não é obrigatório conhecer HTML – HyperText Markup Language (Linguagem de Marcação de Hipertexto) – para trabalhar com CMSs, no entanto em certos momentos pode ajudar ter alguma familiaridade com pelo menos o básico sobre o tema e as chamadas Cascading Style Sheets (ou simplesmente CSS), que são Folhas de Estilo para a formatação. Para quem se interessa pela história de desenvolvimento dessas linguagens e da web, vale a pena conhecer este site.

Read more ››

Posted in: Artigo
Tags: , ,