Compartilhando informação

Arquivo para a categoria ‘CSS’

CSS – Utilizando sprites no meu site

Bom dia pessoal um ótimo fim de domingo a todos e que Deus os abençoe com muita paz e saúde.

vou mostrar neste tutorial como utilizar SPRITES para facilitar a vida ao se criar um site e usar muitos ícones e imagens para se montar seu layout
Sprite nada mais é do que um conjunto de imagens agrupadas formando uma única imagem e assim diminuindo o numero de requisições no seu servidor.

Nível: Médio/Avançado

O pessoal fica bravo comigo porque não coloco  os códigos aqui.

minha opinião se você ficar copiando e colando os códigos nunca vai aprender a programar de verdade vai sempre depender de códigos prontos para realizar seu trabalho abra um editor e crie os códigos verás que é muito bom ao se compilar um trabalho ele será fruto seu e não de algum código pronto da internet que talvez nem saiba o trabalho que dá para se criar.

Abaixo uma imagem com ícones utilizadas neste tutorial:

icons

vamos a parte do CSS

1 – crie ou edite um arquivo CSS e digite os códigos abaixo.

Arquivo: sprite.css

/* configurações gerais do menu ou botão */
ul{ margin: 0px; padding: 5px; }
a{text-decoration: none;}

/** Criando uma classe para o botao ou menu **/
.sprite{
display: inline-block;
vertical-align: text-top;
background-image: url(“images/icons/icons.png”);
background-repeat: no-repeat;
}

2 – Acima informamos as propriedades para a tag UL, A e criamos uma classe chamada SPRITE.

3 – Dando continuidade ao código agora vamos criar os menus ou botões

/** 1 **/
.inicio{background-position: -30px -10px; width: 50px; height: 50px; margin-bottom: 10px;}

/** 2 **/
.adicionar{background-position: -30px -330px; width: 50px; height: 50px; margin-bottom: 5px;}

/** 3 **/
.listar{background-position: -225px -390px;    width: 50px; height: 50px; margin-bottom: 10px;}

/** 4 **/
.configurar{background-position: -30px -515px; width: 50px; height: 50px; margin-bottom: 5px;}

4- acima foi criado as classes para cada menu ou botão eu utilizei um nome para o ” + ” Adicionar e assim por diante.

a propriedade background-position é que será alterada nos valores X e Y nesta ordem, assim utilizando qualquer imagem dentro do sprite.

OBS: Utilize a régua do  Fireworks ou Photoshop para encontrar o X e o Y das imagens ou você pode usar um programa especifico para realizar esta tarefa SpriteCowSpritePad e tambem Sprite Generator

Até aqui deixamos o CSS prontos agora vamos a parte do HTML aplicação no site ou sistema

Arquivo index.html

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>

<link href=”sprite.css” rel=”stylesheet”> <- AQUI  VOCÊ INFORMA ONDE ESTÁ O CSS CRIADO ACIMA

</head>

<body>
<ul>
<a href=”#”  title=”Inicio”>
<li class=”sprite inicio“></li>
</a>

<a href=”#” title=”Adicionar”>
<li class=”sprite adicionar“></li>
</a>

<a href=”#” title=”Listar”>
<li class=”sprite listar“></li>
</a>
</ul>
<a href=”#” title=”Configurar”>
<li class=”sprite configurar“></li>
</a>
</ul>
</body>
</html>

Acima o arquivo HTML com a chamada externa da folha de estilos chamada de sprite.css

espero que gostem e até o próximo

Grt
DavidGois

Basico – CSS

Algumas dessas marcações são básicas na vida de um webdesign são agumas regras dentro da css que ajudam a melhorar a aparencia visual de seu documento.

Regras
Regras css é uma declaração com sintaxe própria, que indica como será aplicado um estilo a um ou mais elementos html, as regras são compostas de 3 partes

seletor{propriedade: valor;}

Seletor
Genericamente, é o elemento HTML identificado por sua tag, por uam classe ou por uma ID. a regra será aplicada ao elemento aplicado exemplo:<p>, <h1>, <form> e .umaclassequalquer.

Propriedade
É o atributo HTML ao qual será aplicada a regra exempo: Font, Color, Background.

Valor
É a caracteristica assumida e aplicada pela regra exemplo: Font: Arial; Color: Blue; Background: Yellow;

Exemplos:

body{
background: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ff0;
}

Pop-up css e javascript

Este tutorial mostro como construir uma pop-up que não seja bloqueada pelos browsers (navegadores de internet) usando css e javascript.

<style type=“text/css”> e </style> é a marcação CSS da pop-up deve ser modificada de acordo com o seu uso.

<script language=“javascript”> e </script> é a marcação do javascript da pop-up que tambem deve ser alterado de acordo com o seu uso

Para entender o código é simples necessita o minimo de conhecimento de css e javascript, e basta ler os comentários que vai te ajudar muito.

<head>

<style type=“text/css”>
/* cria a div pop-up*/
#popup{
position: absolute; /*Define a posição absoluta da pop-up*/
top: 30%; /*Distancia da margem superior da página */
left: 30%; /*Distancia da margem esquerda da página */
width: 300px; /*Largura da pop-up*/
height: 100px; /*Altura da pop-up*/
padding: 20px 20px 20px 20px; /*Margem interna da pop-up*/
border-width: 1px; /*Largura da borda da pop-up*/
border-style: solid; /*Estilo da borda da pop-up*/
background: #ccc; /*Cor de fundo da pop-up*/
color: #000066; /*Cor do texto da pop-up*/
display: none; /* Estilo da pop-up*/
/*fim pop-up*/
}
</style>

<script language=“javascript”>
// Função que fecha o pop-up ao clicar no botao fechar
function fechar(){
document.getElementById(‘popup’).style.display = ‘none’;
}
// Aqui definimos o tempo para fechar o pop-up automaticamente
function abrir(){
document.getElementById(‘popup’).style.display = ‘block’;
setTimeout (“fechar()”, 3000);
}
</script>

</head>
<body onLoad=“javascript: abrir()”>

<div id=“popup” class=“popup”>
<b> Web tecnology </b>
<p>
Esse é um exemplo de popup utilizando DIV. Dessa maneira esse
pop-up não será bloqueado.

</p>
<small><a href=“javascript: fechar();”>X ou fechar</a></small>
</div>
<br> <a href=“javascript: abrir();”>Abrir Pop-up</a>
<br> <a href=“javascript: fechar();”>Fechar Ppo-up</a>

</body>
</html>

Menu Vertical – CSS

Mostrarei aqui como desenvolver um menu simples usando somente CSS, então vamos lá mãos a obra

nivel de dificuldade: 5,0 (*necessário conhecimento basico em html.)

1º vamos criar o arquivo CSS que será responsavel pela formatação do menu na página

tutorial

Salve este arquivo como menu.css (*este arquivo pode ser editado no bloco de notas, mas quando for salvar coloque a extenção .css )

2º Criando o arquivo Html ou PHP

tutorial

A 1ª linha é muito importante pois o href deve chamar o arquivo css que você criou ou então não irá funcionar

Salve este arquivo como menu.php ou menu.html

Lembrando a todos que eu trabalho com php então crio o menu em um arquivo separado, e faço um include na página onde será exibido o menu, pois facilita a manutenção que será de apenas um arquivo, e o menu será alterado em todas as páginas.

imagen do menu pronto

menu

Quando se passa o mouse em cima ficara assim:

menu

Antes de fazer qualquer pergunta leia atentamente os códigos dos arquivos pois é muito fácil entender os códigos.

Espero que gostem qualquer duvida ou se alguem quiser acrescentar alguma coisa deixa um comentário com seu e-mail e o que pode ser mudado, todos os créditos serão publicados.

faça as modificações que quiserem este código é livre.

CSS – Folha de estilos

Uma folha de estilos é bem simples, ela é uma página contendo definições ou variações  de estilos, que instrui o navegador como apresentar os diferentes elementos de uma página.

Para simplificar, Você pode começar construindo sua folha de estilos dentro da própria página Web. Mais adiante você descobrirá que pode ter sua folha de estilos em um ‘arquivo externo de estilos’ que pode ser ‘chamado’ por várias páginas, com a grande vantagem de se poder controlar através de um arquivo mestre, os estilos de todas as páginas que lincam para ele.

Os estilos que iremos usar serão definidos dentro do par de tags <head>…</head> como mostrado a seguir…

<style type=”text/css” title=”mystyles” media=”all”>

<!–

–>

</style>

Note o par de tags <style>…</style>  e irei explicar mais algumas coisas contidas neste par de tags.

type=”text/css” diz ao navegador que estamos usando um arquivo de texto puro para descrever nossos estilos, nada de especial aqui.

title=”mystyles” tem por finalidade identificar seus estilos através de um nome de sua livre escolha.

Agora as coisas começam a ficar interessantes, abaixo alguns exemplos para configurar sua folha de estilo.

  • media=”all” => todas as mídias, que tem propósitos gerais.
  • Media=”screen” =>Descreve como a página será apresentada na tela de um computador
  • Media=”print” => formata sua página para impressão.

Aqui vai mais alguns exemplos para configurar sua folha de estilos, e nos proximos post estarei falando sobre eles.

  • Au. = Aural media
  • Br. = Braille media
  • Em. = Embossed media
  • Hh. = Handheld media
  • Tt. = TTY (teletype) media
  • TV = TV (television) media

 

Os caracteres <!– e –> você verá os textos somente na marcação do código. Isto é chamado de  ‘comentario’, e uma vez que os estilos estão dentro da seção <head>…</head> do documento, e eles não irão aparecer na apresentação.

nos próximos post mostrarei como pernonalizar mais sua folha de estilos.

Informática gratuita para você.

Compartilhando informação

Cartões com Arte

Um novo conceito em cartões. facebook.com/cartoescomarte.

Nouvelle vie au Canada

Casal em busca do seu sonho de morar no Canadá

Informática Gratuita

Compartilhando informação

Red Dreams

Quem disse que meus sonhos não podem ser vermelhos?