Produção de Suportes Midiáticos » Produção de Suportes Midiáticos https://suportesmidiaticos.eca.usp.br Fri, 06 May 2016 06:05:02 +0000 pt-BR hourly 1 http://wordpress.org/?v=4.2.1 Alguns truques de CSS – 2 https://suportesmidiaticos.eca.usp.br/?p=3432 https://suportesmidiaticos.eca.usp.br/?p=3432#comments Wed, 04 May 2016 08:35:40 +0000 http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/?p=3432 1) Capitular

O nome da primeira letra maior de um texto é “capitular” (ou drop-cap). O nome da primeira letra maior de um texto é “capitular” (ou drop-cap). O nome da primeira letra maior de um texto é “capitular” (ou drop-cap). O nome da primeira letra maior de um texto é “capitular” (ou drop-cap). O nome da primeira letra maior de um texto é “capitular” (ou drop-cap). O nome da primeira letra maior de um texto é “capitular” (ou drop-cap). O nome da primeira letra maior de um texto é “capitular” (ou drop-cap). O nome da primeira letra maior de um texto é “capitular” (ou drop-cap).

O estilo pode ser aplicado na letra ou no parágrafo do texto que possuirá essa formatação. No caso da letra (sendo o estilo aplicado a partir da tag “span”), o código é o seguinte:

.capitalLetter
{
float:left;
color:black;
background:white;
border:1px solid #999999;
font-size:100px;
line-height:90px;
padding:2px;
font-family:times;
margin-right: 5px;
margin-top: 5px;
}

Veja mais informações (como o método para capitular como estilo de parágrafo) aqui.

2) Texto em coluna

A criação de um layout com colunas é bastante simples com CSS. É necessário criar um estilo que especifique o número de colunas e aplicá-lo a um bloco de texto (div). Exemplos de código e visualização do mesmo são mostrados abaixo.

.numero-colunas{
-moz-column-count: 2;
-moz-column-gap: 65px;
-moz-column-rule: 1px solid #ccc;
-webkit-column-count: 2;
-webkit-column-gap: 65px;
-webkit-column-rule: 1px solid #ccc;
}

A temática deste encontro, sinteticamente, objetiva estabelecer um eixo de discussão sobre o papel dos diferentes recursos pedagógicos na educação no Brasil atual. Como sabemos, a sociedade brasileira deposita grandes esperanças em relação à educação escolar e, não por acaso, o mote do governo federal é “Brasil, Pátria Educadora”. No entanto, a preocupação com o tema da formação nem sempre resulta em consensos sociais sobre quais direções seguir. O significado de “promover a cidadania” é disputado socialmente, chegando mesmo ao conflito aberto em diferentes arenas: as secretarias de educação e as definições de políticas públicas, os legislativos, em diferentes níveis, e outros espaços (imprensa, ONGs, etc.).
Porém, parece existir, a despeito dos dissensos, o reconhecimento da importância dos materiais didáticos para formação dos estudantes e, em parte, dos próprios educadores – mesmo em negativo. Isso é exemplificado pelas discussões e práticas dos que buscam impedir a distribuição de materiais relacionados à abordagem pedagógica de conteúdos como o gênero e a diversidade sexual. Ao mesmo tempo, numa vertente propositiva, alguns grupos sociais tentam fazer com que a escola receba certo tipo de material educativo, ainda que o mesmo esteja em flagrante contraposição com posições fundadoras da educação pública moderna, como a laicidade. Este é o caso da proposta, atualmente em tramitação no legislativo do Estado de São Paulo, para a distribuição de um “kit bíblico” (composto por livros, vídeos e palestras) a ser dirigido aos alunos de ensino fundamental das escolas estaduais paulistas.
Em resumo, a complexidade da temática possibilita vários ângulos de discussão. Nesse encontro são privilegiados dois enfoques, ligados a grupos sociais para os quais a ideia de promoção de direitos – em outras palavras da “cidadania” – parece fundamental e premente: os LGBTs e as “minorias” étnico-raciais brasileiras.

3) Texto em coluna+capitular+foto

É possível também combinar um texto em coluna com capitular e imagens. No caso, a foto recebeu um estilo (através de uma span), que é mostrado na sequência.

A temática deste encontro, sinteticamente, objetiva estabelecer um eixo de discussão sobre o papel dos diferentes recursos pedagógicos na educação no Brasil atual. Como sabemos, a sociedade brasileira deposita grandes esperanças em relação à educação escolar e, não por acaso, o mote do governo federal é “Brasil, Pátria Educadora”. No entanto, a preocupação com o tema da formação nem sempre resulta em consensos sociais sobre quais direções seguir. O significado de “promover a cidadania” é disputado socialmente, chegando mesmo ao conflito aberto em diferentes arenas: as secretarias de educação e as definições de políticas públicas, os legislativos, em diferentes níveis, e outros espaços (imprensa, ONGs, etc.).
Porém, parece existir, a despeito dos dissensos, o reconhecimento da importância dos materiais didáticos para formação dos estudantes e, em parte, dos próprios educadores – mesmo em negativo. Isso é exemplificado pelas discussões e práticas dos que buscam impedir a distribuição de materiais relacionados à abordagem pedagógica de conteúdos como o gênero e a diversidade sexual. Ao mesmo tempo, numa vertente propositiva, Lula Ramiresalguns grupos sociais tentam fazer com que a escola receba certo tipo de material educativo, ainda que o mesmo esteja em flagrante contraposição com posições fundadoras da educação pública moderna, como a laicidade. Este é o caso da proposta, atualmente em tramitação no legislativo do Estado de São Paulo, para a distribuição de um “kit bíblico” (composto por livros, vídeos e palestras) a ser dirigido aos alunos de ensino fundamental das escolas estaduais paulistas.
Em resumo, a complexidade da temática possibilita vários ângulos de discussão. Nesse encontro são privilegiados dois enfoques, ligados a grupos sociais para os quais a ideia de promoção de direitos – em outras palavras da “cidadania” – parece fundamental e premente: os LGBTs e as “minorias” étnico-raciais brasileiras.


Estilo da imagem:
.image {
float: right;
margin: 10px;
}

4) Texto+box, texto+olho e texto+vídeo

A criação de um box, com ou sem fundo colorido, pode ser uma estratégia para dar mais atratividade a uma página. O box pode conter somente texto ou algum outro elemento, como uma imagem, e pode ser elaborado com algum código com CSS, como no exemplo abaixo.

A temática deste encontro, sinteticamente, objetiva estabelecer um eixo de discussão sobre o papel dos diferentes recursos pedagógicos na educação no Brasil atual. Como sabemos, a sociedade brasileira deposita grandes esperanças em relação à educação escolar e, não por acaso, o mote do governo federal é “Brasil, Pátria Educadora”. No entanto, a preocupação com o tema da formação nem sempre resulta em consensos sociais sobre quais direções seguir. O significado de “promover a cidadania” é disputado socialmente, Lula Ramires

Lula Ramires, pesquisador e militante da causa LGTBchegando mesmo ao conflito aberto em diferentes arenas: as secretarias de educação e as definições de políticas públicas, os legislativos, em diferentes níveis, e outros espaços (imprensa, ONGs, etc.).
Porém, parece existir, a despeito dos dissensos, o reconhecimento da importância dos materiais didáticos para formação dos estudantes e, em parte, dos próprios educadores – mesmo em negativo. Isso é exemplificado pelas discussões e práticas dos que buscam impedir a distribuição de materiais relacionados à abordagem pedagógica de conteúdos como o gênero e a diversidade sexual. Ao mesmo tempo, numa vertente propositiva, alguns grupos sociais tentam fazer com que a escola receba certo tipo de material educativo, ainda que o mesmo esteja em flagrante contraposição com posições fundadoras da educação pública moderna, como a laicidade. Este é o caso da proposta, atualmente em tramitação no legislativo do Estado de São Paulo, para a distribuição de um “kit bíblico” (composto por livros, vídeos e palestras) a ser dirigido aos alunos de ensino fundamental das escolas estaduais paulistas.
Em resumo, a complexidade da temática possibilita vários ângulos de discussão. Nesse encontro são privilegiados dois enfoques, ligados a grupos sociais para os quais a ideia de promoção de direitos – em outras palavras da “cidadania” – parece fundamental e premente: os LGBTs e as “minorias” étnico-raciais brasileiras.

Código do box:
.box {
float:right;
width: 300px;
margin: 10px 20px 20px 20px;
padding: 30px 30px 30px 30px;
background: #ddf;
text-align:center;
font-size: 16px;
font-weight: bold;
line-height: 100%;
font-family: times;
color:#333;
border-radius: 10px;
}

Um elemento de destaque que contenha apenas texto costuma ser chamado de “olho”. Abaixo um exemplo e código CSS de um “olho”.

A temática deste encontro, sinteticamente, objetiva estabelecer um eixo de discussão sobre o papel dos diferentes recursos pedagógicos na educação no Brasil atual. Como sabemos, a sociedade brasileira deposita grandes esperanças em relação à educação escolar e, não por acaso, o mote do governo federal é “Brasil, Pátria Educadora”. No entanto, a preocupação com o tema da formação nem sempre resulta em consensos sociais sobre quais direções seguir. O significado de “promover a cidadania” é disputado socialmente, Materiais didáticos são debatidos e disputados socialmente, tanto em termos de promoção, quanto de proibiçãochegando mesmo ao conflito aberto em diferentes arenas: as secretarias de educação e as definições de políticas públicas, os legislativos, em diferentes níveis, e outros espaços (imprensa, ONGs, etc.).
Porém, parece existir, a despeito dos dissensos, o reconhecimento da importância dos materiais didáticos para formação dos estudantes e, em parte, dos próprios educadores – mesmo em negativo. Isso é exemplificado pelas discussões e práticas dos que buscam impedir a distribuição de materiais relacionados à abordagem pedagógica de conteúdos como o gênero e a diversidade sexual. Ao mesmo tempo, numa vertente propositiva, alguns grupos sociais tentam fazer com que a escola receba certo tipo de material educativo, ainda que o mesmo esteja em flagrante contraposição com posições fundadoras da educação pública moderna, como a laicidade. Este é o caso da proposta, atualmente em tramitação no legislativo do Estado de São Paulo, para a distribuição de um “kit bíblico” (composto por livros, vídeos e palestras) a ser dirigido aos alunos de ensino fundamental das escolas estaduais paulistas.
Em resumo, a complexidade da temática possibilita vários ângulos de discussão. Nesse encontro são privilegiados dois enfoques, ligados a grupos sociais para os quais a ideia de promoção de direitos – em outras palavras da “cidadania” – parece fundamental e premente: os LGBTs e as “minorias” étnico-raciais brasileiras.

Código do olho:
.olho {
float:right;
width: 280px;
margin: 10px 20px 20px 30px;
padding: 20px 10px 20px 15px;
border: 0px solid #1B486F;
border-width: 10px 0px;
text-align:left;
color:#333;
font: italic 1.4em/1.4 Georgia;
}

A inserção de vídeo na página é simples, basta copiar o código de incorporação fornecido pelos sites, porém é importante notar os valores de largura e altura e, se necessário, alterá-los. Abaixo um vídeo e seu respectivo código.

A temática deste encontro, sinteticamente, objetiva estabelecer um eixo de discussão sobre o papel dos diferentes recursos pedagógicos na educação no Brasil atual. Como sabemos, a sociedade brasileira deposita grandes esperanças em relação à educação escolar e, não por acaso, o mote do governo federal é “Brasil, Pátria Educadora”. No entanto, a preocupação com o tema da formação nem sempre resulta em consensos sociais sobre quais direções seguir. O significado de “promover a cidadania” é disputado socialmente, chegando mesmo ao conflito aberto em diferentes arenas: as secretarias de educação e as definições de políticas públicas, os legislativos, em diferentes níveis, e outros espaços (imprensa, ONGs, etc.).
Porém, parece existir, a despeito dos dissensos, o reconhecimento da importância dos materiais didáticos para formação dos estudantes e, em parte, dos próprios educadores – mesmo em negativo. Isso é exemplificado pelas discussões e práticas dos que buscam impedir a distribuição de materiais relacionados à abordagem pedagógica de conteúdos como o gênero e a diversidade sexual. Ao mesmo tempo, numa vertente propositiva, alguns grupos sociais tentam fazer com que a escola receba certo tipo de material educativo, ainda que o mesmo esteja em flagrante contraposição com posições fundadoras da educação pública moderna, como a laicidade. Este é o caso da proposta, atualmente em tramitação no legislativo do Estado de São Paulo, para a distribuição de um “kit bíblico” (composto por livros, vídeos e palestras) a ser dirigido aos alunos de ensino fundamental das escolas estaduais paulistas.
Em resumo, a complexidade da temática possibilita vários ângulos de discussão. Nesse encontro são privilegiados dois enfoques, ligados a grupos sociais para os quais a ideia de promoção de direitos – em outras palavras da “cidadania” – parece fundamental e premente: os LGBTs e as “minorias” étnico-raciais brasileiras.


Códido de incorporação do vídeo
<iframe width="380" height="214" src="https://www.youtube.com/embed/uLE4BfOtyI8" frameborder="0" allowfullscreen></iframe>

5) Fundos em texto

Um fundo no corpo do texto (background) pode servir tanto para destacar determinada parte do site quanto para separar partes do mesmo, como no exemplo. Existem sites que geram códigos de “puro CSS” (sem imagem) para fundos (como esse aqui). O código do primeiro background (inserido como class de uma div) é mostrado abaixo.

A temática deste encontro, sinteticamente, objetiva estabelecer um eixo de discussão sobre o papel dos diferentes recursos pedagógicos na educação no Brasil atual. Como sabemos, a sociedade brasileira deposita grandes esperanças em relação à educação escolar e, não por acaso, o mote do governo federal é “Brasil, Pátria Educadora”. No entanto, a preocupação com o tema da formação nem sempre resulta em consensos sociais sobre quais direções seguir. O significado de “promover a cidadania” é disputado socialmente, Materiais didáticos são debatidos e disputados socialmente, tanto em termos de promoção, quanto de proibiçãochegando mesmo ao conflito aberto em diferentes arenas: as secretarias de educação e as definições de políticas públicas, os legislativos, em diferentes níveis, e outros espaços (imprensa, ONGs, etc.).
Porém, parece existir, a despeito dos dissensos, o reconhecimento da importância dos materiais didáticos para formação dos estudantes e, em parte, dos próprios educadores – mesmo em negativo. Isso é exemplificado pelas discussões e práticas dos que buscam impedir a distribuição de materiais relacionados à abordagem pedagógica de conteúdos como o gênero e a diversidade sexual. Ao mesmo tempo, numa vertente propositiva, alguns grupos sociais tentam fazer com que a escola receba certo tipo de material educativo, ainda que o mesmo esteja em flagrante contraposição com posições fundadoras da educação pública moderna, como a laicidade. Este é o caso da proposta, atualmente em tramitação no legislativo do Estado de São Paulo, para a distribuição de um “kit bíblico” (composto por livros, vídeos e palestras) a ser dirigido aos alunos de ensino fundamental das escolas estaduais paulistas.
Em resumo, a complexidade da temática possibilita vários ângulos de discussão. Nesse encontro são privilegiados dois enfoques, ligados a grupos sociais para os quais a ideia de promoção de direitos – em outras palavras da “cidadania” – parece fundamental e premente: os LGBTs e as “minorias” étnico-raciais brasileiras.
A temática deste encontro, sinteticamente, objetiva estabelecer um eixo de discussão sobre o papel dos diferentes recursos pedagógicos na educação no Brasil atual. Como sabemos, a sociedade brasileira deposita grandes esperanças em relação à educação escolar e, não por acaso, o mote do governo federal é “Brasil, Pátria Educadora”. No entanto, a preocupação com o tema da formação nem sempre resulta em consensos sociais sobre quais direções seguir. O significado de “promover a cidadania” é disputado socialmente, Materiais didáticos são debatidos e disputados socialmente, tanto em termos de promoção, quanto de proibiçãochegando mesmo ao conflito aberto em diferentes arenas: as secretarias de educação e as definições de políticas públicas, os legislativos, em diferentes níveis, e outros espaços (imprensa, ONGs, etc.).
Porém, parece existir, a despeito dos dissensos, o reconhecimento da importância dos materiais didáticos para formação dos estudantes e, em parte, dos próprios educadores – mesmo em negativo. Isso é exemplificado pelas discussões e práticas dos que buscam impedir a distribuição de materiais relacionados à abordagem pedagógica de conteúdos como o gênero e a diversidade sexual. Ao mesmo tempo, numa vertente propositiva, alguns grupos sociais tentam fazer com que a escola receba certo tipo de material educativo, ainda que o mesmo esteja em flagrante contraposição com posições fundadoras da educação pública moderna, como a laicidade. Este é o caso da proposta, atualmente em tramitação no legislativo do Estado de São Paulo, para a distribuição de um “kit bíblico” (composto por livros, vídeos e palestras) a ser dirigido aos alunos de ensino fundamental das escolas estaduais paulistas.
Em resumo, a complexidade da temática possibilita vários ângulos de discussão. Nesse encontro são privilegiados dois enfoques, ligados a grupos sociais para os quais a ideia de promoção de direitos – em outras palavras da “cidadania” – parece fundamental e premente: os LGBTs e as “minorias” étnico-raciais brasileiras.



Código do fundo do primeiro texto:
.back {
background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 386px, rgba(0,0,0,0) 100%), rgba(255,153,0,0.38);
background: -moz-linear-gradient(90deg, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 386px, rgba(0,0,0,0) 100%), rgba(255,153,0,0.38);
background: linear-gradient(90deg, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 386px, rgba(0,0,0,0) 100%), rgba(255,153,0,0.38);
background-position: auto auto;
padding: 20px 120px 20px 120px;
-webkit-background-size: 60px auto;
background-size: 60px auto;
margin-left: -35px;
margin-right: -35px;
}

]]> https://suportesmidiaticos.eca.usp.br/?feed=rss2&p=3432 0 Fontes em CSS https://suportesmidiaticos.eca.usp.br/?p=3111 https://suportesmidiaticos.eca.usp.br/?p=3111#comments Sat, 13 Jun 2015 21:58:25 +0000 http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/?p=3111 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.
]]> https://suportesmidiaticos.eca.usp.br/?feed=rss2&p=3111 0 CMS e links para estudo de HTML/CSS https://suportesmidiaticos.eca.usp.br/?p=2783 https://suportesmidiaticos.eca.usp.br/?p=2783#comments Sun, 12 Apr 2015 01:07:23 +0000 http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/?p=2783

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.

A respeito do aprendizado de HTML/CSS (e recursos escritos com essas linguagens), segue a seguinte seleção de sites:

  • A w3schools possui cursos autoinstrucionais de HTML e CSS muito bons. Porém estão em inglês.
  • O site Code House é uma biblioteca de HTML, CSS e JS (JavaScript), uma linguagem que permite adicionar funcionalidades ao HTML, que oferece uma série de tutoriais. Similar, ao anterior, o Codepen mostra trabalhos feitos por amadores e profissionais em CSS e JS. Alguns trabalhos só são vistos nas versões mais modernas dos navegadores, pois utilizam os recursos mais avançados do HTML5.
  • Outra biblioteca de recursos de “HTML dinâmico” é o site Dynamic Drive.
]]> https://suportesmidiaticos.eca.usp.br/?feed=rss2&p=2783 0