Tag Archives: html

Fixando BG em seu site/blog com CSS

tux_cell

<style type=“text/css”>

 

 

 

CSS BOX-MODEL

tux_naruto

Resultado

O Modelo de Caixas

A imagem é cortesia de www.w3.org!

 

Dando forma circular a suas DIVS com CSS

tux_cell

Adicionei uns parametros a mais com descrição e adicionei classes separadas, para dar cores diferentes.

A função border radius da forma a suas DIVS.

 

 

Segue também um link com vários tracejados que podemos usar, http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none

O dreamweaver do Linux – Blue Griffon

tux-viking

Bom todos sabemos que o dreamweaver é um ótimo software e faz falta mesmo, mas seguindo o conceito e tentar não emular nada achei o Blue Grifon que tem a mesma função conhecida como  WYSIWYG – “What You See Is What You Get” e quer dizer “O que você vê é o que você obtém”, ou seja, você pode desenvolver uma página web sem saber nada (ou quase nada) de HTML.

Em português não achei tutoriais para instalar no ubuntu 14.04 apenas até o 12 então segue um tutorial super simples.

 

Para versão 12.04

How to install BlueGriffon 1.7.2 on Ubuntu 12.04 and derivatives:

Testado e aprovado na versão 14.04

3 FOTOS icone do software, ele em modo imagem e modo edição em código.

blue_griffonblue_visãoblue_codigo

 

border style css exemplos

Tux_Worker

Saindo um pouco do contexto geral do site que é telefonia IP, mostro para vocês um pouco de CSS stylesheet, utilizado em todos sites que você acessa.

Hoje vou mostrar alguns exemplos do que podemos fazer e como vemos isso em nosso browser.

Normalmente quem trabalha com telefonia IP(open-source), é obrigado também a conhecer PHP, Python e claro HTML/CSS/HTM5 para dar um visual bacana a seus softwares de integração.

Abaixo alguns exemplo do que o CSS pode fazer nas bordas do seu site.

border_css

border_example1

Aplicando no site todo.

* {
border: 1px dashed #3A5FCD;
}

Aplicando na TAG DIV

div {

border: 2px solid #red

}

Como fazer comentário no código CSS /* COMENTÁRIO */

Bom esses são alguns exemplos divirta-se, logo dou mais exemplos do poder do CSS.

 

Mais,,,

Bordas podem ser usadas para muitas coisas, por exemplo, como elemento decorativo ou para servir de linha de separação entre duas coisas. CSS proporciona infinitas possibilidades de uso de bordas na página.

A espessura das bordas [border-width]

A espessura das bordas é definida pela propriedade border-width, que pode assumir os valores thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels. A figura a seguir ilustra algumas espessuras de bordas:

Exemplo de espessuras de bordas

As cores das bordas [border-color]

Cores

A propriedade border-color define as cores para as bordas. Os valores são expressos em código ou nome de cores, por exemplo, “#123456”, “rgb(123,123,123)” ou”yellow” .

Tipos de bordas[border-style]

Existem vários tipos de bordas disponíveis para escolha. A seguir apresentamos 8 tipos diferentes de bordas e como elas são renderizadas Internet Explorer 5.5. Todos os exemplos são mostrados na cor “gold” e com espessura “thick”, mas você pode usar qualquer cor e espessura ao seu gosto.

Os valores none ou hidden podem ser usados quando não se deseja a existência de bordas.

Diferentes tipos de bordas

Exemplos de definição de bordas

As três propriedades explicadas acima podem ser definidas juntas para cada elemento e resultam em diferentes bordas. Para exemplificar, foram estilizadas diferentes bordas para os elementos <h1>, <h2>, <ul> e <p>. O resultado pode não ser uma obra prima, mas, ilustra bem algumas das inúmeras possibilidades de estilização de bordas:

É possível ainda definir propriedades especialmente para as bordas top, bottom, right ou left (superior, inferior, direita e esquerda). Veja o exemplo a seguir:

Compilando [border]

Assim como para muitas outras propriedades, você pode usar uma declaração abreviada para bordas. Vamos a um exemplo:

Pode ser abreviada assim:

Árvore familiar x HTML

tux_css__penguin liniux

<!DOCTYPE html>
<html> <!–O tronco da árvore!–>
<head> <!–Filho de html, pai de title,
irmão de body–>
<title></title> <!–Filho imediato de head,
filho de head E html–>
</head>
<body> <!–Filho de html, pai de p,
irmão de head–>
<p></p> <!–Filho imediato de body,
filho de body E html–>
</body>
</html>